HTML5视频播放器accessible html5 video player

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> 相关推荐
WebVincent 2020-06-06
行吟阁 2020-04-10
wusiye 2020-10-23
表格的现在还是较为常用的一种标签,但不是用来布局,常见处理、显示表格式数据。在HTML网页中,要想创建表格,就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...
gufudhn 2020-08-09
nercon 2020-08-01
swiftwwj 2020-07-21
nercon 2020-07-16
饮马天涯 2020-07-05
Lophole 2020-06-28
gufudhn 2020-06-12
csstpeixun 2020-06-11
huzijia 2020-06-09
行吟阁 2020-05-30
qsdnet我想学编程 2020-05-26
gufudhn 2020-05-25
qsdnet我想学编程 2020-05-19
suixinsuoyu 2020-05-15
HSdiana 2020-05-15