Changing video on mouseclick?_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2022-12-29 01:20 出处：网络

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

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.