Video.js: An Open-Source HTML5 Video Player for All Web Platforms

Introdução

Video.js is a powerful, open-source HTML5 video player and framework that provides a consistent and customizable video experience across all web-based platforms. Launched in 2010, it has become a widely adopted solution, supporting various media formats, including modern streaming protocols like HLS and DASH. Its robust architecture allows for extensive customization and expansion through a vibrant ecosystem of plugins, making it suitable for diverse video playback needs. With a large community of contributors and millions of websites using it, Video.js stands as a reliable choice for web video.

Instalação

Getting started with Video.js is straightforward. You can include it directly via a CDN or install it using npm.

Using CDN (Quick Start):
For a quick setup, add the following tags to your document's <head>:

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

Alternatively, you can use other CDNs like unpkg or cdnjs:

<!-- 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>

<!-- cdnjs : use a specific version of Video.js (change the version numbers as necessary) -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/8.23.4/video-js.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/8.23.4/video.min.js"></script>

Using npm:
For project-based installations, you can install Video.js via npm:

npm install video.js

Exemplos

Once Video.js is included, you can integrate it into your HTML with minimal effort.

Automatic Setup:
The simplest way is to add a <video> element with the data-setup='{}' attribute. Video.js will automatically detect and initialize the player.

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

Manual Initialization:
If you prefer more control, you can initialize the player manually using JavaScript. This allows you to pass options and define callbacks.

var options = {};

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

  // In this context, `this` is the player that was created by Video.js.
  this.play();

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

Porquê usar

Video.js offers several compelling reasons for developers to choose it for their web video needs:

Broad Platform Support: It works seamlessly across desktops, mobile devices, tablets, and web-based Smart TVs, ensuring a consistent user experience.
Extensive Format Support: Out of the box, it supports all common media formats used on the web, including advanced streaming formats like HLS and DASH.
Highly Customizable and Extensible: With a robust plugin ecosystem, developers can easily extend and customize the player's functionality to fit specific requirements.
Open Source and Community-Driven: Being open source with a large and active community, it benefits from continuous development, bug fixes, and feature enhancements.
Ease of Use: Both automatic and manual setup options make it flexible for various integration scenarios, from simple embeds to complex applications.

Links

For more detailed information and to get started with Video.js, refer to the official resources:

Video.js: An Open-Source HTML5 Video Player for All Web Platforms

Summary

Repository Info

Tags

Introdução

Instalação

Exemplos

Porquê usar

Links