video.js使用方法手册

文章标签: 帮助手册
  • :
  • 04-16 20:18
  • :
  • 44次
  • :
  • 0条
  • 0赞

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

video.js是非常流行的一款HTML5视频插件,使用起来也非常的简单,本文站长和大家分享如何在自己的网页里引入video.js插件。

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

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


下面站长一步一步的教大家如何在自己的网页里引入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代码:

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


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



您正在找的文章可能是:
热点文章
热点图文
最近更新
  • Copyright © aijquery.cn 爱jQuery-完全免费的jquery交流学习网站
  • 豫ICP备17037455号-1
  • 2018-11-06 15:50:08