首页 > 代码库 > Video.js 简单的使用介绍
Video.js 简单的使用介绍
vedio.js 是一款视频播放插件，它会自动检测浏览器对 HTML5 的支持情况，如果不支持 HTML5 则自动使用 Flash 播放器。下面来介绍下它的使用：
引用video-js.cs样式文件和video.js
<link href=http://www.mamicode.com/"video-js.css" rel="stylesheet" type="text/css"><script src=http://www.mamicode.com/"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=http://www.mamicode.com/"wangmaohuijieshao.mp4" type=‘video/mp4‘ /> <!--<source src=http://www.mamicode.com/"http://video-js.zencoder.com/oceans-clip.webm" type=‘video/webm‘ /> <source src=http://www.mamicode.com/"http://video-js.zencoder.com/oceans-clip.ogv" type=‘video/ogg‘ />--> <track kind="captions" src=http://www.mamicode.com/"demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 --> <track kind="subtitles" src=http://www.mamicode.com/"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>
一些参数：
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);
Video.js 简单的使用介绍
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。