Video.js：视频播放的全能解决方案

前言

在现代网页开发中，视频播放功能已经成为用户体验的重要组成部分。无论是开发一个视频分享平台还是一个简单的博客，选择合适的视频播放器至关重要。今天，我们要介绍的 Video.js 是一个强大且灵活的 HTML5 视频播放器，能够满足你对视频播放的所有需求。

基本信息

官网：videojs.com
GitHub：video.js
Stars：37.8K
类别：多媒体

什么是 Video.js？

Video.js 是一个从零开始为 HTML5 世界打造的网页视频播放器。它支持 HTML5 视频、现代流媒体格式，还兼容 YouTube 和 Vimeo。自2010年中期项目启动以来，Video.js 已发展成为拥有数百名贡献者并广泛应用于超过 80 万个网站的播放器。

主要特点

全能播放：支持传统视频格式（如 MP4 和 WebM）及自适应流媒体格式（如 HLS 和 DASH），并提供专用的直播流用户界面。
易于定制：通过简单的 CSS，轻松为播放器增添个人风格，符合你的网页设计需求。
丰富的插件生态：支持大量插件和皮肤，包括 Chromecast、IMA 和 VR 插件，快速扩展功能。

使用场景

视频分享平台：提供稳定的播放体验，支持本地视频和流媒体内容。
直播应用：通过专用的直播流 UI，实现高质量的实时视频播放。
教育和培训平台：支持多种格式和流媒体，确保教学视频在不同设备上顺畅播放。

快速上手

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

<!-- 使用特定版本 -->
<link href="https://unpkg.com/video.js@8.17.3/dist/video-js.min.css" rel="stylesheet">
<script src="https://unpkg.com/video.js@8.17.3/dist/video.min.js"></script>

<!-- 使用 cdn -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/8.17.3/video-js.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/8.17.3/video.min.js"></script>

添加视频播放器元素

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

初始化播放器

var player = videojs('my-player');

该函数还接受一个对象和一个回调：

var options = {};
var player = videojs('my-player', options, function onPlayerReady() {
  videojs.log('Your player is ready!');
  this.play();
  
  // 事件监听
  this.on('ended', function() {
    videojs.log('Awww...over so soon?!');
  });
});