我们选择 DCould 的
MUI
框架来开发我们的‘SVideo’ APP,主要是因为能够速成 ^ _ ^。
我们可以从DCould官方了解到,在H5+ APP中视频播放有三种解决方案,①使用H5的video
;②使用新增的plus.video
原生视频播放;③使用Native.js
;
1. 使用H5的video
标签,只能播放符合H5规范的视频格式。
H5 Video只支持.mp4
后缀、.webm
后缀、.ogg
后缀的音视频格式。H5 Video可以添加多个source
源来进行兼容适配,但在Hybird
模式的Android下,有些机型只能读到第一个source
来源,因此局限性很大。
在Android设备上我们需要强制打开硬件加速,否则会出现只有声音没有画面的情况。
//在 manifest.json 文件中的 plus 节点下开启硬件加速
"hardwareAccelerated": true
注:由于H5的性能,导致拖动无法流畅跟随手的操作。
参考说明:Html5 Video实现方案
2. plus.video
的原生视频
H5+ 引擎引入了专业的视频解码库,但会增加不少包体积。原生视频控件需要使用JS创建。
player = plus.video.createVideoPlayer('videoplayer', {
src:'video/shipin.mp4',
top:'100px',
left:'0px',
width: '100%',
height: '200px',
position: 'static'
});
参考文档:HTML5+ API
3. 使用Native.js调用系统播放器来播放视频,但视频的播放进度等状态无法回传给JS层。
var Intent = plus.android.importClass("android.content.Intent");
var Uri = plus.android.importClass("android.net.Uri");
var main = plus.android.runtimeMainActivity();
var intent=new Intent(Intent.ACTION_VIEW);
var uri=Uri.parse("网络视频地址");
intent.setDataAndType(uri,"video/*");
main.startActivity(intent);
最后经过多方试用,我最终选择了网友的一款自定插件(纯JS 打造HTML5+APP 专属 VIDEO 视频播放器)。虽然需要RMB,但对于作者的肯定,我们必须给予支持,膜拜大神。
这里虽然支持的播放格式不多,但已经够我们使用了,相对来说提供的功能也很全面。
(1)引入视频的样式,这里切记要更改一下图片的位置。
<link href="css/videoStyleBlue.css" rel="stylesheet" />
(2)引入相关JS文件
<script src="js/mui.min.js"></script>
<script src="js/mediaeplayer.js"></script>
<script src="js/AppH5Video.js"></script>
(3)添加 video
标签
<video id="player" style="max-width:100%;display: none;" preload="none" controls playsinline webkit-playsinline>
(4)初始化视频插件
var player = new AppH5Video('player', {
autoplay: false, //是否自动播放视频
fakefull: false, //是佛开启假全屏模式
showfull: false, //是否显示全屏按钮
loop: false, //是否循环播放
back: false, //是否显示返回键
drag: false //是否开启左右滑动快进后退功能
})
player.setloading(true); //设置加载框显示或隐藏
//可以在 player.innerHTML(‘<span></span>’); 方法里添加一些HTML 内容,例如需要在视频层添加一些图标或物件, 为了方便视频播放时统一显示或隐藏的需要。
player.innerHTML('<span class="live-btu"></span><span class="share-btu"></span><span class="mroe-btu"></span>');
(5)禁止屏幕横屏显示
//禁止横屏显示
plus.screen.lockOrientation("portrait-primary");
(6)使用mui.ajax()
加载数据
mui.ajax("data/data02.json", {
dataType: 'json', //服务器返回json格式数据
type: 'post', //HTTP请求类型
timeout: 10000, //超时时间设置为10秒;
success: function(data) {
for (x in data) {
arrVideoData[x] = data[x];
}
videoId = 0;
getInitVideo(videoId);
},
error: function(xhr, type, errorThrown) {
mui.toast('数据加载失败,请检查网络!', {
duration: 500,
type: 'div'
});
}
});
(7)加载视频数据方法
//加载视频数据
function getInitVideo(aid) {
if(videoId == 0) {//不显示上一条按键
player.lastButState(false);
} else {
player.lastButState(true);//设置上一个按键显示
}
if(videoId == arrVideoData.length) {//不显示下一条按键
player.nextButState(false);
} else {
player.nextButState(true);//设置下一个按键显示
var list = arrVideoData[aid];
// 动态渲染整个video标签
player.setPlay({
src: list.src, //视频链接
poster: list.poster, //封面图
title: list.title, //视频标题
duration: list.duration, //视频总时间格式
memoryVideoID: "" //记忆录播的视频ID
});
setTimeout(function() {
player.setloading(false); //隐藏视频加载框
}, 1000);
}
}
(8)设置视频下一条、上一条按键事件
player.next(function() {//下一个按键事件
videoId++;
getInitVideo(videoId);
});
player.last(function() {//上一个按键事件
videoId--;
getInitVideo(videoId);
})
(9)监听向上向下滑动
//监听向上滑动
document.querySelector('.mui-content').addEventListener('swipeup', function() {
videoId++;
if(videoId >= arrVideoData.length) {//不显示下一条按键
mui.toast('这是最后一条视频!', {duration: 500, type: 'div'});
} else {
getInitVideo(videoId);
}
})
//监听向下滑动
document.querySelector('.mui-content').addEventListener('swipedown', function() {
videoId--;
if(videoId < 0) {//不显示下一条按键
mui.toast('这是第一条视频!', {duration: 500, type: 'div'});
} else {
getInitVideo(videoId);
}
})
‘SVideo’UI第一版
网友评论