w3ctech

Paypal开源:无障碍 HTML5 Video播放器

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

之前也有一些HTML5 video播放器的开源产品,最近Paypal也开源了一个无障碍的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微信

扫码关注w3ctech微信公众号

共收到2条回复

  • 这个使用方法繁琐了点,那些Div要让它自动生成

    回复此楼
  • @董查查 结构可以自己优化哈,不一定像他这样,最重要的是div的id,还有video标签。

    回复此楼