アレイにビデオリンクを含めることは可能ですか？はいの場合、どうですか？

-1

私はビデオ再生リストを作成しようとしていました。基本的には、一方が終了したらもう一方が開始し、終了すると元のものが開始されます。 1> 2> 1> 2などを繰り返す。私は配列にビデオリンクを含めることによってこれを行うよう試みましたが、まったく表示されません。私はこれのためにjavascriptを使いたい。私のコード：アレイにビデオリンクを含めることは可能ですか？はいの場合、どうですか？

<body onload="setFirstVideo()"> 
<video controls onended="videoEnded()" 
     src=""> 
</video>

var videoSources = new Array(); 

videoSources[0] = ['<video> <source src="http://courses.cs.cityu.edu.hk/cs2204/barbecue.mp4">,<source src="http://courses.cs.cityu.edu.hk/cs2204/barbecue.ogg"> </video>']; 
videoSources[1] = [ "http://courses.cs.cityu.edu.hk/cs2204/cakemaking-s.mp4", "http://courses.cs.cityu.edu.hk/cs2204/cakemaking-s.ogg"]; 
var currentIndex = 0; 

function setFirstVideo() 
{ 
    var myVideo = document.getElementsByTagName('video')[0]; 
     myVideo.src = videoSources[currentIndex]; 
} 

function videoEnded(){ 
    var myVideo = document.getElementsByTagName('video')[0]; 
    currentIndex = (currentIndex+1) % videoSources.length; 
    myVideo.src = videoSources[currentIndex]; 
    myVideo.load(); 
    myVideo.play(); 
}

出典

2017-11-30 apkr x

あなたは正しい考えを持っているように見えます。あなたの最初のものに悪いものとして飛び出す唯一のものは、HTMLではなくURLを含むだけです。

2つのソースがあるように見えますが、myVideo.src属性を使用して設定することはできません。代わりに、それらを子として追加する必要があります。

いずれにしても一貫性があります。あなたは、ビデオをロードする代わりにmyVideo.srcを設定する、myVideoの子供たちのすべてを削除し、新しいものを追加するために行くとき、次に

videoSources = [ 
    ['example.com/video1.mp4', 'example.com/video1.ogg'], 
    ['example.com/video2.mp4', 'example.com/video2.ogg'] 
];

：私はあなたがおそらくURLを配列の配列を行う推薦します：

var myVideo = document.getElementsByTagName('video')[0]; 
myVideo.innerHTML = ''; // fast way to empty children 
videoSources[currentIndex].forEach(url => { 
    const source = document.createElement('source'); 
    source.src = url; 
    myVideo.appendChild(source); 
});

このようにすると、動画のソースを動的に設定できるようになります。両方の機能がこのように機能していることを確認してください（または、より良い機能ですが、どちらも共通の機能を使用してください）。

出典

2017-11-30 12:13:21 samanime

リンクを使用して私にデモを教えてください。おそらくjsfiddle、なぜならそれはまだ動作するようです –

アレイにビデオリンクを含めることは可能ですか？はいの場合、どうですか？

答えて

関連する問題