griffith（Star 2.1k）

Griffith 是知乎开源的一个基于 React 视频播放器，目前已在知乎 web 和 mobile web 内使用，并在 GitHub 上开源。

DPlayer（Star 10.5k）

DPlayer是一个可爱的HTML5 danmaku视频播放器，可帮助人们轻松构建视频和danmaku。

react-player（Star 4.5k）

一个React组件，用于播放各种URL，包括文件路径，YouTube，Facebook，Twitch，SoundCloud，Streamable，Vimeo，Wistia，Mixcloud和DailyMotion。

video-react（Star 1.9k）

Video.React是一个Web视频播放器，它是使用React库从头开始为HTML5世界而构建的。

moovie.js（Star 1.9k）

一个 JavaScript 写的 HTML5 视频播放器，可以在网页上播放视频。特点是功能较全，支持外挂字幕文件。

同时支持 flv 格式的播放器

flv 是 flash video 的简称，现代浏览器都把 flash 给彻底抛弃了，自然 flv 也就不支持了。
为什么HTML5原生不支持FLV？ - 知乎

video.js（Star 29.7k）

github 地址、官方文档
Video.js是专为HTML5世界打造的网络视频播放器。它支持HTML5和Flash视频，以及YouTube和Vimeo（通过插件）。它支持在台式机和移动设备上播放视频。该项目始于2010年年中，现在已在播放器上使用40万个网站。

简单 demo

  1. import React, { useRef, useEffect } from 'react';
  2. import Videojs, { VideoJsPlayer } from 'video.js';
  3. import 'video.js/dist/video-js.css';
  5. interface VideoPlayerProps {
  6.   /**
  7.    * @description 视频地址
  8.    */
  9.   url: string;
  10.   /**
  11.    * @description 容器高
  12.    */
  13.   height: number;
  14.   /**
  15.    * @description 容器宽
  16.    */
  17.   width: number;
  18. }
  20. const VideoPlayer: React.FC<VideoPlayerProps> = ({ url, height, width }) => {
  21.   const videoRef = useRef<HTMLVideoElement>(null);
  22.   const player = useRef<VideoJsPlayer>();
  24.   const destroyVideo = () => {
  25.     if (player.current) {
  26.       player.current.dispose(); // 销毁视频
  27.       // player.current.pause(); // 暂停视频
  28.     }
  29.   };
  31.   const createPlayer = () => {
  32.     if (videoRef.current) {
  33.       player.current = Videojs(
  34.         videoRef.current,
  35.         {
  36.           height,
  37.           width,
  38.           bigPlayButton: true,
  39.           autoplay: true, // 自动播放
  40.           // fluid: true, // 宽度自适应
  41.           controls: true, // 是否可控
  42.           muted: true, // 取消音轨实现自动播放
  43.         },
  44.         () => {
  45.           // 回调处理
  46.         },
  47.       );
  48.       player.current.src({ src: url });
  49.     }
  50.   };
  52.   const changeVideoUrl = () => {
  53.     player?.current?.ready(() => {
  54.       player?.current?.src(url);
  55.       // player?.current?.autoplay(); // 若没有设置自动播放，切换视频后需要添加此行
  56.     });
  57.   };
  59.   useEffect(() => {
  60.     // 若已存在直接播放，实现地址切换
  61.     if (player.current) {
  62.       changeVideoUrl();
  63.     } else {
  64.       createPlayer();
  65.     }
  66.   }, [url]);
  68.   useEffect(() => {
  69.     return () => {
  70.       destroyVideo();
  71.     };
  72.   }, []);
  74.   return (
  75.     <video
  76.       ref={videoRef}
  77.       className="video-js vjs-big-play-centered"
  78.       controls
  79.       autoPlay
  80.     >
  81.       您的浏览器不支持。
  82.     </video>
  83.   );
  84. };
  86. export default VideoPlayer;

宽高自适应

video 标签添加 style 样式 <video style="width: 100%; height: 100%; padding-top: initial;"[>](http://localhost:8000/4ec8d0d1-257f-474a-b1f0-d6f1ee57c90a">)</video>

自动播放失败并报错： play() failed because the user didn’t interact with the document first

报错原因是 chrome 新特性，内容大致意思是开发者不能利用手中权限去给用户造成噪音干扰，首次加载页面需要用户和 audio/video 进行交互在可以进行播放。
18年之后 chrome 版本已不支持 autoplay，不只是此插件，是所有的视频播放插件都会遇到此问题，原因为了提高用户体验，防止一进入网页会自动播放声音过大的音频。解决方法，添加autoplay muted属性，缺点：播放无声。

解决一：video 标签添加 muted 和 autoPlay 属性

  1. <video muted autoPlay></video>

解决二：创建 video.js 实例时添加 muted 和 autoplay 参数

  1. Videojs(document.getElementById('my-video'), {
  2.   height: '500px',
  3.   width: '300px',
  4.   autoplay: true,
  5.   muted: true,
  6. });

视频出现警告：no compatible source was found for this media（找不到此媒体的兼容源）

视频格式是 .flv 格式，播放需要浏览器支持 flash 插件。但是目前浏览器都禁用 flash 了，只能使用其他插件例如：flv.js 插件，在项目里面进行判断如果视频是 .flv 格式则使用 flv.js 插件播放， 否则使用 video.js 插件播放。

react 中卸载 video.js 时报错：Failed to execute ‘removeChild’ on ‘Node’: The node to be removed is not a child of this node.

参考：https://github.com/videojs/video.js/issues/4935
问题描述：在 react 中当根据一个变量，比如视频地址是否存在来动态渲染 video 时会出现报错。
原因：react 只对内部的 DOM 树及状态负责，外部插件修改之后（比如将某个节点拖动到另一个节点），再重新渲染，就会出问题。主要是出在 dispose 这个方法，每次调用这个方法就会把此节点移除。（简言之就是 video.js 插件自己已经移除了 dom，此时 react 再次移除就会报错）

  1. // 当 url 为空时会报错：Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
  2. export default ({ url }) => {
  3.   return url ? <video>您的浏览器不支持。</video> : '暂无视频';
  4. };

解决：是用一个 div 包裹他们，这样外层 div 就变成了被 remove 的对象，就不会发生无法移除的问题了。

  1. export default ({ url }) => {
  2.   return url ? <div><video>您的浏览器不支持。</video></div> : '暂无视频';
  3. };

flv.js（Star 19.7k）

github 地址
使用flv.js快速搭建html5网页直播 - 知乎
HTML5 FLV播放器，用纯 JavaScript 编写的 HTML5 Flash 视频（FLV）播放器，不带 Flash 万岁！
flv.js在获取到FLV格式的音视频数据后将 FLV 文件流转码复用成 ISO BMFF（MP4 碎片）片段，再通过Media Source Extensions API 传递给原生HTML5 Video标签进行播放。

限制

但是flv.js也不是所有的flv格式视频都能播放，并且对浏览器环境也有一定的要求，以下是flv.js的使用限制：

其他

简单 demo

  1. import React, { useRef, useEffect } from 'react';
  2. import flvJs from 'flv.js';
  4. interface FlvPlayerProps {
  5.   /**
  6.    * @description 视频地址
  7.    */
  8.   url: string;
  9.   /**
  10.    * @description 容器高
  11.    */
  12.   height: number;
  13.   /**
  14.    * @description 容器宽
  15.    */
  16.   width: number;
  17. }
  19. const FlvPlayer: React.FC<FlvPlayerProps> = ({ url, height, width }) => {
  20.   const flvRef = useRef<HTMLVideoElement>(null);
  21.   const player = useRef<flvJs.Player>(null);
  23.   const destroyPlayer = () => {
  24.     if (player.current) {
  25.       player.current.pause();
  26.       player.current.unload();
  27.       player.current.detachMediaElement();
  28.       player.current.destroy();
  29.       player.current = null;
  30.     }
  31.   };
  33.   const createPlayer = () => {
  34.     if (flvJs.isSupported() && flvRef.current) {
  35.       player.current = flvJs.createPlayer(
  36.         {
  37.           type: 'flv',
  38.           isLive: true,
  39.           hasAudio: false,
  40.           url,
  41.         },
  42.         {
  43.           // enableWorker: true,
  44.           enableStashBuffer: false,
  45.           stashInitialSize: 128, // 减少首桢显示等待时长
  46.         },
  47.       );
  48.       player.current.attachMediaElement(flvRef.current);
  49.       player.current.load();
  50.       player.current.play();
  51.     }
  52.   };
  54.   useEffect(() => {
  55.     // 先销毁再创建，实现地址切换
  56.     destroyPlayer();
  57.     createPlayer();
  58.   }, [url]);
  60.   useEffect(() => {
  61.     return () => {
  62.       destroyPlayer();
  63.     };
  64.   }, []);
  66.   return (
  67.     <video ref={flvRef} width={width} height={height} controls muted>
  68.       您的浏览器不支持播放
  69.     </video>
  70.   );
  71. };
  73. export default FlvPlayer;

问题

  • 从 1.5.0 升级到 1.6.0 报错 Class extends value undefined is not a constructor or null。

hls.js（Star 0.25k）

github 地址
hls.js是一个JavaScript库，可实现HTTP Live Streaming客户端。它依靠HTML5视频和MediaSource扩展进行播放。它通过将MPEG-2传输流和AAC / MP3流转换为ISO BMFF（MP4）片段来工作。如果在浏览器中可用，可以使用Web Worker异步执行此转换。WWDC2016期间宣布，hls.js还支持HLS + fmp4
hls.js不需要任何播放器，它可以直接在标准HTML

元素上运行。hls.js用ECMAScript6编写，并使用Babel在ECMAScript5中转译。

playease.js（Star 0.15k）

github 地址
这不仅是HTML5 FLV播放器，它支持HTTP / WS-FLV实时流传输，而且还支持HTTP / WS-fMP4，MPEG-DASH，HLS和原始HTML5媒体资源（例如Ogg，Mpeg4，WebM），并带有独立的UI框架。

EasyPlayer.js（Star 0.25k）

EasyPlayer.js H5播放器，是一款能够同时支持HTTP、RTMP、HTTP-FLV、HLS（m3u8）直播与点播等多种协议，支持H.264、H.265、AAC等多种音视频编码格式，支持mse、asm、wasm等多种解码方式，支持Windows、Linux、Android、iOS全平台终端的H5播放器。EasyPlayer.js H5 Player support HTTP/RTMP/HTTP-FLV/HLS(m3u8) live streaming & vod streaming,support H.264/H.265/AAC video & audio codec,support mse/asm/wasm decode mode,support Windows/Linux…

阿里云 Aliplayer

Aliplayer 经过几个版本的迭代演进，整个架构更加合理，赋予本身和用户更多的扩展能力，具有独立增加播放类型和功能的能力，比如要h5支持flv的播放能力，只需要新增Flv Extend功能扩展模块，而不用修改其他模块的代码，比如HLS Extend等等，确保不影响其他功能的正常工作，保持每个版本发布的稳定性。

Web播放器

阿里云播放器SDK（Aliplayer SDK）是阿里视频云端到云到端服务的重要一环，支持视频加密播放、清晰度切换、直播时移等业务场景，本文说明并提供了Web端播放器的在线配置、功能展示、微信小程序等Demo体验。为您提供简单、快速、安全、稳定的视频播放服务。

示例

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="x-ua-compatible" content="IE=edge" >
  6.     <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
  7.     <title>Aliplayer Functions</title>
  8.     <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.12/skins/default/aliplayer-min.css" />
  9.     <script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.9.12/aliplayer-min.js"></script>
  10.   </head>
  11.   <body>
  12.     <div id="player-con"></div>
  13.     <script>
  14.       var player = new Aliplayer({
  15.         id: "player-con",
  16.         source: "//player.alicdn.com/video/editor.mp4",
  17.         width: "100%",
  18.         height: "500px",
  19.         cover: 'https://img.alicdn.com/tps/TB1EXIhOFXXXXcIaXXXXXXXXXXX-760-340.jpg',
  20.         /* To set an album art, you must set 'autoplay' and 'preload' to 'false' */
  21.         autoplay: false,
  22.         preload: false,
  23.         isLive: false
  24.       }, function (player) {
  25.         console.log("The player is created");
  26.       });
  27.     </script>
  28.   </body>
  29. </html>

参考资料

多媒体前端技术入门指南