`

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

 

分享到:
评论

相关推荐

    HTML5视频播放器accessible-html5-video-player.zip

    Accessible HTML5 Video Player 是一个轻量级的 HTML5 视频播放器,支持自定义字幕。功能特征:与自定义控件提供了一个 HTML5 视频播放器支持字幕:只需要使用标准 HTML5 视频语法的 VTT 字幕文件使用本地 HTML5 ...

    access-html5-video-player:可访问HTML5视频播放器

    可访问HTML5视频播放器 它是什么? 轻巧HTML5视频播放器,包括对字幕和屏幕阅读器辅助功能的支持。 有关详细信息,请阅读PayPal Engineering博客上的博客文章“ ”(更新的链接)。 另请参见“ 。 产品特点 为HTML5...

    HTML5 For Web Designers

    What do accessible, content-focused standards-based web designers and front-end developers need to know? And how can we harness the power of HTML5 in today’s browsers? In this brilliant and ...

    Accessible-Media-Player:Nomensa的可访问媒体播放器

    配置有关实现Accessible Media Player的信息,请参阅此git存储库根目录中的Accessible-media-player_2.0_documentation.pdf文件。 除此之外,还在此存储库的目录内提供了许多示例配置。笔记JW Player中当前存在一个...

    Pro HTML5 Accessibility

    This book aims to help web designers and developers come to grips with building exciting, accessible, and usable web sites/applications with HTML5. The book looks at using HTML5 to serve the needs of ...

    HTML5 for Masterminds.

    The codes are distributed throughout the book in a specific order to gradually introduce complex subjects and make them accessible to everyone. The goal of HTML5 for Masterminds is to make you ...

    HTML5 CSS3 in The Real World

    employ native HTML5 video and audio in your pages use web fonts to enrich a site’s typography make web applications accessible using WAI-ARIA make the most of the new HTML form elements. This easy-to...

    Beginning HTML5 and CSS3 For Dummies

    Introducing you to the syntax and structure of the languages, this helpful guide shows you how to create and view a web page, explains ideal usage of HTML5 and CSS3, walks you through the CSS3 rules ...

    Introducing HTML5, 2nd Edition

    HTML5 continues to evolve, browsers are implementating at break-neck speed and HTML5 web sites spring up like flowers after rain. More than ever, you need to get acquainted with the powerful new ...

    Accessible接口读取软件UI元素

    Accessible接口读取软件UI元素,可遍历任何软件窗口信息,包括子句柄

    [HTML5.and.CSS3(2nd,2013.10)].Brian.P.Hogan.文字版.pdf

    HTML5 and CSS3 power today’s web applications, with semantic markup, better forms, native multimedia, animations, and powerful APIs. You’ll get hands-on with all the new features with practical ...

    Accessible.tlb

    Accessible.tlb

    HTML5 and CSS3 Transition, Transformation, and Animation

    HTML5 and CSS3 technologies are changing the face of the web, they are making the way we build websites, add new features, and develop more immersive experiences much faster and accessible to the ...

    Introducing HTML5

    * new semantics and structures to help your site become richer and more accessible * how to apply the most important JavaScript APIs that are already implemented * the uses of native multimedia ...

    Foundation-HTML5-with-CSS3.pdf 英文原版

    If you want to get into developing web sites, the most important thing you’ll need is a solid understanding of Hypertext Markup Language, or HTML—the most common language used to write web site ...

    易语言基于accessible接口打造获取QQ窗口相关信息

    易语言基于accessible接口打造获取QQ窗口相关信息。@兔子君。

    Apress.Practical.HTML5.Projects.2012

    Practical HTML5 Projects is a collection of valuable web techniques that any developer or designer can use. This book is all about saving time. Busy web developers should not have to plow through ...

    Using SVG with CSS3 and HTML5

    With this practical guide, you’ll learn how to use SVG not only for illustrations but also as graphical documents that you can integrate into complex HTML5 web pages, and style with custom CSS....

Global site tag (gtag.js) - Google Analytics