Chromecast + Youtube嵌入+ HTML5視頻標記= bug

我一直試圖在Chromecast應用上播放兩個視頻（不一定同時）。其中一個是通過Youtube API嵌入的，另一個是通過標籤加載的標準HTML5視頻。Chromecast + Youtube嵌入+ HTML5視頻標記= bug

事實證明，Youtube視頻根本不會在Chromecast上播放，如果我也有我的HTML5網頁標準的標籤。但是，如果我刪除該視頻標籤，那麼Youtube視頻將很好地播放。

任何意見是高度讚賞！

來源

2014-08-28 Izaias

Chromecast只支持一個活動視頻流。

來源

2014-08-28 20:25:53

我遇到了同樣的問題。

的關鍵要素來解決它是，卸載投的球員，不要讓與SRC的DOM視頻標籤屬性縈繞在您嘗試播放YouTube設置。

至於YouTube上，別讓它包含了視頻播放器的IFRAME縈繞在DOM或者嘗試使用HTML5視頻標籤的時候。

在嘗試通過反向機制觸發回放之前，您需要拆除上一個播放器。

這是我用來解決問題和解決問題的示例接收器。這是一個工作示例。

<html> 
<head> 
    <title></title> 
    <style type="text/css"> 
    body { 
     background-color: #000; 
     overflow: hidden; 
    } 

    </style> 
</head> 
<body> 
    <script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.min.js"></script> 
    <script type="text/javascript" src="//www.gstatic.com/cast/sdk/libs/receiver/2.0.0/cast_receiver.js"></script> 
    <script type="text/javascript" src="//www.gstatic.com/cast/sdk/libs/mediaplayer/1.0.0/media_player.js"></script> 
    <video id="chromecast" style="width: 50%; height: 50%;"></video> 

    <script> 
    var ytCode = 'sSwLhYhYgI0' 
    var hlsUrl = 'http://host.com/playlist.m3u8' 
    </script> 


    <!-- Chromecast --> 
    <script type="text/javascript"> 
     var castReceiverManager = cast.receiver.CastReceiverManager.getInstance(); 
     var messageBus = castReceiverManager.getCastMessageBus('urn:x-cast:tv.domain'); 

     cast.receiver.logger.setLevelValue(cast.receiver.LoggerLevel.DEBUG); 
     cast.player.api.setLoggerLevel(cast.player.api.LoggerLevel.DEBUG); 


     castReceiverManager.onReady = function() { 
      console.info('[castReceiverManager.onReady]'); 
      castReceiverManager.setApplicationState('Ready'); 
     }; 

     castReceiverManager.onSenderConnected = function(sender) { 
      console.info('[castReceiverManager.onSenderConnected]', sender.userAgent); 
     }; 

     messageBus.onMessage = function(event) { 
      var message = JSON.parse(event.data); 
      console.info('[messageBus.onMessage]', message); 
     }; 

     // Normal 
     castReceiverManager.start({ 
      maxInactivity: 8, 
      statusText: 'Ready to play', 
      dialData: undefined 
     }); 

     window.playDirect = function(id) { 

      // Tear down any YT player 
      $('#youtube').remove(); 

      if(!id) id = 'chromecast'; 
      var mediaElement = document.getElementById(id); 
      window.host = new cast.player.api.Host({'mediaElement':mediaElement, 'url':hlsUrl}); 
      window.host.onError = function(errorCode) { 
       console.log('ERROR ' + errorCode); 
      }; 

      var protocol = cast.player.api.CreateHlsStreamingProtocol(window.host); 
      window.CCplayer = new cast.player.api.Player(window.host); 
      window.CCplayer.load(protocol, 25); 
      setTimeout(function() { 
       mediaElement.play(); 
      }, 1000); 
     }; 
    </script> 




    <!-- Youtube --> 
    <script> 
     window.onYouTubeIframeAPIReady = function() { 
      console.log('Initialized Youtube'); 
     }; 

     var playYT = function() { 

      // Tear down any direct player 
      if(window.CCplayer) { 
       window.CCplayer.unload(); 
      } 
      $('video').attr('src', ''); 


      // Inject div tag that will be converted to iframe with player 
      $('body').append('<div id="youtube" style="width: 50%; height: 50%;"></div>'); 

      window.YTPlayer = new YT.Player(
       'youtube', 
       { 
        height: '100%', 
        width: '100%', 
        playerVars: { 
         'autoplay': 0, 
         'controls': 0, 
         'cc_load_policy': 0, 
         'fs': 0, 
         'iv_load_policy': 0, 
         'modestbranding': 0, 
         'rel': 0, 
         'showinfo': 0, 
         'enablejsapi': 1 
        }, 
        events: { 
        'onReady': function() { 
         var params = { videoId: ytCode, startSeconds: 170 }; 
         window.YTPlayer.cueVideoById(params); 
         window.YTPlayer.playVideo(); 
        }, 
        'onError': function(err) { 
         console.log('YT Error ' + err); 
        } 
       } 
      }); 
     }; 


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

</body> 
</html>

測試：

負載了上面的示例接收器，並且交替鉻調試控制檯內執行以下操作：

playDirect()

或

playYT()

來源

2015-12-23 01:52:08 rlittrell

Chromecast + Youtube嵌入+ HTML5視頻標記= bug

回答

相關問題