I have designed an html5 player with some custom functionalities using js and html5,now i need to add chrome cast option on html5 player like https://raw.githubusercontent.com/kim-company/videojs-chromecast/master/screenshots/chromecast-player.jpg
The below is the link for designed html5 player https://player14123141.herokuapp.com/
Thanks for your help.
You can reuse your HTML5 player by implementing the following Google Cast Receiver interface: https://developers.google.com/cast/docs/reference/receiver/cast.receiver.media.Player
You then specify your interface implementation as the media element for the MediaManager: https://developers.google.com/cast/docs/reference/receiver/cast.receiver.MediaManager
I know this is old but I want to lay this down here for people still looking for how to make this possible it's quite simple.
Please note you must be on a live server to make Chromecast work it won't work on a localhost server
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>The Link to download the file is: https://drive.google.com/file/d/1J6J6suU7H4CUpMMnZOXfRQVQkeTl44j7/view?usp=sharing
This is a link to Chromecast Images the tutorial video in case you can't implement it yourselves https://www.youtube.com/watch?v=v6qrqtSGkeQ I hope this helps a lot of people.
