Video.js的简单使用介绍

2019独角兽企业重金招聘Python工程师标准>>>

vedio.js 是一款视频播放插件，它会自动检测浏览器对 HTML5 的支持情况，如果不支持 HTML5 则自动使用 Flash 播放器。下面来介绍下它的使用：

引用video-js.cs样式文件和video.js

<link href="video-js.css" rel="stylesheet" type="text/css">
<script src="video.js"></script>

 

设置flash播放器的路径，如果你的浏览器不支持html5，将会使用flash播放

<script>
    videojs.options.flash.swf = "video-js.swf";
</script>

 

body部分，这里支持三种格式MP4,webm,ogg，也可以设置网络路径，poster：视频的封面图片

<video id="example_video_1" class="video-js vjs-default-skin" controls preload="auto" width="1280" height="800"
    poster="http://video-js.zencoder.com/oceans-clip.png"
    data-setup="{}">
    <source src="wangmaohuijieshao.mp4" type='video/mp4' />
    <!--<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
    <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />-->
    <track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
    <track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
</video>

 

自动播放：

<script type="text/javascript">
    var myPlayer = videojs('example_video_1');
    videojs("example_video_1").ready(function () {
        var myPlayer = this;
        myPlayer.play();
    });
</script>

 

默认情况下，大的播放按钮是被定在左上角的，这样就不会覆盖视频内容。如果你想让这个播放按钮剧中，你可以给你的video标签添加额外的vjs-big-play-center样式，比如：

<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-center" controls preload="auto" width="1280" height="800"
    data-setup="{}">

如果需要改变成为自己喜欢的播放按钮，可以这样定义样式

.video-js .vjs-big-play-button { /* 重写播放按钮的样式 */ }

 

一些参数：

var myPlayer = videojs(“example_video_1″);//获取对象,example_video_1就是video标签的id值　
myPlayer.play();//播放
myPlayer.pause();//暂停
var whereYouAt = myPlayer.currentTime();//获取播放进度：
myPlayer.currentTime(120);//设置播放进度：
var howLongIsThis = myPlayer.duration();//视频持续时间，加载完成视频才可以知道视频时长，且在flash情况下无效
var whatHasBeenBuffered = myPlayer.buffered();//缓冲，就是返回下载了多少
var howMuchIsDownloaded = myPlayer.bufferedPercent();//百分比的缓冲
var howLoudIsIt = myPlayer.volume();//获取声音大小
myPlayer.volume(0.5);//设置声音大小（0-1之间）
var howWideIsIt = myPlayer.width();//取得视频的宽度
myPlayer.width(640);//设置宽度
var howTallIsIt = myPlayer.height();//获取高度
myPlayer.height(480);//设置高度：
myPlayer.size(640,480);//一步到位的设置大小：
myPlayer.enterFullScreen();//全屏

//自定义事件
var myFunc = function(){
// Do something when the event is fired
};
//添加事件
myPlayer.addEvent(“eventName”, myFunc);
//删除事件
myPlayer.removeEvent(“eventName”, myFunc);
//事件绑定
myPlayer.on("ended", function(){
    console.log("end", this.currentTime());
});

事件类型：
durationchange
ended //播放结束
firstplay
fullscreenchange
loadedalldata
loadeddata
loadedmetadata
loadstart
pause //暂停
play  //播放
progress
seeked
seeking
timeupdate
volumechange
waiting
resize inherited

 

 

转载于:https://my.oschina.net/u/3666693/blog/1819404