Plyr.js 简单轻量级 HTML5 视频在线播放器

Question

Plyr.js 简单轻量级 HTML5 视频在线播放器，支持音频和视频两格式,包含自定义的控制选项切换播放，调整音量，完全支持 WebVTT 字幕和全屏幕播放。它只支持现代浏览器，轻量级方便和可定制的媒体播放器。

特性

• 可访问性 - 完全支持字幕和屏幕阅读器
• 轻量级 - 压缩后只有 4.8Kb
• 可定制 - 外观可以根据需要进行调整
• 语义化 - 使用 HTML5 的输入框进行音量和进度的调整
• 快速响应 - 就像你预期的那样
• 音频和视频- 支持视频和纯音频
• API - 易用 API
• 向下兼容 - 如果浏览器不支持，则自动使用内建播放器
• 全屏支持 -支持原生全屏和退出全屏
• 无依赖 - 使用原生 JS 编写，不需要 jQuery

使用方法

安装

查看 docs/index.html 和 docs/dist/docs.js 获取安装的例子。

注意，除非你让源文件包含 http 或 https，否则 index.html 文件需要放到一个 web服务器（比如 Apache, Nginx, IIS 或 similar）上来浏览。例如将 //cdn.plyr.io/1.3.5/plyr.js 变成 https://cdn.plyr.io/1.3.5/plyr.js。

Bower

你可以通过 bower 来获取 Plyr：

bower install plyr

更多关于安装依赖的信息请查看 Bower 文档。

CDN

如果你想使用我们的 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 文件。

CSS

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

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

SVG

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

(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");

HTML

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

<div class="player">
    <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 class="player">
    <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 class="player">
    <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.setup({...}) 将下面的选项传入 setup 方法。

Option	Type	Default	Description
enabled	Boolean	true	Completely disable Plyr. This would allow you to do a User Agent check or similar to programmatically enable or disable Plyr for a certain UA. Example below.
debug	Boolean	false	Display debugging information in the console
controls	Array, Function or Element	['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen']	If a function is passed, it is assumed your method will return either an element or HTML string for the controls. Three arguments will be passed to your function; id (the unique id for the player), seektime (the seektime step in seconds), and title (the media title). See CONTROLS.md for more info on how the html needs to be structured.
settings	Array	['captions', 'quality', 'speed', 'loop']	If the default controls are used, you can specify which settings to show in the menu
i18n	Object	See defaults.js	Used for internationalization (i18n) of the text within the UI.
loadSprite	Boolean	true	Load the SVG sprite specified as the iconUrl option (if a URL). If false, it is assumed you are handling sprite loading yourself.
iconUrl	String	null	Specify a URL or path to the SVG sprite. See the SVG section for more info.
iconPrefix	String	plyr	Specify the id prefix for the icons used in the default controls (e.g. "plyr-play" would be "plyr"). This is to prevent clashes if you're using your own SVG sprite but with the default controls. Most people can ignore this option.
blankVideo	String	https://cdn.plyr.io/static/blank.mp4	Specify a URL or path to a blank video file used to properly cancel network requests.
autoplay²	Boolean	false	Autoplay the media on load. If the autoplay attribute is present on a <video> or <audio> element, this will be automatically set to true.
autopause¹	Boolean	true	Only allow one player playing at once.
seekTime	Number	10	The time, in seconds, to seek when a user hits fast forward or rewind.
volume	Number	1	A number, between 0 and 1, representing the initial volume of the player.
muted	Boolean	false	Whether to start playback muted. If the muted attribute is present on a <video> or <audio> element, this will be automatically set to true.
clickToPlay	Boolean	true	Click (or tap) of the video container will toggle play/pause.
disableContextMenu	Boolean	true	Disable right click menu on video to help as very primitive obfuscation to prevent downloads of content.
hideControls	Boolean	true	Hide video controls automatically after 2s of no mouse or focus movement, on control element blur (tab out), on playback start or entering fullscreen. As soon as the mouse is moved, a control element is focused or playback is paused, the controls reappear instantly.
resetOnEnd	Boolean	false	Reset the playback to the start once playback is complete.
keyboard	Object	{ focused: true, global: false }	Enable keyboard shortcuts for focused players only or globally
tooltips	Object	{ controls: false, seek: true }	controls: Display control labels as tooltips on :hover & :focus (by default, the labels are screen reader only). seek: Display a seek tooltip to indicate on click where the media would seek to.
duration	Number	null	Specify a custom duration for media.
displayDuration	Boolean	true	Displays the duration of the media on the "metadataloaded" event (on startup) in the current time display. This will only work if the preload attribute is not set to none (or is not set at all) and you choose not to display the duration (see controls option).
invertTime	Boolean	true	Display the current time as a countdown rather than an incremental counter.
toggleInvert	Boolean	true	Allow users to click to toggle the above.
listeners	Object	null	Allows binding of event listeners to the controls before the default handlers. See the defaults.js for available listeners. If your handler prevents default on the event (event.preventDefault()), the default handler will not fire.
captions	Object	{ active: false, language: 'auto', update: false }	active: Toggles if captions should be active by default. language: Sets the default language to load (if available). 'auto' uses the browser language. update: Listen to changes to tracks and update menu. This is needed for some streaming libraries, but can result in unselectable language options).
fullscreen	Object	{ enabled: true, fallback: true, iosNative: false, container: null }	enabled: Toggles whether fullscreen should be enabled. fallback: Allow fallback to a full-window solution (true/false/'force'). iosNative: whether to use native iOS fullscreen when entering fullscreen (no custom controls). container: A selector for an ancestor of the player element, allows contextual content to remain visual in fullscreen mode. Non-ancestors are ignored.
ratio	String	null	Force an aspect ratio for all videos. The format is 'w:h' - e.g. '16:9' or '4:3'. If this is not specified then the default for HTML5 and Vimeo is to use the native resolution of the video. As dimensions are not available from YouTube via SDK, 16:9 is forced as a sensible default.
storage	Object	{ enabled: true, key: 'plyr' }	enabled: Allow use of local storage to store user settings. key: The key name to use.
speed	Object	{ selected: 1, options: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2] }	selected: The default speed for playback. options: The speed options to display in the UI. YouTube and Vimeo will ignore any options outside of the 0.5-2 range, so options outside of this range will be hidden automatically.
quality	Object	{ default: 576, options: [4320, 2880, 2160, 1440, 1080, 720, 576, 480, 360, 240] }	default is the default quality level (if it exists in your sources). options are the options to display. This is used to filter the available sources.
loop	Object	{ active: false }	active: Whether to loop the current video. If the loop attribute is present on a <video> or <audio> element, this will be automatically set to true This is an object to support future functionality.
ads	Object	{ enabled: false, publisherId: '', tagUrl: '' }	enabled: Whether to enable advertisements. publisherId: Your unique vi.ai publisher ID. tagUrl is a URL for a custom VAST tag if you're not using Vi.
urls	Object	See source.	If you wish to override any API URLs then you can do so here. You can also set a custom download URL for the download button.
vimeo	Object	{ byline: false, portrait: false, title: false, speed: true, transparent: false }	See Vimeo embed options. Some are set automatically based on other config options, namely: loop, autoplay, muted, gesture, playsinline
youtube	Object	{ noCookie: false, rel: 0, showinfo: 0, iv_load_policy: 3, modestbranding: 1 }	See YouTube embed options. The only custom option is noCookie to use an alternative to YouTube that doesn't use cookies (useful for GDPR, etc). Some are set automatically based on other config options, namely: autoplay, hl, controls, disablekb, playsinline, cc_load_policy, cc_lang_pref, widget_referrer
previewThumbnails	Object	{ enabled: false, src: '' }	enabled: Whether to enable the preview thumbnails (they must be generated by you). src must be either a string or an array of strings representing URLs for the VTT files containing the image URL(s). Learn more about preview thumbnails below.

更多文档请访问 github 地址：https://github.com/sampotts/plyr