javascript - 从单独的 JS 文件将 YouTube 视频绑定(bind)到 Div 元素

Question

我在 PhoneJS 单页移动应用程序中嵌入 YouTube 视频时遇到了这个问题。在 PhoneJS 中，JS 脚本定义在不同的文件中。所以我像这样定义了 HTML div:

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

现在在 JS 文件中，我这样做了:

function getVideo() {        
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var playerDiv = document.getElementById('player');
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    var player;
    function onYouTubeIframeAPIReady() {
        player = new YT.Player(playerDiv, {
            height: '250',
            width: '444',
            videoId: sIFYPQjYhv8               
        });
    }        
}

当我运行并查看调试器时，会调用 Youtube 并收到响应，但它不会显示在 View 上。

好的，因为我使用的是 KnockoutJS 绑定(bind)，所以我修改了 html View 中的 div，如下所示:

<iframe id="player" type="text/html" width="444" height="250" frameborder="0" data-bind="attr: { src: src }"></iframe>

然后传入 src 视频 ID:

src: ko.observable('http://www.youtube.com/embed/' + sIFYPQjYhv8 + '?autoplay=1')

然而，在这种情况下，在调试器中，甚至不会对 Youtube 进行调用。什么都没有发生。实际上我更喜欢使用 API 调用而不是第二种方法。

关于如何使第一种方法起作用的任何建议？我的意思是使用 API 调用？

编辑
只想提一下，当我在 View 中添加下面的代码时，视频就可以流式传输了。

<h1>Video</h1>
        <div id="player"></div>
        <script>
            var tag = document.createElement('script');
            tag.src = "https://www.youtube.com/iframe_api";
            var playerDiv = document.getElementById('player');
            var firstScriptTag = document.getElementsByTagName('script')[0];
            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

            var player;
            function onYouTubeIframeAPIReady() {
                player = new YT.Player(playerDiv, {
                    height: '250',
                    width: '444',
                    videoId: 'sIFYPQjYhv8'
                });
            }
        </script>

Answer 1

我认为最简单的方法是使用自定义绑定(bind)处理程序和从 onYouTubeIFrameAPIReady 回调中设置的标志

Sample jsFiddle

ko.bindingHandlers['player'] = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        // Check if global script and function is declared.
        if ( !document.getElementById('playerScript') ) {
            // Create script
            var tag = document.createElement('script');
            tag.src = "https://www.youtube.com/iframe_api";
            var playerDiv = document.getElementById('player');
            var firstScriptTag = document.getElementsByTagName('script')[0];
            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

            // Create global function that their API calls back
            window.playerReady = ko.observable(false);
            window.onYouTubeIframeAPIReady = function() {
                window.playerReady(true);
            };
        }
    },
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {

        var value = valueAccessor(),
            id = value.id(),
            height = ko.unwrap(value.height) || '250',
            width = ko.unwrap(value.width) || '444'
        ;

        if ( !value.id()) {
            return;
        }

        if ( !window.playerReady() ) {
            // YT hasn't invoked global callback.  Subscribe to update
            var subscription;
            subscription = window.playerReady.subscribe( function(newValue) {
                 if ( newValue ) {
                     subscription.dispose();
                     // Just get this binding to fire again
                     value.id.notifySubscribers(value.id());
                 }
            });
        } else {

            var player = new YT.Player( element, {
                height: height,
                width: width,
                videoId: id 
            });
        }
    },
}

现在将您的播放器 div 更改为

<div data-bind="player: { id: id, height: height, width: width }"></div>

最后绑定(bind)

var vm = { 
    id: 'sIFYPQjYhv8',
    height: '250',
    width: '444'
};
ko.applyBindings( vm )

编辑

要消除对窗口的依赖，请将添加新脚本元素的脚本标签放回去，如下所示的 tweek，修改它们的回调并使用 setTimeout 而不是“playerReady” observable

HTML 脚本

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
tag.setAttribute('id', 'playerScript');
tag.setAttribute('data-ready', 'false');
...

function onYouTubeIframeAPIReady = function() {
    document.getElementById('playerScript').setAttribute('data-ready', 'true');
};

玩家绑定(bind)

    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {

        var value = valueAccessor(),
            id = value.id(),
            height = ko.unwrap(value.height) || '250',
            width = ko.unwrap(value.width) || '444',
            playerScript = document.getElementById('playerScript')
        ;

        if ( !value.id()) {
            return;
        }

        if ( !playerScript || playerScript.getAttribute('data-ready') !== 'true' ) ) {
            // YT hasn't invoked global callback.  
            setTimeout( function() {
                 value.id.notifySubscribers(value.id());
            }, 50);
        } else {

            var player = new YT.Player( element, {
                height: height,
                width: width,
                videoId: id 
            });
        }
    }