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 .jpg

The below is the link for designed html5 player /

Thanks for your help.

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.

• javascript
• html
• html5-video
• chromecast

• look here - github.com/kim-company/videojs-chromecast – Jaromanda X Commented Aug 11, 2015 at 9:03
• 1 Thank for it,but i'am completely done it on custom js and html5 and not used videojs so this plugin may not be supported . – Sathibabu P Commented Aug 11, 2015 at 9:10
• well, the code should at least tell you how it's done, nobody here is going to write it for you, and if videojs does the thing you want to do, either use it, or copy it's functionality – Jaromanda X Commented Aug 11, 2015 at 9:12
• 1 checkout: developers.google.com/cast/docs/chrome_sender Could this maybe help you? – Smudoo Commented Aug 11, 2015 at 9:24

2 Answers 2

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.

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