Sat*_*u P 7 javascript html5 html5-video chromecast
我已经使用js和html5设计了具有一些自定义功能的html5播放器，现在我需要在html5播放器上添加chrome cast选项，例如 https://raw.githubusercontent.com/kim-company/videojs-chromecast/master/screenshots/chromecast -player.jpg
下面是设计的html5播放器的链接 https://player14123141.herokuapp.com/
谢谢你的帮助。
我知道这已经很旧了，但我想将其放在这里，供仍在寻找如何实现这一点的人们使用，这非常简单。
请注意，您必须在实时服务器上才能使 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 Images教程视频的链接，以防您无法自己实现它https://www.youtube.com/watch?v=v6qrqtSGkeQ 我希望这对很多人有帮助。
您可以通过实现以下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