Changing video on mouseclick?
I have two videos, and I want to loop the first video until the user clicks the mouse, at which point I want to switch to playing the second video. Does anyone know what the best way to do this would be?
Edit: Sorry, to clarify, I would prefer to use HTML 5 (assuming this is possible). I am trying to have the two videos swapped out seamlessly, one on top of another. I want it to look like clicking the mouse made the video finish or progress. So I need to pause/hide the first one and show/play the second one.
Update: With Galen's help and some Google searches, I figured it out:
<html xmlns="http://www.w3.org/1999/xhtml">
<script type="text/javascript">
function swapVideos() {
var video1 = document.getElementsByTagName('video')[0];
video1.pau开发者_JAVA技巧se();
video1.style.display = 'none';
var video2 = document.getElementsByTagName('video')[1];
video2.play();
}
</script>
<body>
<video src="video1.ogg" controls="controls" loop="loop" autoplay="autoplay" onclick="swapVideos();">
your browser does not support the video tag
</video>
<video src="video2.ogg" controls="controls" preload="preload">
your browser does not support the video tag
</video>
</body>
</html>
Add this code to the click event of whatever you want
// pause first video
var video1 = document.getElementsByTagName('video')[0];
video1.pause();
// play second video
var video2 = document.getElementsByTagName('video')[1];
video2.play();
Add this to make the first video loop
var video1 = document.getElementsByTagName('video')[0];
video1.addEventListener('ended', function () {
video1.play();
});
it's tough to be specific with the information you have given, but you could use javascript or jquery to do this. Bind a click event to a DOM element, and on click change the source of the video. I am assuming that the video is determined by a source parameter in an swf.
加载中,请稍侯......
精彩评论