Plyr - 一个轻量级，UI好看的H5 Web播放器

文章最后更新时间：2024年05月30日

Plyr 简介

Plyr 是一个简单、方便、可自定义的H5播放器，使用原生 JavaScript 没有其他依赖。支持 YouTube 和 Vimeo，支持音频和视频两格式,包含自定义的控制选项切换播放，调整音量，完全支持WebVTT字幕和全屏幕播放。它只支持现代浏览器，轻量级方便和可定制的媒体播放器。

Plyr特性：

1、可访问性 - 完全支持字幕和屏幕阅读器

2、轻量级 - 压缩后只有 4.8Kb

3、可定制 - 外观可以根据需要进行调整

4、语义化 - 使用 HTML5 的输入框进行音量和进度的调整

5、快速响应 - 就像你预期的那样

6、音频和视频- 支持视频和纯音频

7、API - 易用 API

8、向下兼容 - 如果浏览器不支持，则自动使用内建播放器

9、全屏支持 -支持原生全屏和退出全屏

10、无依赖 - 使用原生 JS 编写，不需要JQuery

Plyr CDN：

<link rel="stylesheet" href="https://cdn.plyr.io/1.3.5/plyr.CSS">
<script src="https://cdn.plyr.io/1.3.5/plyr.js"></script>

你也可以从 https://cdn.plyr.io/1.3.5/sprite.SVG 获取 sprite.SVG 文件。

Plyr CSS

如果你想用默认的 css 样式，从 /dist 中添加 plyr.css 文件到你的 head 标签中，或者更好的做法是，在你的发行项目中使用 /src 中的 plyr.less 或 plyr.sass 文件。

<link rel="stylesheet" href="dist/plyr.css">

Plyr SVG

考虑到性能，作为控制条图标的 SVG 精灵是通过 Ajax 加载的。最好是在 </body> 闭合标签前，先于其它任何脚本添加。

<script>
(function(d, p){
    var a = new XMLHttpRequest(),
        b = d.body;
    a.open("GET", p, true);
    a.send();
    a.onload = function(){
        var c = d.createElement("div");
        c.style.display = "none";
        c.innerHTML = a.responseText;
        b.insertBefore(c, b.childNodes[0]);
    }
})(document, "dist/sprite.svg");
</script>

Plyr HTML

使用 plyr 唯一一个需要的额外标记就是一个 <div> 包装。将源，封面和字幕用你自己的替多媒体相关链接换掉。

<div>
    <video poster="https://cdn.selz.com/plyr/1.0/poster.jpg" controls crossorigin>
        <!-- 视频文件 -->
        <source src="https://cdn.selz.com/plyr/1.0/movie.mp4" type="video/mp4">
        <source src="https://cdn.selz.com/plyr/1.0/movie.webm" type="video/webm">
        <!-- 字幕文件 -->
        <track kind="captions" label="English captions" src="https://cdn.selz.com/plyr/1.0/movie_captions_en.vtt" srclang="en" default>
        <!-- 针对不支持 <video> 元素的兼容 -->
        <a href="https://cdn.selz.com/plyr/1.0/movie.mp4">Download</a>
    </video>
</div>

同样 <audio> 如下

<div>
    <audio controls>
        <!-- 音频文件 -->
        <source src="https://cdn.selz.com/plyr/1.0/logistics-96-sample.mp3" type="audio/mp3">
        <source src="https://cdn.selz.com/plyr/1.0/logistics-96-sample.ogg" type="audio/ogg">
        <!-- 针对不支持 <video> 元素的兼容 -->
        <a href="https://cdn.selz.com/plyr/1.0/logistics-96-sample.mp3">Download</a>
    </audio>
</div>

针对 YouTube，Plyr 使用了标准的 YouTube API 标记（一个空的 <div>）：

<div>
    <div data-video-id="L1h9xxCU20g" data-type="youtube"></div>
</div>

跨域 (CORS)

你会注意到上面例子中 <video> 和 <audio> 元素的 crossorigin 属性。这是因为该多媒体是从另外一个域加载过来的，或许你需要加上这个属性。

JavaScript

播放器大多数的行为都可以在初始化的时候配置。这里是一个默认安装的例子：

<script src="dist/plyr.js"></script>
<script>plyr.setup();</script>

Plyr 实例

Demo Html

<link rel="stylesheet" href="plyr.min.css" />
<script type="text/javascript" src="HLS.min.js"></script>
<script type="text/javascript" src="plyr.min.js"></script>
...
<div id="player"><video id="video" controls crossorigin playsinline></video></div>
...

Demo JS

const source = 'https://xxx.com/2023/index.M3U8';//视频地址
const video = document.querySelector('video');
const player = new Plyr(video, {
	autoplay: false,
	volume: 1,
	ratio: '16:9',
	preload: 'auto',
	speed: { 
		selected: 1, 
		options: [0.5, 1, 1.5, 2] 
	},
	fullscreen: {
		enabled: true, 
		fallback: true, 
		iosNative: true,
	},
	captions: {
		active: true,
		update: false,
		language: 'auto'
	},
	i18n: {
		restart: '重播',
		play: '播放',
		pause: '暂停',
		volume: '音量',
		mute: '静音',
		pip: '画中画',
		normal: '默认',
		quality: '画质',
		download: '下载',
		enterFullscreen: '全屏',
		exitFullscreen: '关闭全屏',
		captions: 'Captions',
		settings: '设置',
		speed: '倍速',
		loop: '循环播放',
	},
});				
if(source.indexOf('.M3U8')>-1){
	if (!HLS.isSupported()) {
		video.src = source;
	} else {
		const hls = new Hls();
		hls.loadSource(source);
		hls.attachMedia(video);
		window.hls = hls;
		player.on('languagechange', () => {
			setTimeout(() => hls.subtitleTrack = player.currentTrack, 50);
		})
	}
};
window.player = player;

Plyr 参数

enabled//完全禁用 Plyr。这将允许您执行用户代理检查或类似操作，以编程方式为某个 UA 启用或禁用 Plyr。
debug//在控制台显示调试信息
controls//控制栏:['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen']
settings//设置:['captions', 'quality', 'speed', 'loop']
i18n//用于 UI 中文本的国际化 (i18n)。
loadSprite//加载指定为选项的 SVG 精灵iconUrl（如果是 URL）。如果false，则假定您正在自己处理精灵加载。
iconUrl//指定 SVG 精灵的 URL 或路径。
iconPrefix//为默认控件中使用的图标指定 id 前缀（例如“plyr-play”将是“plyr”）。如果您使用自己的 SVG 精灵但使用默认控件，这是为了防止发生冲突。大多数人可以忽略这个选项。
autoplay//加载时自动播放媒体。
autopause//播放器互斥
playsinline//允许在 iOS 上内联播放。
seekTime//用户点击快进或快退时搜索的时间
volume//音量
muted//静音
clickToPlay//单击（或点击）视频容器将切换播放/暂停。
disableContextMenu//禁用视频上的右键单击菜单
hideControls//在 2 秒没有鼠标或焦点移动、控制元素模糊（制表符退出）、播放开始或进入全屏时自动隐藏视频控件。只要移动鼠标、聚焦控制元素或暂停播放，控件就会立即重新出现。
resetOnEnd//播放完成后将播放重置为开始。
keyboard//热键:{ focused: true, global: false }
tooltips//控件标签:{ controls: false, seek: true }
duration//指定媒体的自定义持续时间。
displayDuration//当前时间显示中显示媒体在“元数据加载”事件（启动时）上的持续时间。preload这仅在属性未设置为none（或根本未设置）并且您选择不显示持续时间（请参阅controls选项）时才有效。
invertTime//将当前时间显示为倒计时而不是增量计数器。
toggleInvert//允许用户单击以切换以上内容。
listeners//允许在默认处理程序之前将事件侦听器绑定到控件。查看defaults.js可用的侦听器。如果您的处理程序阻止事件 ( event.preventDefault()) 的默认值，则默认处理程序将不会触发。
captions//{ active: false, language: 'auto', update: false } active：切换字幕是否默认处于活动状态。language：设置要加载的默认语言（如果可用）。'auto' 使用浏览器语言。update：收听曲目变化和更新菜单。这对于某些流媒体库是必需的，但可能会导致无法选择语言选项）。
fullscreen//全屏:{ enabled: true, fallback: true, iosNative: false, container: null } enabled：切换是否应启用全屏。fallback: 允许回退到全窗口解决方案 ( true/ false/ 'force')。iosNative：进入全屏时是否使用原生 iOS 全屏（无自定义控件）——注意这对 iPadOS 没有影响。container: 播放器元素祖先的选择器，允许上下文内容在全屏模式下保持可见。非祖先被忽略。
ratio//强制所有视频的纵横比。格式是'w:h'- 例如'16:9'或'4:3'。如果未指定，则 HTML5 和 Vimeo 的默认设置是使用视频的原始分辨率。由于无法通过 SDK 从 YouTube 获得尺寸，因此强制将 16:9 作为合理的默认值。
storage//{ enabled: true, key: 'plyr' } enabled：允许使用本地存储来存储用户设置。key：要使用的键名。
speed//播放速度:{ selected: 1, options: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 4] } selected：默认播放速度。options：显示在 UI 中的速度选项。YouTube 和 Vimeo 将忽略 0.5-2 范围之外的任何选项，因此该范围之外的选项将自动隐藏。
quality//片源质量:{ default: 576, options: [4320, 2880, 2160, 1440, 1080, 720, 576, 480, 360, 240] } default是默认质量级别（如果它存在于您的源代码中）。options是要显示的选项。这用于过滤可用的来源。
loop//循环播放
ads//广告:{ enabled: false, publisherId: '', tagUrl: '' }
urls//如果您希望覆盖任何 API URL，那么您可以在此处执行此操作。您还可以为下载按钮设置自定义下载 URL。
vimeo//Vimeo嵌入选项 { byline: false, portrait: false, title: false, speed: true, transparent: false }
youtube//youtube嵌入选项 { noCookie: false, rel: 0, showinfo: 0, iv_load_policy: 3, modestbranding: 1 }
previewThumbnails//缩略图:{ enabled: false, src: '' } nabled：是否启用预览缩略图（必须由您生成）。src必须是字符串或字符串数组，表示包含图像 URL 的 VTT 文件的 URL。在下面了解有关预览缩略图的更多信息。
mediaMetadata//{ title: '', artist: '', album: '', artwork: [] } Media Session API 的MediaMetadata接口允许网页提供丰富的媒体元数据以在平台 UI 中显示。
markers//{ enabled: false, points: [] } enabled：是否启用标记。是一个对象points数组，其中代表以秒为单位的标记位置，并且是要显示的 HTML 字符串。{ time: number; label: string; }timelabel

Plyr API

示例方法使用：
player.play(); // Start playback
player.fullscreen.enter(); // Enter fullscreen

play()//播放
pause()//暂停
togglePlay(toggle)//播放与暂停之间切换
stop()//停止播放并重置为开始。
restart()//重新开始播放。
rewind(seekTime)//按指定的搜索时间倒回播放。如果没有传递参数，将使用默认的寻道时间。
forward(seekTime)//按指定的寻道时间快进。如果没有传递参数，将使用默认的寻道时间。
increaseVolume(step)//按指定步长增加音量。如果没有传递参数，将使用默认步骤。
decreaseVolume(step)//按指定步长增加音量。如果没有传递参数，将使用默认步骤。
toggleCaptions(toggle)//切换字幕显示。如果没有传递参数，它将根据当前状态进行切换。
fullscreen.enter()//进入全屏。如果不支持全屏，则使用后备“全窗口/视口”。
fullscreen.exit()//退出全屏。
fullscreen.toggle()//切换全屏。
airplay()//在支持的设备上触发播放对话框。
setPreviewThumbnails(source: PreviewThumbnailsOptions)//设置当前源的预览缩略图。
toggleControls(toggle)//切换控件（仅限视频）。采用可选的真值来强制打开/关闭它。
on(event, function)//为指定事件添加事件监听器。    
once(event, function)//为指定事件添加一次事件监听器。
off(event, function)//删除指定事件的事件侦听器。
supports(type)//检查对 MIME 类型的支持。
destroy()//销毁播放器

Plyr 监听

监听函数的 getter 和 setter

设置示例：
player.volume = 0.5; // Sets volume at 50%
player.currentTime = 10; // Seeks to 10 seconds

监听示例：
player.volume; // 0.5;
player.currentTime; // 10
player.fullscreen.active; // false;


isHTML5//返回一个布尔值，指示当前播放器是否为 HTML5。
isEmbed//返回一个布尔值，指示当前播放器是否为嵌入式播放器。
playing//返回一个布尔值，指示当前播放状态。
paused//返回一个布尔值，指示当前播放器是否暂停。
stopped//返回一个布尔值，指示当前播放器是否已停止。
ended//返回一个布尔值，指示当前播放器是否已完成播放。
buffered//返回一个介于 0 和 1 之间的浮点数，指示有多少媒体被缓冲
currentTime//获取或设置播放器的当前时间。设置器在几秒钟内接受一个浮点数。
seeking//返回一个布尔值，指示当前播放时间正在跳转。
duration//返回当前媒体的持续时间。
volume//获取或设置播放器的音量。setter 接受 0 到 1 之间的浮点数。
muted//获取或设置播放器的静音状态。setter 接受一个布尔值。
hasAudio//返回一个布尔值，指示当前媒体是否有音轨。    
speed//获取或设置播放器的速度。设置器接受配置中指定的选项中的值。通常最小值应为 0.5。
quality//获取或设置播放器的质量。设置器接受配置中指定的选项的值。
loop//获取或设置播放器的当前循环状态。setter 接受一个布尔值。
source//获取或设置播放器的当前源。setter 接受一个对象。
poster//获取或设置播放器的当前海报图像。设置器接受一个字符串；更新的海报图片的 URL。
previewThumbnails//获取或设置播放器的当前预览缩略图源。设置器接受一个字符串
autoplay//获取或设置播放器的自动播放状态。setter 接受一个布尔值。
currentTrack//按索引获取或设置字幕轨道。
language//获取或设置播放器的首选字幕语言。setter 接受 ISO 两个字母的语言代码。对语言的支持取决于您包含的字幕。如果您的字幕没有任何语言数据，或者如果您有多个轨道使用相同的语言，您可能想要使用currentTrack。
fullscreen.active//返回一个布尔值，指示当前播放器是否处于全屏模式。
fullscreen.enabled//返回一个布尔值，指示当前播放器是否启用了全屏。
pip//获取或设置播放器的画中画状态。setter 接受一个布尔值。目前仅支持 Safari 10+（MacOS Sierra+ 和 iOS 10+）和 Chrome 70+。
ratio//获取或设置视频纵横比。设置器接受与选项格式相同的字符串ratio。
download//获取或设置下载按钮的 URL。setter 接受包含有效绝对 URL 的字符串。