一个轻量级的HTML5视频播放器,支持字幕和详细说明。有关详细信息,请阅读这篇
博客。
产品特点
-
提供了一个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>