DOCSEARCHbyAlgolia
Submit Docs

Video.js

repository·main·Indexed 12 days ago

https://github.com/videojs/video.js

An open-source HTML5 web video player and framework supporting HLS and DASH. Version 8.24.0 provides a common API and skin that works across desktops, mobile devices, tablets, and Smart TVs, and is extensible via a plugin ecosystem.

Tokens
1.6K
Snippets
6
Records
9
Agent score
99%

What's inside Video.js

  1. Install Video.js via unpkg or cdnjs

    main

    Alternatively, you can use other JavaScript CDNs like unpkg or cdnjs. When using these, you can specify a version number to ensure stability.

    <!-- unpkg : use the latest version of Video.js -->
<link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet">
<script src="https://unpkg.com/video.js/dist/video.min.js"></script>

<!-- unpkg : use a specific version of Video.js -->
<link href="https://unpkg.com/video.js@8.24.0/dist/video-js.min.css" rel="stylesheet">
<script src="https://unpkg.com/video.js@8.24.0/dist/video.min.js"></script>

<!-- cdnjs : use a specific version of Video.js -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/8.24.0/video-js.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/8.24.0/video.min.js"></script>

  2. Find Video.js guides and troubleshooting

    main
    For in-depth instructional content, use cases, and setup instructions, refer to the official Video.js guides. If you encounter issues, consult the FAQ and troubleshooting pages for common resolutions.

  3. Update translation lists via CLI

    main

    If you add or update a translation file in the lang directory, you must run the documentation build command to update the translation completeness list in the documentation. This ensures your changes are reflected in the project's documentation during a pull request.

    npm run docs:lang

  4. Access the Video.js API documentation

    main
    Detailed technical documentation for functions, properties, and events is available at the official Video.js documentation site. For developers starting with the library, the Player class documentation is the primary entry point for understanding how to control the video player.

  5. Install Video.js via CDN

    main

    You can quickly include Video.js in your project using a CDN. Add the following CSS and JavaScript tags to your document's <head> section. This example uses the Fastly CDN version 8.23.6.

    <link href="//vjs.zencdn.net/8.23.6/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/8.23.6/video.min.js"></script>

  6. Install and use Video.js

    main

    Video.js is a web video player and framework. You can import the default export to access the main videojs function, which is used to initialize players and access the library's API. The library includes support for quality levels via videojs-contrib-quality-levels and HTTP streaming via @videojs/http-streaming by default.

    import videojs from 'video.js';

// Initialize a player
const player = videojs('my-video-id', { 
  controls: true, 
  autoplay: false 
});

  7. Initialize Video.js using automatic setup

    main

    Video.js can automatically initialize itself by finding a <video> element with the class video-js and a data-setup attribute. The data-setup attribute must contain valid JSON; at minimum, use '{}' to provide default options.

    <video
    id="my-player"
    class="video-js"
    controls
    preload="auto"
    poster="//vjs.zencdn.net/v/oceans.png"
    data-setup='{}'>
  <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>
  <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"></source>
  <source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg"></source>
  <p class="vjs-no-js">
    To view this video please enable JavaScript, and consider upgrading to a
    web browser that
    <a href="https://videojs.com/html5-video-support/" target="_blank">
      supports HTML5 video
    </a>
  </p>
</video>

  8. Initialize Video.js manually with videojs()

    main

    To avoid automatic setup, omit the data-setup attribute and initialize the player manually using the videojs() function. This function accepts the element ID (or element itself), an optional options object, and an optional callback function that is invoked when the player is ready.

    // Basic manual initialization
var player = videojs('my-player');

// Initialization with options and a ready callback
var options = {};

var player = videojs('my-player', options, function onPlayerReady() {
  videojs.log('Your player is ready!');

  // In this context, `this` is the player instance.
  this.play();

  // Adding an event listener
  this.on('ended', function() {
    videojs.log('Awww...over so soon?!');
  });
});

  9. Localize the Progress Bar timing text

    main

    The progress bar uses a specific translation key for its timing display (e.g., "0:30 of 1:00"). This key supports token replacement for the current time and total duration. If a translation is missing, the SeekBar component falls back to a hardcoded English default via the localize method.

    Translation Key: progress bar timing: currentTime={1} duration={2}

    Default English Value: {1} of {2}