zoukankan      html  css  js  c++  java
  • HTML5视频播放器accessible html5 video player

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

  • 相关阅读:
    android 的 ExpandableListView Example Tutorial
    EOS token 代币兑换的资料
    EOS 的网站及资料doc
    Cardano(ADA), EOS, RChain(RHOC), Aeternity(AE) 都是极其好的币
    zcash 的资料
    office很抱歉遇到一些临时服务器问题
    win10windows无法创建快捷方式 请检查磁盘
    FYI是什么意思?
    Wamp win10 1077error
    如何注销考拉?
  • 原文地址:https://www.cnblogs.com/dglives/p/3987585.html
Copyright © 2011-2022 走看看