Accessible HTML5 Video Player 轻量级的 HTML5 视频播放器 - 文章教程

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

发布于 2020-10-29 字数 5292 浏览 2149 评论 0

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

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

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

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.

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

时光倒影

文章 0 评论

qq_YyjhCs

文章 0 评论

三人与歌

文章 0 评论

┼──瘾||

文章 1 评论