加载youtube视频和听onPlayerStateChange [英] Load youtube video & listen to onPlayerStateChange

问题描述

点击链接后，我正在尝试播放youtube视频，并在播放完成后将其替换为图像. 上半场很轻松.但是我在下半场遇到了麻烦. 最初，我只是简单地添加了iframe嵌入.但是，为了收听ENDED事件，我尝试遵循youtube dev文档.现在，我似乎什么也做不了. 请查阅. 到目前为止，这就是我所拥有的.

On clicking a link, I'm trying to play a youtube video and replace that video with an image when it's done playing. The first half was easy. However I'm running into trouble with the second half. Originally I simply appended an iframe embed. However to listen to the ENDED event, I tried to follow the youtube dev documentation. Now, I cant seem to do anything. Please review. This is what I have thus far.

 var t1 = '<div id="tubewrapper"><div id="player"></div></div>'


$("#link").click( function()
           {

             $(".trailers-band").append(t1);


    var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
             var player;
               function onYouTubeIframeAPIReady(){
                   player = new YT.Player('player',{
                       height:'100%',
                       width:'100%',
                       videoId:tubeID,
                       events:{
                           'onReady': onPlayerReady,
                           'onStateChange': onPlayerStateChange
                       }
                   });
               }
            function onPlayerReady(event){
                alert("ready");
                event.target.playVideo();
            }

             var done = false;

             function onPlayerStateChange(event){
                 if (event.data == YT.PlayerState.ENDED && !done){
                     done = true;
                     alert("done");

                 }

             }

           }
        );

推荐答案

以下是如何播放视频，检测视频结束时间以及在其位置显示图像的示例.

Here is an example of how to play a video, detect when it ends, then display an image in its place.

示例: jsFiddle

<div id="player" style="display:none;"></div>
<a href="#" id="link">play</a>
<script>
// Load API asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        height: '390',
        width: '640',
        videoId: '9vHFsXOdTt0',
        events: {'onStateChange': onPlayerStateChange}
    }); // create the <iframe> (and YouTube player)
}

function onPlayerStateChange(event) {    
    if(event.data === 0) {          
        hideVideo();
    }
}

function hideVideo() {
    var img_url = 'https://www.google.com/images/srpr/logo4w.png';
    $('#player').replaceWith('<img src="'+img_url+'">');
}

$("#link").click(function(){
    $('#player').show(); // show player
    player.playVideo(); // begin playback
});
</script>

这篇关于加载youtube视频和听onPlayerStateChange的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！