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

新しいソース タグを作成したら、次のように、ビデオ要素に新しいソースを強制的にロードする必要があります。

myVid.load();

参照: 複数のビデオを含むマルチソース ビデオ プレーヤーを追加しようとしていますか?

クリック ハンドラーは正常に動作するはずですが、UX に奇妙な副作用が生じる可能性があります。「span」や「button」など、「a」以外のタグを使用したほうがよいでしょう。その後、JavaScript でクリック ハンドラを設定できます。

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

3 番目の "false" 引数を省略しないでください。そうしないと、古いバージョンの Firefox でコードが壊れてしまいます。

于 2012-12-05T20:49:51.347 に答える
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 に答える