‘SVideo’ UI第一版
2019-04-18 本文已影响11人
CodexBai
我们选择 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第一版
