I need to know how to do a page containing a fullscreen movie clip as a intro for the site, after the movie is finish it will redirect the visitors (without clicking) to a subpage.
Is this possible to do?
No flash, javascript or/and PHP only.
I'm just going to assume you're using the video element.
<video id="somevideo" width="420">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
Now add your event
document.getElementById("somevideo").addEventListener('ended',function (e) {
window.location = "http://stackoverflow.com/questions/19795419/after-movie-clip-redirect-to-subpage";
});
You may want to set up some timers or custom handling as this will redirect to the next page the moment your video completes but that's all up to your site spec
Related
Would like to have an MP3 track play in the background immediately after a HTML/CSS/JavaScript page is loaded.
So far, only able to have a player with controls at the bottom of the page:
Bottom of webpage
using the following code:
<audio id="bg_music" class="audio" controls loop>
<source src="audio/silent-night.mp3"
type="audio/mp3">
Your browser does not support the audio element.
</audio>
Would like to find a way to have the MP3 file play automatically after the browser (Chrome) loads the webpage.
Thanks,
Benjamin
You need to add an attributed autoplay, and it will be done. You may additionaly provide value autoplay=true or autoplay=false, but still if you don't give it, it will automatically consider it to be true if you just add the attribute.
<audio id="bg_music" class="audio" autoplay controls loop>
<source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mp3" />
Your browser does not support the audio element.
</audio>
I search for solution in many questions but I didn't get answer, I have HTML5 video play :
<video oncontextmenu="return false;" width="100%" height="auto" controls id="player"
controls controlsList="nodownload" poster="{{asset('images/'.$course->id.'.png')}}"
onended="alert('it is worked')">
<source src="{{asset('promos/'.$course->id.'.mp4')}}" type="video/mp4">
<source src="{{asset('promos/'.$course->id.'.m4v')}}" type="video/ogg">
</video>
it works fine but I cant control in progress bar ,I can't move video forward or backward ,How can I do that ?
is anyone can help ?
Video Link
https://streamable.com/k3rved
You HTML5 looks fine - the video below will allow moving forwards and backwards using the scroll bar as a working example to refer to:
<video oncontextmenu="return false;" width="100%" height="auto" controls id="player"
controls controlsList="nodownload" poster="{{asset('images/'.$course->id.'.png')}}"
onended="alert('it is worked')">
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
</video>
If the issue is the lack of thumbnails when you hover over the progress bar, then these need to be generated separately on the server side and included in the video container (e.g. mp4) that you make available.
Update
The video link in the question above is not actually a link to a video, rather it is a link to a webpage.
This webpage does indeed contain a video, along with the videoJS player, when you inspect it, but you can't use the webpage link as the 'src' attribute in a HTML5 video.
Assuming you have permission to use the video, you can extract the src from the video at that webpage. This works in this case, at the time of writing anyway - sometimes videos in a webpage will have access restrictions or authentication requirements to prevent them being accessed from other sites.
I am using Html video tag. I have added video URL from azure blob. When I click on play then it starts playing but when I want to make forward and backward to video, it is not going on that position where I want to start play. It is still on that current position. So I want to show loading when I click on forward when video is not ready to play same as YouTube. Here is my code:
<video id="video" class="family-post-img" controls="controls"
<source src="#Model.FileURL" type="video/mp4">
</video>
I want to show video buffering as YouTube when I directly click on forward and backward if video is not ready to play.
Thanks
When a user seeks through a video two events fire...
onseeking triggers while they are seeking
onseeked triggers when they are finished seeking.
Therefore, you need to monitor these events and take appropriate action, like this...
<video src="movie.mp4" type="video/mp4" onseeking="CallAction1();" onseeked="CallAction2();" controls></video>
I have a small project of doing some html5 videos embed on a site.
I use a simple HTML video embed code
<video width="560" height="340" controls>
<source src="path/to/myvideo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="path/to/myvideo.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>
so my question is that possible to disable the copy URL when you right click on the video?
I know if they really want to get the video link there are ways to do so.
but just at least if I can do that one.
Thanks
You can catch right-clicks via JavaScript and thus prevent the right-click menu.
As you correctly noted though, it’s only a hindrance rather than prevention. HTML5 video is about direct integration into the browser and thus can also be saved like images, for example.
I have this page
http://joewillhelpyou.com
Users click the blue botton and a video page begins to play.
I have it simple. an iframe so the Jquery dows not mess with my tag that I found would not allow me to autoplay the next video, and 2 src for each video. In all the browswers they work okay, only one video is played back mp4 or webm. but in IE I keep hearing two playing back and I cannot figure out why
you can visit the page and tell me if you catch my mistake or a workaround for IE
<div id="videodiv">
<iframe src="http://joewillhelpyou.com/videos/step2/play02_01.html" width="1000" height="750"></iframe>
</div>
then this leads to a page where I have the video
<video controls autoplay width="936" height="624">
<source src="002_001.mp4" type="video/mp4">
<source src="002_001.webm" type="video/webm">
Your browser does not support the video tag.
</video>
under normal situations the code only plays one choce right? but in IE it seems to play 2 things at once, the rest of the browsers only sound out one track and that is what I want