Question

私はビデオプレイリストを配列しています。選択したvideos/video.lengthが再生されているとき（たとえば、2番目、4番目、8番目...）、関数を呼び出したい（たとえば、警告 "注意！"）。どのような解決策が評価されます。完全なcode from my JSfiddleを使用してください。

var videoSource = new Array(); 

videoSource[0]=''; 
videoSource[2]=''; 
videoSource[3]=''; 
videoSource[4]=''; 
videoSource[5]=''; 

var i = 0; 
var videoCount = videoSource.length; 
document.getElementById("myVideo").setAttribute("src",videoSource[0]); 
videoPlay(0); 

function videoPlay(videoNum) 
{ 
    document.getElementById("myVideo").setAttribute("src",videoSource[videoNum]); 
    document.getElementById("myVideo").load(); 
    document.getElementById("myVideo").play(); 
} 
document.getElementById('myVideo').addEventListener('ended',myHandler,false); 

function myHandler() { 
    i++; 
    if(i == (videoCount)){ i = 0; videoPlay(i);} 
    else{videoPlay(i);} 
} 

Answer 1

動画の再生開始時にコードがブロックされていないので、ロジックがplayが呼び出された直後に配置することができます。 インデックスをチェックする最も簡単な方法は、if(index==1 || index == 3 || index == 4)などのようですが、もう少し保守性の高いものは、if([1,3,4].indexOf(vidIndex) != -1)のように配列内に保持しています。配列にはインデックスが含まれます。 indexOf戻り、それが配列

例使用してアラートの内側ない場合-1ある配列内のインデックス、：Fiddle

もう少し高度なユースケースは、URLの内部のオブジェクトを格納するだろうどこのことができます。オブジェクトに特定のメタデータと動作も割り当てます。例：Fiddle with objects

Answer 2

あなたはvideo要素にplayingイベントを聴くことができます。ここでそれを行う方法です：

document.getElementById('myVideo').addEventListener("playing", play_started, false); 

ビデオが開始されたときplay_startedメソッドが呼び出されます。その方法の中で、特定のビデオが再生されているかどうかを確認することができます。これが役立つことを願っています。

Answer 3

an update fiddleです。

アイデアは、ドロップダウンリストを追加することです：

const videoSources =[ 
 
'http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/rabbit320.webm', 
 
'http://media.w3.org/2010/05/sintel/trailer.mp4', 
 
'https://vtt.tumblr.com/tumblr_ok41s7Iebh1t4fjz0_480.mp4', 'https://vtt.tumblr.com/tumblr_ok44bpZZka1t4fjz0_480.mp4','http://media.w3.org/2010/05/bunny/trailer.mp4' 
 
]; 
 

 
const select = document.querySelector('select'); 
 

 
select.onchange = function() { 
 
videoPlay(parseInt(this.value)) 
 
}; 
 

 
videoSources.forEach(appendOption); 
 

 
function appendOption(url, index) { 
 
     const option = document.createElement("option"); 
 
     option.setAttribute("value", index); 
 
     option.innerHTML = url.substr(url.lastIndexOf('/')+1); 
 
     select.appendChild(option); 
 
} 
 

 

 

 
var i = 0; 
 
var videoCount = videoSources.length; 
 
document.getElementById("myVideo").setAttribute("src",videoSources[0]); 
 
videoPlay(0); 
 

 
function videoPlay(videoNum) 
 
{ 
 
document.getElementById("myVideo").setAttribute("src",videoSources[videoNum]); 
 
document.getElementById("myVideo").load(); 
 
document.getElementById("myVideo").play(); 
 
} 
 

 
    

<div> 
 
<select onchange="videoPlay(parseInt(this.value))"> 
 
    
 
</select> 
 
</div> 
 
<video class="myVideo" controls autoplay muted id="myVideo"> 
 
https://jsfiddle.net/nojava/5vo8cdbr/#run</video>