如何生成警報時，YouTube視頻結束（無自動播放）

我使用的Youtube API爲了使用下面的例子生成一個視頻：如何生成警報時，YouTube視頻結束（無自動播放）

HTML：

<div id="player"></div>

的Javascript：

<script src="http://www.youtube.com/player_api"></script> 

<script> 

    // create youtube player 
    var player; 
    function onYouTubePlayerAPIReady() { 
     player = new YT.Player('player', { 
      height: '390', 
      width: '640', 
      videoId: '0Bmhjf0rKe8', 
      events: { 
      onReady: onPlayerReady, 
      onStateChange: onPlayerStateChange 
      } 
     }); 
    } 

    // autoplay video 
    function onPlayerReady(event) { 
    } 

    // when video ends 
    function onPlayerStateChange(event) {   
     if(event.data === 0) {   
      alert('done'); 
     } 
    } 

</script>

這個代碼是基於以下問題：

How to detect when a youtube video finishes playing?

唯一的區別是我刪除了「onPlayerReady」函數，因爲我不希望自動播放此視頻。所以，我想這個視頻使用使用下面的JavaScript外部鏈接播放：

$(document).ready(function() { 

    $('#play-video').on('click', function(ev) { 

    $("#player")[0].src += "&autoplay=1"; 
    ev.preventDefault(); 

    }); 

});

而下面的HTML代碼：

<a id="play-video" href="#">Play Video</a>

在執行時，點擊該鏈接時，視頻播放。但是，在視頻結束時，應該彈出警報，通知視頻已結束。

僅當視頻從視頻中心的默認Youtube播放按鈕播放時，纔會顯示該提示。但是，如果通過「播放視頻」鏈接進行播放，則不會顯示警報。

任何想法，我可能會失蹤？

謝謝！

來源

2017-04-25 Johann

檢查我的答案，這將有助於 – Samarth

要檢查視頻是否已完成播放，請執行此操作。

player.addEventListener("onStateChange", function(state){ 
    if(state === 0){ 
     // video has finished playing 
    } 
});

來源

2017-04-25 03:15:56 athi

嗨@athimohan。感謝您的快速回復。我不知道我應該在哪裏添加此代碼。 Youtube API已經有一個onPlayerStateChange函數。 – Johann

嘿，你可以做的是你播放視頻鏈接調用播放器的內置API playVideo()方法。請參閱Youtube API guide。

我改變了你的播放視頻鏈接點擊監聽這個，它給我預期的結果，你會需要。

$('#play-video').on('click', function(ev) { 
     if(player){ 
      player.playVideo(); 
     } 
     ev.preventDefault(); 
});

請爲同一https://codepen.io/samarthsinha/pen/ZKBBqM

來源

2017-04-25 04:05:27 Samarth

找到演示試試這個。

$(document).ready(function() { 
    $('#play-video').on('click', function(ev) { 
    $("#player")[0].src += "&autoplay=1"; 
    onYouTubePlayerAPIReady(); 
    ev.preventDefault(); 
    }); 
});

來源

2017-04-25 04:30:33

如何生成警報時，YouTube視頻結束（無自動播放）

回答

相關問題