视频播放器 Plyr 和 DPlayerPlyr 是简单、轻量级的 HTML5 播放器，但在播放大文件时可能会出现卡顿；
主要介绍了两种视频播放器的基本使用和配置等。Plyr 是一个简单、轻量级且高度可定制化的 HTML5 播放器，但在播放大文件时可能会出现卡顿；DPlayer 是一个轻量级的 HTML5 视频播放器，支持 HLS 格式视频播放。通过将大视频文件切片成多个较小的片段，可以提高加载速度和节省带宽资源。
1. Plyr 视频播放器
1.1 安装
Plyr 是一个简单、轻量级、可定制的 HTML5 播放器
npm 地址：www.npmjs.com/package/ply…
plyer 地址：github.com/sampotts/pl…
安装依赖：
# 我的版本："plyr-react": "^5.3.0"
npm install plyr-react
1.2 组件实现
// PlyrVideo.tsx视频组件
import Plyr from "plyr-react";
import "plyr-react/plyr.css";
import "./index.scss";
interface iProps {
videoSrc: string;
autoPlay?: boolean;
videoRef: any;
}
function Page(props: iProps) {
const { videoSrc, autoPlay = false, videoRef } = props;
return (
<div className="pp_video">
<Plyr
ref={videoRef}
source={{
type: "video",
sources: [{ src: videoSrc, type: "video/mp4" }],
}}
options={{
// 加载时自动播放媒体
autoplay: autoPlay,
// 是否在播放其他媒体时自动暂停当前媒体(一次只允许一个播放)
autopause: true,
// 单击（或轻触）视频容器将切换播放/暂停
clickToPlay: true,
// 显示的控件列表
controls: [
// "play-large", // 大尺寸播放按钮
"play", // 播放/暂停按钮
// "rewind", // 快退按钮
// "fast-forward", // 快进按钮
"progress", // 进度条
"current-time", // 当前时间
"mute", // 静音按钮
"volume", // 音量控制器
// "captions", // 字幕按钮
"settings", // 设置按钮
// "pip", // 画中画模式按钮
"fullscreen", // 全屏按钮
],
// 设置选项
settings: ["captions", "quality", "speed", "loop"],
// 字幕相关配置
captions: {
active: true, // 是否启用字幕
language: "auto", // 字幕语言
update: true, // 更新字幕
},
// 全屏配置
fullscreen: {
enabled: true, // 切换是否应启用全屏
fallback: true, // 允许回退到完整窗口解决方案（true/false/“force”）
container: "c_layout_page", // player元素祖先的选择器
},
// 预览缩略图配置
previewThumbnails: {
enabled: false, // 是否启用预览缩略图
src: "", // 缩略图资源 URL
},
// 配置可用的速度选项
speed: {
selected: 1, // 播放的默认速度
options: [0.75, 1, 1.25, 1.5, 2], // 速度选项
},
// 国际化多语言配置
i18n: {
speed: "播放速率",
normal: "正常",
},
// 时间轴段落标记
markers: {
enabled: false,
points: [
{ time: 5, label: "段落标记1" },
{ time: 10, label: "段落标记2" },
],
},
}}
/>
</div>
);
}
export default Page;
1.3 关闭事件
在 Modal 模态框打开视频组件，关掉 Modal 时，PlyrVideo 还在播放，需要手动处理，调用 stop 方法来停止视频播放。
const handleClose = () => {
// 在关闭模态框前，确保视频停止播放
if (videoRef.current && videoRef.current.plyr) {
videoRef.current.plyr.stop();
}
};
2. DPlayer 视频播放器
因为 PlyrVideo 播放器，在视频文件比较大的时候，是一边加载一边播放，播放会很卡，用户感觉体验不好。
项目组讨论的解决方案为：视频切片，将一个完整的视频文件分割成多个较小的片段，每个片段可以独立存储和传输。这种方法可以提高视频上传的速度和效率，特别是在网络条件不佳的情况下。
HLS (HTTP Live Streaming) 是一种基于 HTTP 协议的流媒体传输协议，它将视频内容分割成一系列较小的文件片段，并通过 HTTP 服务器向客户端提供这些文件片段。HLS 格式的视频文件通常由一个.m3u8 文件和多个.ts 文件组成，其中.m3u8 文件包含了所有.ts 文件的列表和时间戳信息。
- 提高加载速度：视频切片可以并行加载，从而加快视频的加载速度。
- 节省带宽资源：HLS 格式可以根据用户的网络状况动态调整视频质量，减少带宽消耗。
- 错误恢复：单个切片加载失败时，只需要重新加载该切片，而不需要重载整个视频。
将视频文件上传到阿里云 OSS 中，然后转成 HLS 格式（视频切片后会将原视频切片，分割为一个.m3u8 与若干.ts 文件，当对视频读取时，会按照时间节点通过.m3u8 中的文件地址读取相应的.ts 文件，大大减少了视频加载时的等待时间）。
前端视频播放组件，就需要支持播放.m3u8 格式视频。因此使用了 DPlayer，分段加载播放。
DPlayer 是一个轻量级的 HTML5 视频播放器，支持多种视频格式，包括 HLS 格式。
官方文档：dplayer.diygod.dev/guide.html
2.1 引入
在 HTML 文件中引入 DPlayer 和 HLS.js 的 CDN 链接。
// index.html文件中引入
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script
src="https://cdn.jsdelivr.net/npm/hls.js@1.1.5/dist/hls.min.js"
async
></script>
<script
src="https://cdn.jsdelivr.net/npm/dplayer@1.26.0/dist/DPlayer.min.js"
async
></script>
</body>
2.2 组件实现
// DPlayerVideo.tsx视频组件
import { useEffect } from "react";
import "./index.scss";
interface iProps {
videoSrc: string;
autoPlay?: boolean;
videoRef: any;
}
function Page(props: iProps) {
const { videoSrc, autoPlay = false } = props;
useEffect(() => {
if (!videoSrc) return;
// 创建播放器
// @ts-ignore
const dp = new DPlayer({
container: document.getElementById("dplayer"),
autoplay: autoPlay, // 自动播放
live: false, // 直播模式
theme: "#4593ea", // 主题颜色
loop: true, // 循环播放
lang: "zh-cn", // 语言选择
screenshot: false, // 截图选项
hotkey: true, // 热键开启
airplay: false, // 在 Safari 中开启 AirPlay
mutex: true, // 播放器互斥
preload: "auto", // 视频预加载
volume: 1, // 默认音量
hls: {
// HLS 配置
withCredentials: false,
overrideNative: false,
startPosition: 0,
},
video: {
url: videoSrc,
type: "hls", // 视频类型
// pic: "", // 视频封面
// thumbnails: "", // 缩略图
},
});
console.log(dp.plugins.hls); // Hls 实例
// 如果需要自动播放，则先将音量设为 0
if (autoPlay) {
dp.play();
}
// 清理函数
return () => {
dp.destroy(); // 销毁 DPlayer 实例
};
}, [videoSrc, autoPlay]);
return (
<div className="pp_video">
<div id="dplayer"></div>
</div>
);
}
export default Page;
3. 使用
<DPlayerVideo
videoSrc={detail?.resourceUrl}
autoPlay={true}
videoRef={videoRef}
/>
4. 兼容性问题
360极速浏览器中，有时候会报错：Unexpedted Application Error! DPlayer is not defined
原因分析：点击播放时，DPlayer.js文件还没加载完毕，导致报错
问题解决：调整DPlayer加载时机
转载自:https://juejin.cn/post/7410670277309792271