1

我有 5 个视频和带有 5 个不同按钮的视频播放器。
当我单击任何一个按钮时，它会加载视频，但如果我想观看不同的按钮，我必须重新加载页面并单击一个。

我该如何解决它，以便您可以随时单击任何视频按钮并仍然使视频正常工作。我想我需要做一个鼠标按下声明，如果是这样，我将如何写一个。这是我的 html 和 JavaScript：

html

<video id="myVideo" controls autoplay></video>
    <div>
        <a href="#" onClick="addVideo1()" onMouseUp="mouseUp1">Demo Reel</a>
        <a href="#" onClick="addVideo2()" onMouseUp="mouseUp2">Video1</a>
        <a href="#" onClick="addVideo3()" onMouseUp="mouseUp3">Video2</a>
        <a href="#" onClick="addVideo4()" onMouseUp="mouseUp4">Video3</a>
        <a href="#" onClick="addVideo5()" onMouseUp="mouseUp5">Video4</a> 
    </div>

JavaScript

var myVid = document.getElementById('myVideo');

var myVidContents1 = "<source src='video/demoreel.mp4' type='video/mp4'/> <source src='video/demoreel.webm' type='video/webm'/> <source src='video/demoreel.ogv' type='video/ogg'/>";

function addVideo1() {
    myVid.innerHTML = myVidContents1;
}

var myVidContents2 = "<source src='video/video1.mp4' type='video/mp4'/> <source src='video/video1.webm' type='video/webm'/> <source src='video/video1.ogv' type='video/ogg'/>";

function addVideo2() {
    myVid.innerHTML = myVidContents2;
}

var myVidContents3 = "<source src='video/video2.mp4' type='video/mp4'/> <source src='video/video2.webm' type='video/webm'/> <source src='video/video2.ogv' type='video/ogg'/>";

function addVideo3() {
    myVid.innerHTML = myVidContents3;
}

var myVidContents4 = "<source src='video/video3.mp4' type='video/mp4'/> <source src='video/video3.webm' type='video/webm'/> <source src='video/video3.ogv' type='video/ogg'/>";

function addVideo4() {
    myVid.innerHTML = myVidContents4;
}

var myVidContents5 = "<source src='video/video4.mp4' type='video/mp4'/> <source src='video/video4.webm' type='video/webm'/> <source src='video/video4.ogv' type='video/ogg'/>";

function addVideo5() {
    myVid.innerHTML = myVidContents5;
}
4

2 回答 2

0

尝试这个：

function addVideo1() {
    myVid.innerHTML = myVidContents1;
    return false;
  //This over-rides the default link behaviour,
  // so the browser doesn't scroll to the top of the page instead of firing your code
}
于 2012-12-03T12:53:44.043 回答
0

创建新的源标签后，您需要强制视频元素加载新的源，如下所示：

myVid.load();

请参阅： 尝试添加包含多个视频的多源视频播放器？

您的点击处理程序应该可以正常工作，但可能会有一些奇怪的 UX 副作用。您可能最好使用“a”以外的标签，例如“span”或“button”，然后您可以在javascript中设置点击处理程序：

document.getElementById('link1').addEventListener('click', addVideo1, false);
// etc...

不要忽略第三个“假”参数，否则您的代码将在旧版本的 Firefox 中中断。

于 2012-12-05T20:49:51.347 回答