在第一個視頻結束後更改視頻源

我的設計中有兩個視頻文件。第一個是標誌揭示動畫，第二個是標誌動畫。我只想在每次加載頁面時加載第一個視頻。我想在第一個視頻結束後加載第二個視頻。在第一個視頻結束後更改視頻源

這裏我的目標是：第一個視頻在頁面加載時播放（只有一次 - 每頁加載）。如果第一個視頻結束，第二個視頻將在循環中播放。我不想一次又一次顯示徽標（第1次）。這個怎麼做。希望我會得到解決方案。

這裏是我的代碼。

HTML：

<video width="400" controls id="myVideo" autoplay> 
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> 
    <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg"> 
    Your browser does not support HTML5 video. 
</video>

document.getElementById('myVideo').addEventListener('ended',myHandler,false); 
    function myHandler(e) { 
     alert(); 
     var videoFile = 'https://static.videezy.com/system/resources/previews/000/002/165/original/Black-cat-in-green-grass.mp4'; 
     $(' #myVideo source').attr('src', videoFile); 
     $("#myVideo")[0].load(); 
    }

演示：https://jsfiddle.net/jLa1s62w/

來源

2016-09-28 Sharavnan Kv

你的小提琴是空的？ –

請修復您的jsfiddle鏈接。 – yuriy636

對不起。忘了保存:) ..現在它完成:) –

你幾乎得到了它。

document.getElementById('myVideo').addEventListener('ended', myHandler, false); 

function myHandler(e) { 
    alert(); 
    var videoFile = 'https://static.videezy.com/system/resources/previews/000/002/165/original/Black-cat-in-green-grass.mp4'; 
    $(' #myVideo source').attr('src', videoFile); 
    $('#myVideo').attr("loop", true); /* 1 */ 
    $("#myVideo")[0].load(); 
    document.getElementById('myVideo').removeEventListener('ended', myHandler, false) /* 2 */ 
}

1）循環屬性，所以第二個視頻循環。

2）刪除事件監聽器，這樣視頻就不會再被替換。

https://jsfiddle.net/yuriy636/jLa1s62w/1/

注：如果您使用jQuery，你也可以使用jQuery的事件方法： $('#myVideo').on('ended',myHandler)和$('#myVideo').off('ended',myHandler)

來源

2016-09-28 11:06:20 yuriy636

亞:)感謝哥們:) <3 –

有跳，如果它改變爲第二....我怎麼能解決這個問題？ –

在第一個視頻結束後更改視頻源

回答

相關問題