如何实现对 html5 播放器的 chromecast 支持答案

【问题标题】：How to implement chromecast support for html5 player如何实现对 html5 播放器的 chromecast 支持
【发布时间】：2015-11-03 09:54:40
【问题描述】：

我已经使用 js 和 html5 设计了一个具有一些自定义功能的 html5 播放器，现在我需要在 html5 播放器上添加 chrome cast 选项，例如 https://raw.githubusercontent.com/kim-company/videojs-chromecast/master/screenshots/chromecast-player.jpg

以下是设计的html5播放器的链接 https://player14123141.herokuapp.com/

感谢您的帮助。

【问题讨论】：

看这里 - github.com/kim-company/videojs-chromecast
谢谢，但我完全在自定义 js 和 html5 上完成了，没有使用 videojs，所以这个插件可能不被支持。
好吧，代码至少应该告诉你它是如何完成的，这里没有人会为你编写它，如果 videojs 做了你想做的事情，要么使用它，要么复制它的功能
结帐：developers.google.com/cast/docs/chrome_sender 这可能对您有帮助吗？

标签： javascript html html5-video chromecast

【解决方案1】：

您可以通过实现以下 Google Cast Receiver 接口重复使用您的 HTML5 播放器：https://developers.google.com/cast/docs/reference/receiver/cast.receiver.media.Player

然后您将接口实现指定为 MediaManager 的媒体元素：https://developers.google.com/cast/docs/reference/receiver/cast.receiver.MediaManager

【讨论】：

在使用 HTML/JS 前端时如何实现？

【解决方案2】：

我知道这已经过时了，但我想把它放在这里，以供仍在寻找如何使这成为可能的人们非常简单。

请注意，您必须在实时服务器上才能使 Chromecast 工作，它不能在本地服务器上工作

 var session = null;

$( document ).ready(function(){
        var loadCastInterval = setInterval(function(){
                if (chrome.cast.isAvailable) {
                        console.log('Cast has loaded.');
                        clearInterval(loadCastInterval);
                        initializeCastApi();
                } else {
                        console.log('Unavailable');
                }
        }, 1000);
});

function initializeCastApi() {
        var applicationID = chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID;
        var sessionRequest = new chrome.cast.SessionRequest(applicationID);
        var apiConfig = new chrome.cast.ApiConfig(sessionRequest,
                sessionListener,
                receiverListener);
        chrome.cast.initialize(apiConfig, onInitSuccess, onInitError);
};

function sessionListener(e) {
        session = e;
        console.log('New session');
        if (session.media.length != 0) {
                console.log('Found ' + session.media.length + ' sessions.');
        }
}
 
function receiverListener(e) {
        if( e === 'available' ) {
                console.log("Chromecast was found on the network.");
        }
        else {
                console.log("There are no Chromecasts available.");
        }
}

function onInitSuccess() {
        console.log("Initialization succeeded");
}

function onInitError() {
        console.log("Initialization failed");
}

$('#castme').click(function(){
        launchApp();
});

function launchApp() {
        console.log("Launching the Chromecast App...");
        chrome.cast.requestSession(onRequestSessionSuccess, onLaunchError);
}

function onRequestSessionSuccess(e) {
        console.log("Successfully created session: " + e.sessionId);
        session = e;
}

function onLaunchError() {
        console.log("Error connecting to the Chromecast.");
}

function onRequestSessionSuccess(e) {
        console.log("Successfully created session: " + e.sessionId);
        session = e;
        loadMedia();
}

function loadMedia() {
        if (!session) {
                console.log("No session.");
                return;
        }
        
        var videoSrc = document.getElementById("myVideo").src;
        var mediaInfo = new chrome.cast.media.MediaInfo(videoSrc);
        mediaInfo.contentType = 'video/mp4';
  
        var request = new chrome.cast.media.LoadRequest(mediaInfo);
        request.autoplay = true;

        session.loadMedia(request, onLoadSuccess, onLoadError);
}

function onLoadSuccess() {
        console.log('Successfully loaded video.');
}

function onLoadError() {
        console.log('Failed to load video.');
}

$('#stop').click(function(){
        stopApp();
});

function stopApp() {
        session.stop(onStopAppSuccess, onStopAppError);
}

function onStopAppSuccess() {
        console.log('Successfully stopped app.');
}

function onStopAppError() {
        console.log('Error stopping app.');
}

<!DOCTYPE html>
<html>
<head>
        <title>Chromecast</title>
        <script type="text/javascript" src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js"></script>
        <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
</head>
<body>

<video id="myVideo" width="320" height="240" controls src="https://www.rmp-streaming.com/media/big-buck-bunny-360p.mp4
">
  Your browser does not support the video tag.
</video>
<p>Click to chromecast video</p>
        <form>
                <button type="button" id="castme">Click To Cast</button>
        </form>
        <script type="text/javascript" src="script.js"></script>
</body>
</html>

下载文件的链接是： https://drive.google.com/file/d/1J6J6suU7H4CUpMMnZOXfRQVQkeTl44j7/view?usp=sharing

这是一个指向 Chromecast 图片 教程视频的链接，以防您自己无法实现它https://www.youtube.com/watch?v=v6qrqtSGkeQ 我希望这可以帮助很多人。

【讨论】：

您提供的链接无法访问。请在嵌入式代码sn-p工具中插入代码。
抱歉，这里是可访问的链接希望它有帮助：drive.google.com/file/d/1J6J6suU7H4CUpMMnZOXfRQVQkeTl44j7/…
请编辑您的帖子。我不是想了解问题/解决方案。我的任务是帮助您改进答案。
>>>希望对您有所帮助：[ 是的，我也希望如此，但它就是行不通。我希望这很容易。 ]
@Dave 如果您不知道怎么做，请尝试观看教程youtu.be/v6qrqtSGkeQ