html - 检查嵌入式YouTube视频是否已经开始

Question

我有一个用于嵌入式YouTube视频的脚本。

这是我的剧本

<object width="500" height="375">
    <param name="movie" 
               value="http://www.youtube.com/v/mLDTfRDM_LE?version=3&autohide=1&showinfo=0&enablejsapi=1">
        </param>
    <param name="allowScriptAccess" value="always">
        </param>
    <embed src="http://www.youtube.com/v/mLDTfRDM_LE?version=3&autohide=1&autoplay=1&showinfo=0&rel=0&enablejsapi=1" 
               type="application/x-shockwave-flash" 
               allowscriptaccess="always" 
               width="500" height="375">
        </embed> 
        </object>

现在，我要检查视频是否已经开始播放，并基于此我要提醒:

"Hii video has started"

有一个类似此问题的链接:https://stackoverflow.com/questions/16215658/checking-whether-an-embedded-youtube-video-has-started

但是我有一个不同的脚本。

Answer 1

一般想法是这样的:

1)您需要在<embed>元素上放置一个id属性-这将允许您收听播放器事件。下一步将需要它。本示例假定嵌入ID为“myPlayer”

2)在关闭正文之前，将此脚本包括在您的页面中:

<script>
function onYouTubePlayerReady(playerId) {
        ytplayer = document.getElementById("myPlayer");
        ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
}

function onytplayerStateChange(newState) {
        if (newState=="1") {
                alert("Hii video has started");
        }
}
</script>

加载播放器并准备就绪时，onYouTubePlayerReady函数将自动运行；此脚本将在那时设置一个侦听器，并且如果它听到状态更改事件告诉您正在播放视频，它将执行所需的警报。

注意一些非常重要的事情。此方法在IE上通常是不一致的-您可以将其作为属性附加到object元素:

classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

但是，更好的解决方案是不使用静态嵌入代码，而使用SWFObject。请遵循以下文档:https://developers.google.com/youtube/js_api_reference#Examples

如果使用jQuery，另一种可能性是tubePlayer插件:http://www.tikku.com/jquery-youtube-tubeplayer-plugin

当然，我最大的建议是完全不要使用嵌入的AS3，而应使用iFrame:https://developers.google.com/youtube/iframe_api_reference