加载YouTube视频并收听onPlayerStateChange

本文介绍了加载YouTube视频并收听onPlayerStateChange的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

点击链接后，我正在尝试播放YouTube视频，并在播放完成后将其替换为图像.

On clicking a link, I'm trying to play a YouTube video and replace that video with an image when it's done playing.

上半场很轻松.但是我在下半场遇到了麻烦.最初，我只是简单地添加了 iframe 嵌入.但是，为了听 ENDED 事件，我尝试遵循YouTube开发人员文档.现在，我似乎什么也做不了.请查阅.到目前为止，这就是我所拥有的.

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 = "www.youtube/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 = "www.youtube/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 = 'www.google/images/srpr/logo4w.png'; $('#player').replaceWith('<img src="'+img_url+'">'); } $("#link").click(function(){ $('#player').show(); // show player player.playVideo(); // begin playback }); </script>