videoJs实现手机视频播放功能

一、videojs简介

我们项目中用的是angular开发的手机H5的app，今天有一个需求是js播放视频功能，就上网搜索了一下，找到了videoJs，Video.js是一款web视频播放器，支持html5和flash两种播放方式。

二、videojs初始化

video.js有两种初始化方式，一种是在video的html标签之中，一种是使用js来进行初始化。两种都需先引入video.js和video-js.css。建议直接下载到项目中进行引用。

<link href="//vjs.zencdn.net/7.3.0/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/7.3.0/video.min.js"></script>

三、在html中引用video

<video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto"width="640" height="264"data-setup="{}" webkit-playsinline='true' playsinline='true' x-webkit-airplay='true'x5-video-player-type='h5' x5-video-player-fullscreen='true' x5-video-ignore-metadata='true'><source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></video>

四、在js中对video进行初始化和配置

    //在不支持html5的浏览中会自动使用flash播放videojs.options.flash.swf = "video-js.swf";//初始化videovar myPlayer = videojs('myVideo', {controls: true,//放器是否具有用户可以与之交互的控件controlBar: {fullscreenToggle: false //禁用全屏控件}// loop: true,//循环播放// 更多配置.....});myPlayer.ready(function () {//在回调函数中，this代表当前播放器，//可以调用方法，也可以绑定事件。});//当video播放内容发生变化时调用，用于多条记录播放。$scope.videoChange = function (u, index) {if (isNull(index)) {index = 0;}$scope.index = index;myPlayer.src(u);  //重置video的srcmyPlayer.load(u);  //使video重新加载}

五、设置video播放按钮位置的css

body,html{width: 100%;height: 100%;background-color: #ffffff;
}
ul {padding: 0;
}
.uploadImg{height: 32px;line-height: 32px;color: #27cafd;padding-left: 1rem;font-weight: 500;border-bottom: 1px solid #dbdbdb;}
.myImg{padding-left: 1rem;padding-top: 1rem;
}
.hei50{height: 50%;
}
.myImg,  .tm-m-photos-thumb {zoom: 1;
}
.tm-m-photos-thumb {list-style-type: none;position: absolute;height: auto;
}
.tm-m-photos-thumb li {float: left;border: 2px solid #f2f2f2;padding: 2px;margin-right: 1.9rem;position: relative;transition: border-color .2s ease-out;
}
.tm-m-photos-thumb .tm-current {border: 2px solid #f23d6a;border-radius: 2px;-webkit-border-radius: 2px;-moz-border-radius: 2px;-o-border-radius: 2px;cursor: auto;
}.tm-photos-arrow {width: 0;height: 0;line-height: 0;font-size: 0;border: 6px dashed transparent;border-top: 6px solid #f23d6a;position: absolute;left: 15px;filter: alpha(opacity=0);opacity: 0;bottom: -12px;background: 0 0;
}
.tm-current .tm-photos-arrow {filter: alpha(opacity=100);opacity: 1;
}
.tm-m-photos-thumb img {display: block;width: 60px;height: 60px;cursor: url(../img/T1nTBDFCRbXXbzTk_b-25-20.png), url(http://assets.alicdn.com/img/common/zoom_in.cur), auto;
}
.tm-m-photo-viewer, .tm-m-photo-viewer img,  .tm-m-photos-thumb .tm-current img {cursor: url(../img/T1oq4AFupvXXcu5FDa-20-20.png), url(http://assets.alicdn.com/img/common/zoom_out.cur), auto;
}
.tm-m-photo-viewer {position: relative;margin: 10px 0;width: 0;height: 0;border: 1px solid #ccc;background: #fff;overflow: hidden;display: none;transition: all 0.2s ease-in;
}
.tm-m-photo-viewer-navleft,  .tm-m-photo-viewer-navright {top: 0;bottom: 0;position: absolute;width: 30%;background: url(http://assets.alicdn.com/s.gif); /*解决IE 下背景透明的空白元素无法触发 click 和 hover 事件*/
}
.tm-m-photo-viewer-navleft {left: 0;
}
.tm-m-photo-viewer-navright {right: 0;
}
.tm-m-photo-viewer-navleft i,  .tm-m-photo-viewer-navright i{top: 50%;margin-top:-24px;position: absolute;width: 48px;height: 48px;display: none;
}
.tm-m-photo-viewer-navleft i{left: 0;background-image: url(../img/arrow-l.png);
}
.tm-m-photo-viewer-navright i{right: 0;background-image: url(../img/arrow-r.png);
}
.uploadVideos{height: 32px;line-height: 32px;color: #27cafd;padding-left: 1rem;font-weight: 500;border-bottom: 1px solid #dbdbdb;
}
.myVideo-dimensions{width: auto !important;
}

六、问题总结

videoJS在使用时还是比较简单的，但是我在app上操作时，重播、静音等功能一直不好使，最后发现是和mui.min.js中的代码方法冲突，我直接把mui.min.js删掉就好使了，这个要特别注意。

1、菜鸟教程模拟：菜鸟教程在线编辑器

2、以下是videoJs的控件

controlBar组件的说明
playToggle, //播放暂停按钮
volumeMenuButton,//音量控制
currentTimeDisplay,//当前播放时间
timeDivider, // '/' 分隔符
durationDisplay, //总时间
progressControl, //点播流时，播放进度条，seek控制
liveDisplay, //直播流时，显示LIVE
remainingTimeDisplay, //当前播放时间
playbackRateMenuButton, //播放速率，当前只有html5模式下才支持设置播放速率
fullscreenToggle //全屏控制
currentTimeDisplay,timeDivider,durationDisplay是相对于 remainingTimeDisplay的另一套组件，后者只显示当前播放时间，前者还显示总时间。若要显示成前者这种模式，即 '当前时间/总时间'，可以在初始化播放器选项中配置：

videoJs实现手机视频播放功能相关推荐

jquery video全屏_用videojs让HTML5视频在移动端全屏的方法
用videojs让HTML5视频在移动端全屏的方法文章标签: 视频 : 04-10 19:23 : 1859次 : 0条 1赞点赞简介在使用videojs插件时,如何让HTML5的视频在移动端里 ...
是什么掐住了手机视频的咽喉
http://bbs.dospy.com/thread-5032782-1-1.html 是什么掐住了手机视频的咽喉 3G时代的逼近,手机视频的话题在各大运营商.各主要视频网站以及风险投资人之间被频频 ...
android模糊后面视频,在安卓手机上怎么制作中间是横视频上下是模糊效果的竖视频?手机视频短片制作...
注意此教程方案是『安卓手机端教程方案』今天要介绍的是安卓手机视频短片制作软件,可以在安卓手机上制作手机视频短片哦,制作那种中间是横视频上下是模糊效果的竖视频哦~不是手机看的视频片,手机怎么下载好看的 ...
手机视频直播解决方案
手机视频直播解决方案一.方案简介本公司的手机视频直播.点播解决系统,是以2.75G.3G.WLAN网络的音视频压缩.传输技术为核心,将广电网.通信网.互联网的音视频应用无缝整合,为电视台.媒体.教 ...
android微信朋友圈视频无法播放,微信朋友圈不能分享手机视频怎么回事？微信朋友圈大视频功能安卓不能用吗？...
微信朋友圈不能分享手机视频怎么回事?微信朋友圈大视频功能安卓不能用吗?最近微信更新,用户可以进行分享自己手机里的视频,这一举措受到很多人的喜欢.那么微信朋友圈不能分享手机视频怎么回事?微信朋友圈大视频 ...
顶峰Android手机视频转换器,顶峰3GP手机视频转换器
顶峰3GP手机视频转换器是一款转换速度非常快的视频格式转换工具,支持将几乎所有的视频格式,支持多种参数设置,包括视频尺寸,视频比特率,音频采样率等具体参数调节视频大小和清晰度,接下来小编就给大家带来这 ...
怎么做手机的上下滑动_手机视频恢复怎么做？删除时间较久的找回方法
手机视频恢复?话说到手机视频误删的情况对于一些用户来说是常态,手机视频多又杂,经常全选删除,不小心多选了没有发现就给一起删除了!事隔多个月以后突然要用到,却怎么也找不到了,最近删除相册也只保存最近一个 ...
bindresult必须在哪个位置_手机视频剪辑工具哪个好？清爽视频编辑APP有人推荐吗？...
作为一个非常喜欢旅游的人,每次出门在外都喜欢发各种照片,以前发照片觉得就能够表达自己的状态和心情,但是随着时间的变化发现,身边的人都开始喜欢发视频了.此前在飞机上拍摄了一段觉得不错的天空视频,想要制作 ...
Java实现视频网站的视频上传、视频转码、视频关键帧抽图, 及视频播放功能
最近有个项目牵扯到上传视频,简直把我搞炸了.还么搞定,主要是当初设计有点小出入,心里一直不是坚持,所以,哎,还得努力撒! 下面是当时参考,睡觉,明天搞哎.http://www.cnblogs.com/ ...