如何更改點擊html5視頻源？

我想要做的是創建一個播放列表，只使用html5和香草javascript（沒有jquery）。同一個短視頻不斷循環，直到您點擊其中一個箭頭，然後下一個（或前一個）行中的視頻纔會加載到同一個視頻元素中。如何更改點擊html5視頻源？

這是我有：

HTML

<video autoplay="true" loop="true" id="video"> 
    <source src="img-vid/video1.mp4" type="video/mp4" id="vid-src"> 
</video> 
<img src="img-vid/Arrow_left.png" class="arrow arrow-left" id="left"> 
<img src="img-vid/Arrow_right.png" class="arrow arrow-right" id="right">

的Javascript

var button_next = document.getElementById("right"); 
var button_previous = document.getElementById("left"); 
var playlist = document.getElementById("video"); 
var source = document.getElementById("vid-src"); 

button_next.onclick = play_next; 
button_previous.onclick = play_prev; 

function play_next() { 
    var filename = ''; 
    if (source.src == "img-vid/video1.mp4"){ 
     filename = "video2"; 
    } 
    else if (source.src == "img-vid/video2.mp4"){ 
     filename = "video3"; 
    } 
    else if (source.src == "img-vid/video3.mp4"){ 
     filename = "video4"; 
    } 
    else { 
     filename = "video1"; 
    } 
    source.src = "img-vid/" + filename + ".mp4"; 
    playlist.load(); 
    playlist.play(); 
} 

//same for function play_prev(), but order of videos is reversed

然而，與此代碼，則單擊箭頭似乎既沒有做任何事情。我不知道我在做什麼錯誤。我的第一個想法是，如果測試失敗，所以它只是重新加載相同的視頻，但即使刪除了測試並將文件名設置爲「video2」，它也沒有做任何事情。

編輯1：變種文件名更改範圍，如開發-One的建議。視頻源仍然不會改變。

編輯2：改變以下內容：

button_next.onclick = play_next; 
button_previous.onclick = play_prev;

到

button_next.addEventListener("click", play_next); 
button_previous.addEventListener("click", play_prev);

似乎幫助。現在點擊箭頭時，視頻會改變，但不會改變到正確的。按下右箭頭總是顯示video1，而按左箭頭總是顯示video3。這些是每種方法的最後一個else語句中的視頻，所以我的if-tests似乎仍然存在問題。

編輯3：一切現在正在按計劃進行！我也不得不改變

source.src == ...

到

source.getAttribute("src") == ...

我如果測試。 source.src總是返回完整的URL（http://..../img-vid/video1.mp4），而不是相對一個（IMG-VID/video1.mp4），所以每次如果測試失敗。

來源

2016-05-28 Venser

正如我所做的編輯所說，我設法通過改變button.onclick到button.addEventListener（）和改變source.src解決我的問題至source.getAttribute（「src」）。

來源

2016-05-28 14:56:03 Venser

通過觀察代碼，一個錯誤，我能找到的是var filename使用超出範圍。

將其更改爲：

function play_next() { 

    var filename = ''; 

    if (source.src == "img-vid/video1.mp4"){ 
     filename = "video2"; 
    } 
    else if (source.src == "img-vid/video2.mp4"){ 
     filename = "video3"; 
    } 
    else if (source.src == "img-vid/video3.mp4"){ 
     filename = "video4"; 
    } 
    else { 
     filename = "video1"; 
    } 
    source.src = "img-vid/" + filename + ".mp4"; 
    playlist.load(); 
    playlist.play(); 
}

來源

2016-05-28 13:35:27 Sajal

如何更改點擊html5視頻源？

回答

相關問題