YouTube 视频结束时的事件

IT技术 javascript youtube youtube-api dom-events
2021-02-28 18:28:48

我有简单的 html 代码,可以在单击图像后播放 YouTube 视频:

<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 

<div id="ytapiplayer2" style="display:none;">
<object width="1280" height="745">
<param name="movie" value="http://www.youtube.com/v/kCfP003Btjw?fs=1&hl=en_US&rel=0&autoplay=1"></param>
<param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/kCfP003Btjw?fs=1&hl=en_US&rel=0&autoplay=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="1280" height="745"></embed>
</object>

</div>


<img src="https://i.qmyimage.com/mgen/global/zGetImageNew.ms?args=%22shpimg4198.jpg%22,425,96,1" id="imageID" />
<script type="text/javascript">
$('#imageID').click(function() {
$('#ytapiplayer2').show();
$('#imageID').hide();
});
</script>
</body>

视频播放完毕后,我需要隐藏视频并显示图像。怎么可能实现?

1个回答

Youtube 有一个 JavaScript API:https : //developers.google.com/youtube/js_api_reference

你需要的是onStateChange事件,它在结束时会给你 0。

player.addEventListener("onStateChange", function(state){
    if(state === 0){
        // the video is end, do something here.
    }
});
嗯,我在我的代码中添加了 player.addEventListener("onStateChange", function(state) { if (state === 0) { alert('end'); } }); 但事件不会发生!
2021-04-28 18:28:48
也许您必须更改嵌入视频的方式,请参阅此处的示例:developers.google.com/youtube/js_api_reference#Examples并记住加载 api 脚本
2021-04-29 18:28:48
状态是一个对象。您必须检查 state.data === 0 (我在 iframe url 中使用了 &enablejsapi=1&version=3)
2021-05-04 18:28:48
有谁知道这是否也可以在直播中进行?
2021-05-09 18:28:48
请注意,JavaScript API 现在已弃用;建议您使用 IFrame API:developers.google.com/youtube/iframe_api_reference,它具有类似的状态更改方法。
2021-05-15 18:28:48