accessible html5 video player 是一款开源的轻量级播放器,采用HTML5视频播放技术,支持字幕显示、视频自由跳播、重播等功能。该html5视频插件由paypal Accessibility 团队开发,兼容所有Firefox、chrome、以及ie10以上版本等浏览器、ie9仅支持内部视频调用。
简洁清新的视频播放界面可以让你在很短的时间内喜欢上它,至少我是真的被它的界面吸引到了,有一点遗憾的是无法全屏,如果有知道的朋友可以向大家分享!
accessible html5 video player 的调用也非常简单,只需几步就可以让你的网站拥有简洁优雅的视频HTML5播放功能。
使用方法:
插入css样式
<link rel="stylesheet" href="/css/px-video.css" />
HTML代码结构
<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>
js调用:在body结束标签前插入以下代码
<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>