HTML5 视频流行插件之video.js_html-js-css

概述Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库，Video.js 自动检测浏览器对 HTML5 的支持情况，如果不支持 HTML5 则自动使用 Flash 播放器。（要支持ie低版

VIDeo.Js 是一个通用的在网页上嵌入视频播放器的 Js 库，VIDeo.Js 自动检测浏览器对 HTML5 的支持情况，如果不支持 HTML5 则自动使用 Flash 播放器。

（要支持IE低版本请下载5.4.3版）点击进入官网

下载地址：http://www.jq22.com/jquery-info404

也可以使用cdn

<link href="//cdn.bootCSS.com/vIDeo.Js/7.0.0-Alpha.1/alt/vIDeo-Js-cdn.CSS" rel="stylesheet">script src="//cdn.bootCSS.com/vIDeo.Js/7.0.0-Alpha.1/vIDeo.min.Js"></script>

首先给vIDeo标签加上 vIDeo-Js 的类

data-setup="{ }" 使控件样式发生改变

<!DOCTYPE HTMLHTML lang="en"head>    Meta charset="UTF-8"Title>vIDeoJs</link rel="stylesheet" href="vIDeo-Js.min.CSS"bodyvIDeo class="vIDeo-Js" controls data-setup="{}" wIDth="960" height="400">        source ="data/imooc.mp4"sourcevIDeo>        script ="vIDeo.min.Js"HTML>

@H_403_131@

vJs-big-play-centered 类，控制按钮居中显示

="vIDeo-Js vJs-big-play-centered">

preload="auto" 预加载

线上观看时比较直观

="400" preload="auto">

poster=" " 设置封面图

="660"="auto" poster="data/poster.jpg">

vIDeoJs是封装好的方法

.ready 表示视频已就绪，类似于 canplay（其实完全不如canplay，下面案例有体现）

.currentTime() 当前时间

ID="myvIDeo" class>        var myvIDeo=vIDeoJs("myvIDeo);        myvIDeo.ready(function(){            console.log(已就绪);        });        //绑定在window上，点击可获取当前时间进度        onclick(){            console.log(myvIDeo.currentTime());        }    >

（报错是因为之前有语法错误，已修正。这里贴的代码都是木有问题的）

current(time) 设置当前播放时间

);        100秒处开始播放        myvIDeo.currentTime(100);        myvIDeo.ready(>

.duration() 获取视频总时长

(){            在ready中显示NaN            console.log(this.duration());        });        绑定在window上(){            console.log(myvIDeo.duration());        }    >

在这里可以看出 ready不如canplay

因为canplay中已经可以获取到总时长，而ready中还是NaN，有点辣鸡啊

buffered() 视频已经缓冲了多少

不在本地测试比较明显

缓冲.buffered());        });        >

volume() 获取和设置声音

获取声音        console.log(myvIDeo.volume());        设置声音        myvIDeo.volume(.5);        console.log(myvIDeo.volume());    >

wIDth() height() 获取和设置视频的宽高

获取宽高        console.log(myvIDeo.wIDth());        console.log(myvIDeo.height());        myvIDeo.wIDth(300);        myvIDeo.height(200);        console.log(myvIDeo.wIDth());        console.log(myvIDeo.height());    >

如何查看更多方法：

);        console.log(myvIDeo);    >

事件监听 on

);        myvIDeo.on(ended,视频播放结束);        })        myvIDeo.on(pause点击暂停play点击播放volumechange声音改变timeupdate视频播放中seeked视频跳转结束seeking视频跳转中);        })    >

差不多跟原生vIDeo是一样一样的

总结

以上是内存溢出为你收集整理的HTML5 视频流行插件之video.js全部内容，希望文章能够帮你解决HTML5 视频流行插件之video.js所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/web/1026688.html

HTML5 视频流行插件之video.js

发表评论

评论列表（0条）