HTML5视频播放器accessible html5 video player-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_16836/article/details/82609035

本文介绍了一个开源的轻量级HTML5视频播放器accessiblehtml5videoplayer的使用方法，包括如何调用其CSS样式、HTML代码结构及JS脚本，并提供了一个简单的demo演示和下载链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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演示下载