video.js—插件下载及使用方法手册


  • :
  • 03-25 14:26
  • :
  • 308次
  • :
  • 0条
  • 0赞

简介本文主要讲述在网页里引入video.js的具体方法步骤和一些相关的配置方法。

video.js是一款使用起来非常简单,并且十分流行的HTML5视频插件,如果我们的网页里需要显示视频,那么就用这个video.js插件,会非常容易的在我们的网页里显示视频。

下面是站长准备的一个简单的在线实例演示:

video.js-在线播放视频实例演示

video.js的官网地址:

http://videojs.com/

video.js的Github地址:

https://github.com/videojs/video.js
//这里下载的都是未编译的源码

video.js的免费CDN加速地址:

http://www.bootcdn.cn/video.js/
//这里有各个版本的video.js 除了可以直接引入到我们的网页里外,还能直接下载所需要的源文件

如果上面的地址都打不开了,可以点下面的地址,用百度云下载:

链接: https://pan.baidu.com/s/1voXm5qq3rSXTArYtsyiM-A 密码: cyeu


下面站长一步一步的教大家如何在自己的网页里引入video.js视频插件:

第一步:引入video.js插件的js文件和css样式文件:

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

第二步:配置相关的HTML代码:

<video id="my-video" class="video-js" controls preload="auto" width="300" height="400" poster="m.png" data-setup="{}">
    <source src="视频地址" type="video/mp4">
    <p class="vjs-no-js">
        浏览器不支持HTML5视频播放
    </p>
</video>

PS:上面代码中:
preload:预载
controls:是否显示控制工具栏
poster:封面图片

如果页面里对视频的要求不高,到上面第二步结束,就行了,打开页面,页面里就已经能正常加载和显示视频了,如果需要对视频一些其它的操作,比如让它自动播放,批量加载等,就需要进行JS的配置了。


第三步:相关的JS代码的配置:

<script type="text/javascript">	
//打开页面时自动播放视频:
var myPlayer = videojs('my-video');	
videojs("my-video").ready(function(){		
        var myPlayer = this;		
        myPlayer.play();	
});

//或者:
var myPlayer=videojs('my-video',{},function onPlayerReady(){
    this.play();
    this.on('ended', function() {
        videojs.log('播放结束了!');
    });
});
</script>

常用的其它功能:

this.pause()  : 暂停
this.dispose()  : 销毁
this.on('click',fn)  :  监听
this.trigger('dispose')  : 触发

好了,我们要在自己的网页里引入video.js视频插件,就是这么简单,更多的有关video.js插件的使用可以关注本站的video.js插件专题。



您正在找的文章可能是: