Javascript youtube视频结束时的事件

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/10773322/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 02:51:54  来源:igfitidea点击:

Event when youtube video finished

javascriptjavascript-eventsyoutubeyoutube-api

提问by ihorko

I have simple html code that plays youtube video after click on the image.

我有简单的 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>

I need hide the video and show image back, after video finished play. How is it possible to implement?

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

回答by wong2

Youtube has a JavaScript API: https://developers.google.com/youtube/js_api_reference

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

What you need is the onStateChangeevent, which will give you 0 when ended.

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

player.addEventListener("onStateChange", function(state){
    if(state === 0){
        // the video is end, do something here.
    }
});