Cast.js

Getting Started

<!-- Including the cast_sender.js is optional, this is auto loaded by cast.js -->
<!-- <script src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/castjs/7.0.0/cast.min.js"></script>

// Initialize castjs
const cjs = new Castjs();

// optional parameters
const cjs = new Castjs({
  joinpolicy: 'tab_and_origin_scoped', // default
                                       // 'tab_and_origin_scoped' | 'origin_scoped' | 'page_scoped'
  receiver: 'CC1AD845',                // default media receiver (optional)
  debug: true                          // enable debug logs (optional)
});

cjs.on('available', () => {
  // Ready to cast
});

Methods

cjs.cast(src, metadata)     // Start casting a media file
cjs.play()                  // Resume playback
cjs.pause()                 // Pause playback
cjs.disconnect()            // End the current session

cjs.time()                  // Get current time in seconds
cjs.time(120)               // Seek to 2 minutes
cjs.time(true)              // Get formatted time ("02:00")

cjs.duration()              // Get duration in seconds
cjs.duration(true)          // Get formatted duration

cjs.volume()                // Get volume (0 → 1)
cjs.volume(0.5)             // Set volume

cjs.muted()                 // Get mute state
cjs.muted(true)             // Mute
cjs.muted(false)            // Unmute

cjs.subtitle(0)             // Activate subtitle by index

Events

cjs.on('available',      () => {})    // Cast framework is ready
cjs.on('connect',        () => {})    // Connected to a device
cjs.on('disconnect',     () => {})    // Session ended

cjs.on('statechange',    () => {})    // Player state changed
cjs.on('playing',        () => {})    // Media started playing
cjs.on('pause',          () => {})    // Media paused
cjs.on('buffering',      () => {})    // Buffering
cjs.on('end',            () => {})    // Media finished

cjs.on('timeupdate',     () => {})    // Current time updated
cjs.on('volumechange',   () => {})    // Volume changed
cjs.on('mute',           () => {})    // Muted
cjs.on('unmute',         () => {})    // Unmuted
cjs.on('subtitlechange', () => {})    // Active subtitle changed

cjs.on('error',          (err) => {}) // An error occurred

Getters

cjs.available()      // boolean  – is Cast framework available
cjs.connected()      // boolean  – is connected to a Cast device
cjs.device()         // string   – name of the connected device
cjs.state()          // string   – current player state
cjs.paused()         // boolean  – is the media paused

cjs.src()            // string   – current media URL
cjs.title()          // string   – media title
cjs.description()    // string   – media description
cjs.poster()         // string   – poster image URL
cjs.subtitles()      // array    – list of subtitle tracks
cjs.progress()       // number   – playback progress (0 → 100)

cjs.volume()         // number   – current volume (0 → 1)
cjs.muted()          // boolean  – is the audio muted
cjs.time()           // number   – current time in seconds
cjs.time(true)       // string   – formatted current time ("01:23")
cjs.duration()       // number   – total duration in seconds
cjs.duration(true)   // string   – formatted duration ("01:49:03")

Metadata

Required

cjs.cast('https://example.com/video.mp4');

Optional

cjs.cast('https://example.com/video.mp4', {
  // Media information
  title: 'My Video',                          // Title shown on the Cast device
  description: 'Optional description',        // Subtitle / secondary text
  poster: 'https://example.com/poster.jpg',   // Poster image URL

  // Playback
  time: 30,                                   // Start position in seconds
  paused: false,                              // Start paused instead of playing

  // Subtitles
  subtitles: [
    {
      label: 'English',                       // Name shown in the subtitle menu
      src: 'https://example.com/en.vtt',      // URL of the .vtt file
      subtype: 'SUBTITLES',                   // SUBTITLES | CAPTIONS | DESCRIPTIONS | CHAPTERS | METADATA
      active: true                            // Whether this track should be enabled by default
    },
    {
      label: 'Spanish',
      src: 'https://example.com/es.vtt'
    }
  ],

  // Optional subtitle styling (Netflix-like defaults are already applied)
  subtitleStyle: {
    backgroundColor: '#00000000',             // Background color (RGBA)
    foregroundColor: '#FFFFFF',               // Text color
    edgeType: 'DROP_SHADOW',                  // NONE | OUTLINE | DROP_SHADOW | RAISED | DEPRESSED
    edgeColor: '#000000FF',                   // Edge / shadow color
    fontFamily: 'CASUAL',                     // SANS_SERIF | MONOSPACED_SANS_SERIF | SERIF | MONOSPACED_SERIF | CASUAL | CURSIVE | SMALL_CAPITALS
    fontScale: 1.0                            // Font size multiplier
  }
});