参考文献: | |
---|---|
1、赵达-腾讯全栈开发工程师; | 2、 video.js使用技巧 -歪麦博客; + Video.js 简书使用; |
3、 video-js 官网; | |
4、github video-js 地址; | 5、 青蛙哥的video.js; |
6、github 基本videoJs下载地址; |
对于在安卓手机上 poster属性展示封面图的兼容问题,可以在视频上层加一个div图片,视频播放是显示video,隐藏该图片即可。
http://www.cnblogs.com/Renyi-Fan/p/9539663.html -API详解
vjs-big-play-centered - 居中播放按钮
vjs-fluid - 视频auto,自适应容器大小
<video id="my-player" class="video-js vjs-big-play-centered vjs-fluid" controls preload="none" poster="http://img3.cache.netease.com/photo/0001/2009-09-14/5J6G8BHU0G5V0001.JPG" data-setup='{}'>
<source src="../../img/videoxs.mp4" type="video/mp4"></source>
<p class="vjs-no-js">
当前浏览器不支持 video直接播放!
</p>
</video>
1、默认属性
preload = "auto" 是否预加载数据
值:
auto - 页面加载后载入整个数据
meta - 页面加载后载入数据
none - 不载入视频
autoplay - 如果出现该属性,则视频在就绪后马上播放
controls - 如果出现该属性,则向用户显示控件,比如播放按钮,双击全屏播放。
muted - 音频输出静音
/* 隐藏控制条 */
::-webkit-media-controls{
opacity: 0;
cursor: pointer;
}
autoplay 在 Chrome浏览器上不能自动播放
,原因可能在于 视频体积过大 或者 视频没有放在根目录下。
解决办法:muted 属性
,在高版本的浏览器下,对视频静音后,可以保证自动播放。
<video id="video" class="" poster="images/icon-banner.jpg" preload="meta" autoplay="" loop="" muted >
<source src="https://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />
</video>
2、视频暂停
这里主要运用到了play() ;pause()这两个事件。
/* 点击视频时 暂停/开始 */
var video1=document.getElementById("video");
video1.onclick=function(){
if(video1.paused){
video1.play();
}else{
video1.pause();
}
}
/* 点击图标后视频 暂停/开始 */
var video2=document.getElementById("videoPlay1");
var video3=document.getElementById("video");
video2.onclick=function(){
if(video3.paused){
video3.play();
}else{
video3.pause();
}
}
/* 点击视频后图标 隐藏/显示 */
$(function() {
$(".m-video-header .swiper-slide").click(function(){
$("#videoPlay1").toggle();
});
})
大致结构:
3、videojs插件:
//默认调用
var options = {};
var player = videojs("example_video_1", options, {
"autoplay":'muted',
"loop": 'true', //循环
controlBar: {
captionsButton: false,
chaptersButton : false,
liveDisplay:false,
playbackRateMenuButton: false,
subtitlesButton:false
}
}, function(){
this.on('loadeddata',function(){
console.log(this)
})
this.on('ended',function(){
this.pause();
this.hide()
})
});
player.autoplay('muted');
player.loop('true');
结构可参考上面的使用技巧。