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

  • 相关阅读:
    UVA 11488 Hyper Prefix Sets (字典树)
    UVALive 3295 Counting Triangles
    POJ 2752 Seek the Name, Seek the Fame (KMP)
    UVA 11584 Partitioning by Palindromes (字符串区间dp)
    UVA 11100 The Trip, 2007 (贪心)
    JXNU暑期选拔赛
    计蒜客---N的-2进制表示
    计蒜客---线段的总长
    计蒜客---最大质因数
    JustOj 2009: P1016 (dp)
  • 原文地址:https://www.cnblogs.com/dglives/p/3987585.html
Copyright © 2011-2022 走看看