在HTML5中提供了video标签来解决视频播放的问题，这是一件好事，但是各浏览器对HTML5 video的UI实现都不一样，因为在W3C规范中，并没有关于UI效果的规定。

之前也有一些HTML5 video播放器的开源产品，最近Paypal也开源了一个无障碍的HTML5 Video播放器，下面我们来看看效果：

Demo

网址：http://paypal.github.io/accessible-html5-video-player/

使用方法

CSS and Image

在页面中引入播放器CSS：

<link rel="stylesheet" href="/css/px-video.css" />

HTML

在页面中播放video标签，并且根据实际情况插入不同兼容的视频格式。还可以插入vtt格式的字幕文件。还可以给出一个不支持video标签浏览器的提示图片。

<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>

JavaScript

在页面中引入HTML5 video播放器的js文件，使用new InitPxVideo触发播放器生效:

<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>

浏览器支持情况

• Chrome: full support.
• Safari: full support.
• Firefox: full support.
• Internet Explorer 10, 11: full support.
• Internet Explorer 9: native video player used (aesthetic choice since HTML5 range input and progress element are not supported).
• Internet Explorer 8: renders fallback content of video element (in the demo, this is an image linked to the video file).
• Smartphones and tablets: controls and captions are not customized as both are natively supported in latest versions.

项目地址

https://github.com/paypal/accessible-html5-video-player

扫码关注w3ctech微信公众号