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