結束動態功能動態創建的視頻標籤

Question

我有一個按鈕，創建一個視頻標籤：

$("#btn").click(function() { 
    var video = $('<video />', { 
    id: 'myVid', 
    src: "vid1.mp4", 
    type: 'video/mp4', 
    controls: false 
    }); 
    $('body').append(video); 
    var btn = $('<button id="btnPP">Play Video</button>'); 
    $('body').append(btn); 
}); 
$(document).on('ended', "#myVid", function() { 
    alert("fini"); 
}); 

我的代碼看起來還好，但是當影片結束後，它不會執行任何代碼裏面的ended功能。

Answer 1

問題是視頻在頁面上不存在，即使在.ready()。因此，您將無法以$(document).on()爲目標，即使冒泡。相反，您需要添加event listener。我在ended事件中添加了事件偵聽器，並確保目標是以下示例中的視頻。我還添加了一個autoplay表明視頻將觸發一次結束活動：

$("#btn").click(function() { 
 
    var video = $('<video />', { 
 
    id: 'myVid', 
 
    src: "https://www.w3schools.com/html/mov_bbb.mp4", 
 
    type: 'video/mp4', 
 
    controls: false, 
 
    autoplay: true 
 
    }); 
 
    $('body').append(video); 
 
    var btn = $('<button id="btnPP">Play Video</button>'); 
 
    $('body').append(btn); 
 
}); 
 

 
document.addEventListener('ended', function(e){ 
 
    if($(e.target).is('video')){ 
 
     alert('fini'); 
 
    } 
 
}, true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button id="btn">Test</button>

希望這有助於！ :)