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

时间: 2024-10-17 08:41:22

HTML5视频播放器accessible html5 video player的相关文章

jqm视频播放器,html5视频播放器,html5音乐播放器,html5播放器,video开发demo,html5视频播放示例,html5手机视频播放器

最近在论坛中看到了很多实用html5开发视频播放,音乐播放的功能,大部分都在寻找答案.因此我就在这里做一个demo,供大家相互学习.html5开发越来越流行了,而对于视频这一块也是必不可少的一部分.如何让你的网站占据优势,就要看你的功能和用户体验了.html5对video还是做了很多优惠的东西,我们使用起来很得心应手. 在过去 flash 是网页上最好的解决视频的方法,截至到目前还算是主流,像那些优酷之类的视频网站.虾米那样的在线音乐网站,仍然使用 flash 来提供播放服务.但是这种状况将会随

打造自己的html5视频播放器

前段时间重新学习了一下html5的video部分,以前只是停留在标签的使用上,这一次决定深入了解相关的API,并运用这些API打造一个简单的视频播放器.所谓“打造自己的”,就是要自己重写video标签的控制栏部分,实现包括播放.暂停.进度和音量控制.全屏等功能,并自定义控制栏的样式.这是我自己的视频播放器的演示地址(请用chrome打开): http://animademo.sinaapp.com/html5_video/ (^-^:鼠标中键点击链接,在新标签页中打开) 这是该播放器的代码地址,

关于Unity视频播放器插件 AVPro Video(三)360度全景视频播放

1.官网下载该插件或者我分享的链接: 链接:https://pan.baidu.com/s/1boGeJ8r 密码:mvbf 2.拖入官方做好的预制体"360SphereVideo"或者"360CubeVideo"(两种不同的360度全景)到场景中,并将场景中的摄像机拖动到"Sphere"下方并Resert 3.设置"AVPro Video Media Player"上的Media Player 控制组件即可(具体操作参考&q

基于JSON数据HTML5视频播放器js插件教程

一.安装 可以通过Bower来安装该视频播放器插件. bower install frame-player 在页面中引入frameplayer.css和frameplayer.js文件. <link rel="stylesheet" href="path-to/frameplayer.css"> <script src="path-to/frameplayer.js"></script> 二.Html结构 在页

video.js分段自动加载视频【html5视频播放器】

突发奇想的需求,要在官网上放一个一个半小时的视频教程-- 然而,加载成了问题,页面是cshtml的.net混合网站,不知道哪儿的限制,导致视频加不出来. 没有办法,只能前端想办法了. 于是将视频切割成4个 依次加载自动播放.效果还可以. 代码: 引入:<link rel="stylesheet" href="//cdn.bootcss.com/video.js/6.0.0-RC.5/alt/video-js-cdn.min.css"> <scrip

Html5视频播放器-VideoJS+Audio标签实现视频,音频及字幕同步播放

一,VideoJS介绍 引用脚本,videojs很为你着想,直接cdn了,你都不需要下载这些代码放入自己的网站 <link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet"> <script src="http://vjs.zencdn.net/c/video.js"></script> 如果需要支持IE8,这个js可以自动生成flash

超简单的html5视频播放器

效果: 代码很简单 js 1 define("html5_video_player", [ '../avalon-min'], function(avalon) { 2 function formatTime(seconds) { 3 var seconds = Math.round(seconds); 4 var minutes = Math.floor(seconds / 60); 5 seconds = Math.floor(seconds % 60); 6 minutes =

HTML5视频播放器

<div id="main"> <div id="demo" class="demo" style="width:68%; float:left;"> <video class="video" id="sp" width="100%" height="100%" controls preload  controls=&

一个html5视频播放器

具有播放视频,拖拽,自定义右键菜单,上传头像的功能 <!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>my videoPodcast</title> <style type="text/css"> *{ margin: 0; padding: 0; } #box{ width: