【apicloud】视频播放器实现教程
前言，为了在apicloud项目中实现视频播放功能，先后做了不少尝试最早简单引入了video.js发现ios效果不佳转战了apicloud内部模块，先后使用了moviePlayer、videoPlayer等模块，安卓兼容性并不乐观部分系统型号存在视频卡死问题。试了不少模块，且顾及需要倍速等需求最后还是回头重拾video.js。（最后附有demo下载地址。）
个人经验：横屏播放不要去纠结全屏问题，设置监听事件，把屏幕改为横屏重新设置播放器宽度高度的做法最佳，自带的全屏兼容不好。
言归正传开始正事：
第一步：video.js包下载（以下代码示例使用的都是个人使用版）
个人使用版：https://pan.baidu.com/s/16kVFb_8aqtSpm7Vf1aWrog 提取码：rpp8 （网上找的版本，有针对APP做一些样式优化）
官方下载版：https://videojs.com/getting-started/
第二步：文件引入
路径只是示范，具体的根据个人项目需求自行更改
CSS：
<link rel="stylesheet" type="text/css" href="../plugins/videojs/css/iconfont.css" />
<link rel="stylesheet" type="text/css" href="../plugins/videojs/css/video-js.css" />
JavaScript:
<script type="text/javascript" src="../plugins/videojs/js/video.min.js"></script>
第三步：初始化
页面初始化直接载入（这部分直接引用demo）：
HTML：
<video id="video" webkit-playsinline="true" playsinline="true" class="video-js vjs-default-skin" controls preload="none"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup="{}">
<source src="http://视频地址格式1.mp4" type='video/mp4' />
<source src="http://视频地址格式2.webm" type='video/webm' />
<source src="http://视频地址格式3.ogv" type='video/ogg' />
</video>video标签中的poster为设置视频封面、source提供三种不同格式的视频源、可根据项目需求自行更改删除。
JS：
<script type="text/javascript">
var myPlayer = videojs('video');
videojs("video").ready(function(){
var myPlayer = this;
myPlayer.play();
});
</script>后期ajax获取接口数据载入（个人使用方法）(实现断点播放、倍速、自动横屏)：
HTML：
<video id="video" webkit-playsinline="true" playsinline="true" class="video-js vjs-default-skin " controls poster="../image/video-backgroud-img2.png"> <!-- <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' /> --> <p class="vjs-no-js">播放视频需要启用 JavaScript，推荐使用支持HTML5的浏览器访问。</p> </video>
JS：
myPlayer = videojs("#video", {
"techOrder": ["html5"],
"autoplay": true,
"preload": "auto",
'playbackRates': [0.75, 1, 1.25, 1.5, 1.75, 2],
"inactivityTimeout": 1000 * 5,
"controlBar": {
remainingTimeDisplay: false, //隐藏 TimeDisplay
volumePanel: true, //音量是否显示
captionsButton: false,
chaptersButton: false,
liveDisplay: false,
playbackRateMenuButton: true,
subtitlesButton: false,
fullscreenToggle: false
},
plugins: {
header: {
seek: 0.4,
title: _title,
back: back,
touchmove: function(type) {
switch (type) {
case 'left':
this.player.currentTime(this.player.currentTime() - this.options.seek*4)
break;
case 'right':
this.player.currentTime(this.player.currentTime() + this.options.seek*4)
break;
default:
break;
}
}
}
}
}, function() {
//设置全屏模式
hh=api.winHeight;
ww=api.winWidth;
var rotateBtn = this.controlBar.addChild('button');
var _thisVideo = this;
if(hh>ww){
this.width(hh);
this.height(ww);
}else{
this.width(ww);
this.height(hh);
}
//设置视频路径
this.src(_url);
//恢复观看记录
this.on('loadeddata', function() {
var _whereYouAt = $api.getStorage('video_'+_urlkey);
if(_whereYouAt != 0 && !!_whereYouAt){
api.confirm({
title: '是否恢复上一次的观看记录',
msg: '您之前已经有观看过该视频',
buttons: ['确定', '取消']
}, function(ret, err) {
var _index = ret.buttonIndex;
if(_index == 1){
_thisVideo.currentTime(_whereYouAt);
}else{
$api.setStorage('video_'+_urlkey,0);
}
});
}
})
//处理 部分安卓手机 无法退出全屏问题
this.on('error', function(a) {
api.confirm({
title: '提示',
msg: '视频载入超时，请重新尝试。',
buttons: ['确定', '取消']
}, function(ret, err) {
closeWin();
});
})
//处理 部分安卓手机 无法进入全屏问题
this.on('requestFullscreen', function() {
activeType = 'requestFullscreen'; //更新一下状态
onFullScreen()
})
//处理 部分安卓手机 无法退出全屏问题
this.on('exitFullscreen', function(a) {
activeType = ''; //更新一下状态
onNoramlScreen()
})
//存储视频播放进度
this.on('progress', function(a) {
var howLongIsThis = myPlayer.duration();
var whereYouAt = this.currentTime();
if(whereYouAt >= howLongIsThis){
whereYouAt = 0;
}
$api.setStorage('video_'+_urlkey,whereYouAt);
})
/**
* 监听 视频播放器 进入 退出 全屏事件
* 用以解决全屏 的时候 部分安卓手机 第一次按下keyback键apicloud监听不到问题 需2次apicloud才能监听到(魅族mx4Pro 有此问题)
**/
this.on('fullscreenchange', function() {
activeType = this.isFullscreen() ? 'requestFullscreen' : '';
if (activeType === 'requestFullscreen') {
onFullScreen()
} else {
onNoramlScreen()
}
})
}); // 全屏回调函数
function onFullScreen() {
if ('undefined' !== typeof api) {
api.setFullScreen({
fullScreen: true
});
api.setScreenOrientation({
orientation: 'landscape_left'
});
hh=api.winHeight;
ww=api.winWidth;
if(hh>ww){
myPlayer.width(hh);
myPlayer.height(ww);
}else{
myPlayer.width(ww);
myPlayer.height(hh);
}
}
};
// 退出全屏回调函数
function onNoramlScreen() {
if ('undefined' !== typeof api) {
api.setScreenOrientation({
orientation: 'portrait_up'
});
api.setFullScreen({
fullScreen: false
});
hh=api.winHeight;
ww=api.winWidth;
if(hh>ww){
myPlayer.width(ww);
myPlayer.height(hh);
}else{
myPlayer.width(hh);
myPlayer.height(ww);
}
}
}
function closeWin(){
var jsfun = 'closeWin();';
api.execScript({
script: jsfun
});
}如果不清楚的这边附带一个demo。【基于apicloud的demo】外部调用请自行完善。 wap要用也可以稍作修改。
demo下载：
链接：https://pan.baidu.com/s/1uah8EO2UxzMQiHdTMdOKdw 提取码：iykx
本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com
- 最新评论
- 总共0条评论
