关于在触发点击事件时停止 youtube 视频的建议答案

【问题标题】：Advice on making a youtube video stop when a click event is fired关于在触发点击事件时停止 youtube 视频的建议
【发布时间】：2011-11-18 16:20:35
【问题描述】：

我已经设置了一些加载到 youtube 视频中的测试代码，然后在我计划停止视频的链接上设置了一个 jquery 点击事件，但是当我点击该链接时，我得到了错误：未捕获的类型错误：对象 [object Object] 没有方法 'stopVideo'

任何人都可以建议我在哪里可能会出错吗？

 <div id="container">
    <a href="#">This is the link</a>

    <br /><br />
    <br /><br />

    <div id="player"></div>
</div>


 <script>
        var tag = document.createElement('script');
        tag.src = "http://www.youtube.com/player_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

        // 3. This function creates an <iframe> (and YouTube player)
        //    after the API code downloads.
        var player;
        function onYouTubePlayerAPIReady() {
            player = new YT.Player('player', {
            height: '390',
            width: '640',
            videoId: 'u1zgFlCw8Aw'
            });
        }

        function onPlayerReady(event) {
            event.target.playVideo();
        }

        $(document).ready(function() {
            $('a').click(function(e) {
                player.stopVideo();
                e.preventDefault();
            });
        });
 </script>

【问题讨论】：

标签： javascript jquery youtube youtube-api

【解决方案1】：

您的代码 sn-p 在fiddle 中按预期工作。此外，由于 postMessage 实现的限制，YouTube Frame API 无法在 file:/// 协议下运行。

我之前创建了 YouTube API 的自定义实现，可在 YouTube iframe API: how do I control a iframe player that's already in the HTML? 获得。我已经在file:/// 协议下成功执行了stopVideo 方法。

如果您在线运行代码，我只能想到另一个原因：您试图在播放器准备好之前点击链接。要修复它，请合并您的函数：

    function onPlayerReady(event) {
        event.target.playVideo();
        $('a').click(function(e) { //<--- Binds event to ALL anchors! Are you sure?
            player.stopVideo();
            e.preventDefault();
        });
    });

【讨论】：