Question

我有一个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;
}

Answer 1

试试这个：

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
}

Answer 2

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

myVid.load();

请参阅： trying to add a multi source video player with more then one video?

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

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

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

点击按钮后，视频不会弹出

HTML

的JavaScript

2 个答案: