This question already has answers here:
Redirect html5 video after play
(7 answers)
Closed 9 years ago.
so I want to have a short video intro for my website then it will go fade out and straight to my main site. Sorta like this: http://www.firecrackerfilms.com/.
This is my Code:
<video id="video" src="Inception.mp4" autoplay height: 100% width=100%>
The video works fine but after it finishes it just stays there and doesn't go to the main page. Any tips or solutions would be greatly appreciated!
Thanks!
In window.onload, bind an event handler to the video element's "ended" event. In that handler, you can either redirect the page or load content with AJAX. Something like:
window.onload= function () {
document.getElementById("video").onended = function () {
// video done playing
};
};
Related
I'm using a Vimeo video-embed (iFrame embed code from their website) on my website, and I need the video to automatically stop at a specific timestamp (I'll use 6 seconds here) whenever users of my site play the video. The content after the timestamp is unnecessary.
But unlike YouTube, Vimeo doesn't seem to have an easy way to set end times for any video you embed from them. Unfortunately, I do not own the video so I can't edit the footage directly, so I believe a JavaScript solution is the best option.
Here's the aforementioned iFrame embed HTML from Vimeo that I use on my site:
<iframe id="vidz" src="https://player.vimeo.com/video/401649410?h=11d74aa27c&portrait=0" width="450" height="253" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen=""></iframe>
Upon trying to select elements within the iFrame (like the video itself), my JS selectors don't seem to be working at all, perhaps because the video is from a separate source not hosted on my site?
Here's code I've been working with, but it doesn't appear to be interacting with the iFrame, as I believe I would need to add this eventListener to a video, directly. But I can't select the embeded video via JS either, it seems. So I'm not quite sure how to handle this:
var vid = document.querySelector("#vidz");
vid.addEventListener("timeupdate", function(){
if(t >= 6000)
{
vid.pause();
}
});
I can also provide the HTML to any elements within the iFrame, but again, I'm not sure how I'd be able to interact with those elements.
Any ideas? Any and all help would be deeply appreciated. Cheers.
use Vimeo js file and below is a script you want video will pause after 6 minutes (specific time) (360 means 6 minutes)
<script src="https://player.vimeo.com/api/player.js"></script>
var iframe = document.querySelector('iframe');
var player = new Vimeo.Player(iframe);
function foo() {
player.getCurrentTime().then(function(time) {
console.log('time:', time);
if(time >= 360){
player.pause()
}
});
setTimeout(foo, 1000);
}
player.on('play', function() {
foo();
});
</script>
How do I make a video on an overlay all disappear after it has finished playing?
Is this javascript?
Here is the code I have so far:
HTML / CSS Video end event issue
Take a look at this jQuery plugin
You can enable any action at the end of a video with something like this:
onPlayerEnded: function(){ // Do something here },
I found a post that could help you out HERE
I've never used them myself but there appears to be javascript events for video/audio, including ended.
video.addEventListener('ended', foo);
Where foo would be a function to hide the video.
Hope that helps!
This question already has answers here:
Can I use javascript to dynamically change a video's source?
(10 answers)
changing source on html5 video tag
(19 answers)
Closed 9 years ago.
I have an html5 video streaming and I need to change it source* after some click action. So what i'm doing works, but only in html, i can see source change but it no changing on my display, can you help me? What is wrong? *The source is appending frome xml file.
HTML
<video autoplay loop width="960" height="540" id="video">
<source src="video/movie_01.mp4" id="tv_main_channel">
</video>
JS
btn.on('click', function(){
var tv_main_channel = $('#tv_main_channel'),
d_program_source_mp4 = $(program_self).find("program_source_mp4").text();
tv_main_channel.attr('src', d_program_source_mp4);
}
also i try it with append but it still not work
var video_block = $('#video');
video_block.empty();
video_block.append(
'<source src="'+ d_program_source_mp4 +'">'
);
Thx for help.
See this fiddle: http://jsfiddle.net/qGbzb/2/
To dynamically load videos you need to run
var video_block = $('#video');
video_block.load();
Then you should also see a change in the display too, and not only in the html.
It's simple, just do this:
btn.on("click", function(){
var src = "new_video_src.mp4";
$("#video").find("#tv_main_channel").attr("src", src)
})
You can use like this in click event
var src = "new_video_src.mp4";
$("#tv_main_channel").src=src;
This is the actual method for video tag elements
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Playing sound notifications using Javascript?
I'm making a game in JS, and I need a proper way to play a sound when something happens. How do you do that with JS/HTML5? I saw this article, but even with their example, it doesn't really work! Sometimes I do hear that bird, but only for a short time, and I can't get it to work anymore then.
HTML5 has the new <audio>-Tag that can be used to play sound. It even has a pretty simple JavaScript Interface:
<audio id="sound1" src="yoursound.mp3" preload="auto"></audio>
<button onclick="document.getElementById('sound1').play();">Play it</button>
You can make use of the HTML5 <audio> tag: http://jsfiddle.net/STTnr/.
var audio = document.getElementById('audio');
setTimeout(function() {
audio.play(); // play it through JavaScript after 3 seconds
}, 3000);
HTML:
<audio src="something" id="audio"></audio>
Just hide the element itself:
#audio {
display: none;
}
Do note that no browser supports all formats. This can be frustrating, but you can supply your audio in several formats.
This question already has answers here:
jQuery/JavaScript to replace broken images
(32 answers)
Closed 6 years ago.
I need to be able to detect if an image is broken and replace with a default image if the image link is broken. I know i could do this with an image proxy, but was hoping to do it on the fly with javascript.
I believe it's the onerror event of the img element. onerror=function(){} though i've never used it.
As any event the onerror will propagate upwards on the DOM, so you could make a generic handler for this type of errors.
<script type="text/javascript">
jQuery(document).bind('error', function(event) {
console.log(event.target.src);
});
</script>
You can use <img onerror='doWhateverFunction()' etc etc
http://msdn.microsoft.com/en-us/library/cc197053(v=VS.85).aspx
Example of code:
<script language='javascript'>
function defaultImage(img)
{
img.onerror = "";
img.src = 'default.gif';
}
</script>
<img alt="My Image" src="someimage.gif" onerror="defaultImage(this);" />