Accessible HTML5 Video Player 轻量级的 HTML5 视频播放器

Question

Accessible HTML5 Video Player 是一款开源的轻量级播放器，采用 HTML5 视频播放技术，支持字幕显示、视频自由跳播、重播等功能。该 HTML5 视频插件由 paypal Accessibility 团队开发，兼容所有 Firefox、Chrome、以及 ie10 以上版本等浏览器、ie9 仅支持内部视频调用。

简洁清新的视频播放界面可以让你在很短的时间内喜欢上它，至少我是真的被它的界面吸引到了，有一点遗憾的是无法全屏，如果有知道的朋友可以向大家分享！

Accessible HTML5 Video Player 的调用也非常简单，只需几步就可以让你的网站拥有简洁优雅的视频 HTML5 播放功能。

特点

• 与自定义控件提供了一个 HTML5 视频播放器
• 支持字幕：只需要使用标准 HTML5 视频语法的 VTT 字幕文件
• 使用本地 HTML5 格式控制音量和进度显示
• 允许用户使用键盘和触屏方式访问
• 默认情况下提供设置字幕显示和关闭选项 (upon loading).
• 提供设置快进后退的秒数
• 宽度可调整至视频默认宽度
• 不依赖于其他项目。全部使用 vanilla JavaScript 编写
• JavaScript 不可用的时候，可食用浏览器的本地控件

使用方法

CSS 与 图像

在 HTML 文档的开头插入 CSS。您还需要上传 sprite 映像(或者使用自己的)，并调整 CSS 文件中的路径。

<link rel="stylesheet" href="/css/px-video.css" />

HTML

在 HTML 文档的正文中插入HTML 5 视频标记。替换视频、封面图和标题 URL。根据需要修改视频和备用图像的大小。

<div class="px-video-container" id="myvid">
    <div class="px-video-img-captions-container">
        <div class="px-video-captions hide" aria-hidden="true"></div>
        <video width="640" height="360" poster="media/foo.jpg" controls>
            <source src="foo.mp4" type="video/mp4" />
            <source src="foo.webm" type="video/webm" />
            <track kind="captions" label="English captions" src="media/foo.vtt" srclang="en" default />
            <div>
                <a href="foo.mp4">
                    <img src="media/foo.jpg" width="640" height="360" alt="download video" />
                </a>
            </div>
        </video>
    </div>
    <div class="px-video-controls"></div>
</div>

JavaScript

在 HTML 文档的关闭主体元素之前插入两个 JavaScript 文件。添加脚本元素来初始化视频。选项被传入 JSON 格式。可选参数如下：

参数	描述	数据类型	是否必须	默认值
videoId	小部件容器的ID的值。	string	必须
captionsOnDefault	表示是在加载时显示还是隐藏标题。	Boolean	可选	true
seekInterval	可倒转和快速前进的秒数。	number	可选	10
videoTitle	视频的简短标题；用于播放按钮上的aria-标签属性，以澄清读者将播放的内容。	string	可选	Play
debug	打开或关闭控制台日志	Boolean	可选	false

<script src="js/strings.js"></script>
<script src="js/px-video.js"></script>
<script>
// Initialize
new InitPxVideo({
    "videoId": "myvid",
    "captionsOnDefault": true,
    "seekInterval": 20,
    "videoTitle": "clips of stand-up comedy",
    "debug": true
});
</script>

React 版本

Reaction 版本被设计成可以很容易地集成到您的 Reaction 代码库中。视频响应组件名为 PXvideo 并具有以下API：

<PXVideo
    sources={[
    'https://www.paypalobjects.com/webstatic/mktg/videos/PayPal_AustinSMB_baseline.mp4',
    'https://www.paypalobjects.com/webstatic/mktg/videos/PayPal_AustinSMB_baseline.webm'
  ]}
  caption={{
    label: 'English captions',
    source: 'media/captions_PayPal_Austin_en.vtt',
    lang: 'EN',
    default: true
  }}
  poster="media/poster_PayPal_Austin2.jpg"
  width="640"
  height="360"
  controls={true}
  id="myvid"
  fallback={true}
  seekInterval={20}
  debug={true}
/>

浏览器兼容

• Chrome：全面支持
• Safari：全面支持
• Firefox：全面支持
• Internet Explorer 10, 11：全面支持
• Internet Explorer 9: native video player used (aesthetic choice since HTML5 range input and progress element are not supported).
• Internet Explorer 8: renders fallback content of video element (in the demo, this is an image linked to the video file).
• Smartphones and tablets: controls and captions are not customized as both are natively supported in latest versions.

相关链接

• github 地址：https://github.com/paypal/accessible-html5-video-player