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>