將YouTube視頻綁定到單元JS文件中的div元素

Question

我有這個問題，將YouTube視頻嵌入到PhoneJS單頁移動應用程序中。在PhoneJS中，JS腳本是在不同的文件中定義的。所以我定義的HTML DIV是這樣的：在JS文件

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

現在，我這樣做：

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和響應收到，但它不顯示在視圖上。

確定自我使用KnockoutJS結合，我修改在div在這樣的HTML視圖：

<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​​調用？

編輯 只是想提一提的是，當我在下面添加視圖中的代碼，該視頻流沒有問題。

<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

我認爲這樣做最簡單的方法是使用自定義綁定處理程序與設置一個標誌從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> 

最後結合

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

---

編輯

要刪除窗口上的依賴，把你的腳本標籤，增加了新的腳本元素（如圖所示）tweek，修改自己的回調和使用的setTimeout代替「playerReady」 可觀察

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'); 
}; 

玩家綁定

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 
      }); 
     } 
    }