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

回答

相关问题