Tenho tentado reproduzir dois vídeos (não necessariamente simultaneamente) em um aplicativo Chromecast. Um deles é incorporado por meio da API do YouTube e o outro é um vídeo HTML5 padrão carregado por meio da tag.
Acontece que o vídeo do Youtube simplesmente nãoser reproduzido no Chromecast se eu também tiver uma tag padrão na minha página HTML5. Mas se eu remover essa tag de vídeo, o vídeo do Youtube será reproduzido perfeitamente.
Qualquer conselho é altamente apreciado!
Respostas:
1 para resposta № 1Apenas um stream de vídeo ativo é compatível com o Chromecast.
0 para resposta № 2
Corri para este mesmo problema.
Os principais elementos para resolver isso são: descarregue o player de elenco e não deixe uma tag de vídeo permanecer no DOM com um atributo SRC definido quando você tentar reproduzir o Youtube.
Quanto ao YouTube, não deixe o IFRAME que contém seu player de vídeo permanecer no DOM ao tentar usar a tag de vídeo HTML5.
Você precisará derrubar o jogador anterior antes de tentar acionar a reprodução por meio do mecanismo oposto.
Aqui está meu receptor de amostra que usei para localizar e resolver o problema. Este é um exemplo prático.
<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>
Teste:
Carregue o receptor de amostra acima e alterne o seguinte dentro do console de depuração do Chrome:
playDirect()
ou
playYT()