<!--Load skin, videojs, nuevo and chromecast related plugins-->
<link href="../skins/nuevo/videojs.min.css" rel="stylesheet" type="text/css" />
<script src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>
<script src="../video.min.js"></script>
<script src="../nuevo.min.js"></script>
<script src="../plugins/videojs-chromecast.min.js"></script>
<!--Video tag setup-->
<video id="player_one" class="video-js vjs-fluid vjs-default-skin" controls preload playsinline poster="../examples/assets/images/poster.jpg">
<source src="//opencdn.b-cdn.net/video/demo_720.mp4" type="video/mp4">
<source src="//opencdn.b-cdn.net/video/demo_720.webm" type="video/webm">
</video>
<!--Initialize the player and plugin-->
<script>
var player = videojs('player_1)';
player.nuevo({
//option_name: option_value, option_name: value
});
player.chromecast();
</script>
By default chromecast button appears in top-left corner of the player if only chromecast device detected.
You can also decide to show chromecast icon in control bar instead of player's top-left corner.
player.chromecast({ button: "controlbar" });
Chromecast plugin allows to define separate title and description that appears on TV.
There are few more advanced options, like fixed player while casting and video ads playback, described on this demo.
The usage of Chromecast subtitles has been explained in detail on another demo by Nuevodevel.com.
Requirements and limitations:
Chromecast Plugin works fine with browsers that supports Chromecast (desktop Chrome, Edge, Opera, Chrome on Android). Chromecast plugin also works on desktop Edge Chromium browser if you enable specific Edge extension "Load Media Router".
Google does not support non-secure origins (HTTP) with Chromecast.
Media file URL must be absolute path with https protocol.
For adaptive media streaming, Google Cast requires the presence of CORS headers, but even simple mp4 media streams require CORS if they include Tracks. Read more on https://developers.google.com/cast/docs/chrome_sender/advanced#cors_requirements. CORS headers is also required if media files are located on other than production server.