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>

demo演示      demo下載