鼠标点击改变视频？答案

【问题标题】：Changing video on mouseclick?鼠标点击改变视频？
【发布时间】：2010-05-02 11:10:20
【问题描述】：

我有两个视频，我想循环播放第一个视频，直到用户单击鼠标，此时我想切换到播放第二个视频。有谁知道最好的方法是什么？

编辑：抱歉，澄清一下，我更喜欢使用 HTML 5（假设这是可能的）。我试图让两个视频无缝交换，一个在另一个之上。我希望它看起来像单击鼠标使视频完成或进行。所以我需要暂停/隐藏第一个并显示/播放第二个。

更新：在 Galen 的帮助和一些 Google 搜索下，我想通了：

<html xmlns="http://www.w3.org/1999/xhtml">
<script type="text/javascript">
function swapVideos() {
    var video1 = document.getElementsByTagName('video')[0];
    video1.pause();
    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>

【问题讨论】：

标签： javascript video html user-input

【解决方案1】：

将此代码添加到您想要的任何点击事件中

// pause first video
var video1 = document.getElementsByTagName('video')[0];
video1.pause();
// play second video
var video2 = document.getElementsByTagName('video')[1];
video2.play();

添加这个来制作第一个视频循环

var video1 = document.getElementsByTagName('video')[0];
video1.addEventListener('ended', function () {
    video1.play();
});

【讨论】：

谢谢！是否可以隐藏video1？我希望 video2 看起来像 video1 的延续。

【解决方案2】：

很难具体说明您提供的信息，但您可以使用 javascript 或 jquery 来执行此操作。将点击事件绑定到 DOM 元素，并在点击时更改视频的来源。我假设视频是由 swf 中的源参数确定的。

【讨论】：

根据标签，这看起来像 HTML5 视频，而不是 Flash。
是的，抱歉，对 HTML5 很感兴趣，但我不知道这是否可行，所以我没有具体说明。