Video.js

特点

• 多格式支持: 支持 MP4、WebM 等传统视频格式，以及 HLS 和 DASH 等自适应流格式。
• 易于定制: 通过 CSS 可以轻松更改播放器的外观，还支持多种皮肤和插件。
• 跨平台兼容: 在各种现代浏览器和设备上均能正常运行。
• 插件架构: 丰富的插件生态系统，支持 Chromecast、IMA 广告、VR 等功能。
• 强大的社区支持: 有数百个贡献者和广泛的使用案例，确保持续发展和改进。

使用场景

• 嵌入到网站或应用程序中的视频播放
• 支持直播流媒体播放
• 需要高定制化的视频播放器，如在线教育平台、媒体网站等

安装方式

可以通过 npm 或直接使用 CDN 链接进行安装：

npm install video.js

或在 HTML 中添加 CDN 链接：

<link href="https://vjs.zencdn.net/7.14.3/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.14.3/video.js"></script>

使用示例

在 HTML 文件中添加视频元素：

<video id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="640" height="360">
  <source src="my-video.mp4" type="video/mp4" />
  <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>

在 JavaScript 中初始化播放器：

var player = videojs('my-video', {
  autoplay: true,
  controls: true,
  fluid: true
});

常用 API 介绍

• play(): 播放视频。
• pause(): 暂停视频。
• src(source): 更改视频源。
• on(event, handler): 为特定事件添加事件监听器，例如 ended 事件。
• dispose(): 销毁播放器实例。

高级用法

结合 React 使用 Video.js：

import React, { useRef, useEffect } from 'react';
import videojs from 'video.js';
import 'video.js/dist/video-js.css';

const VideoPlayer = ({ options, onReady }) => {
  const videoRef = useRef(null);
  const playerRef = useRef(null);

  useEffect(() => {
    if (!playerRef.current) {
      const videoElement = document.createElement('video-js');
      videoRef.current.appendChild(videoElement);

      const player = playerRef.current = videojs(videoElement, options, () => {
        console.log('player is ready');
        onReady && onReady(player);
      });
    } else {
      const player = playerRef.current;
      player.autoplay(options.autoplay);
      player.src(options.sources);
    }
  }, [options]);

  useEffect(() => {
    return () => {
      if (playerRef.current) {
        playerRef.current.dispose();
        playerRef.current = null;
      }
    };
  }, []);

  return <div data-vjs-player><div ref={videoRef} /></div>;
};

export default VideoPlayer;

官方资料

• 官方网站: Video.js
• GitHub 仓库: Video.js on GitHub
• API 文档: Video.js API Docs