Question

我使用js和html5设计了一个带有一些自定义功能的html5播放器，现在我需要在html5播放器上添加chrome cast选项 https://player14123141.herokuapp.com/

以下是设计的html5播放器的链接 http://neo4j.com/docs/stable/server-plugins.html

感谢您的帮助。

Answer 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

Answer 2

我知道这很老了，但是我想把它放在这里，供那些仍在寻找使之成为可能的人们非常简单。

我已经编辑了这个答案，以使人们更好地理解这一点。

enter code he

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 mediaInfo = new
chrome.cast.media.MediaInfo('http://i.imgur.com/IFD14.jpg');
        mediaInfo.contentType = 'image/jpg';
  
        var request = new chrome.cast.media.LoadRequest(mediaInfo);
        request.autoplay = true;

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

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

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

$('#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>
        <form>
                <button type="button" id="castme">Click To Cast</button>
        </form>
        <script type="text/javascript" src="script.js"></script>
</body>
</html>

re

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

请注意，您必须使用此确切的代码才能使其正常运行，并且您的项目必须在服务器上，无论是本地主机还是托管计划。您需要更改的唯一代码是媒体信息，因为现在它是一只小猫的照片，是的，我爱小猫:)。如果您无法自己实施https://www.youtube.com/watch?v=v6qrqtSGkeQ，这是教程视频的链接我希望这对很多人有帮助。

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

2 个答案: