一个轻量级的HTML5视频播放器
摘要：一个轻量级的HTML5视频播放器
一个轻量级的HTML5视频播放器，支持字幕和详细说明。有关详细信息，请阅读这篇博客。
注* Video元素的浏览器支持情况
产品特点
- 提供了一个HTML5视频播放器自定义控件。
- 支持字幕;只需使用标准的HTML5视频语法，创建一个VTT的字幕文件。
- 使用原生的HTML5 form 控件控制音量（输入范围），并指示进度（progress元素）。
- 支持只有键盘用户访问。
- 可在加载时，打开或关闭字幕选项。
- 可设定起始播放的时间，或控制播放进度。
- 播放器宽度与Video 元素的宽度一致。
- 没有依赖关系。使用原生的JavaScript写成。
- 如果JavaScript不可用，将由浏览器的原生播放。
如何使用
CSS和图像
插入HTML文档header部分。您还需要上传的图片（或使用您自己的），调整在CSS文件的路径。
<link rel="stylesheet" href="/css/px-video.css" />
插入你的HTML文档的Body 部分HTML5视频标记。更换视频，发布者，标题和网址。根据需要修改视频和备用图像的大小。
<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[必埴]
captionsOnDefault: 在加载是否隐藏标题[可选，默认为true]
seekInterval：快退和快进的秒数（整数）[可选，默认是10]
videoTitle：视频的简称; [可选，默认为“Play”]
debug：打开控制台日志或关闭[可选，默认为false]
<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>
相关文章
最新发布
阅读排行
热门文章
猜你喜欢