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

Z时代
2024-01-10
分类：IT

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}/>