javascript - 当我点击按钮时，视频不会弹出

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
}