视频地址：http://vd2.bdstatic.com/mda-jmawcmkjagd8je0u/mda-jmawcmkjagd8je0u.mp4
这是uni-app原生video的画质
然后这是H5的video的画质
虽然这个视频本身画质不是很高，但是相对于H5的播放器画面更细腻柔和，原生的video比较粗糙，满满的小方格！
吐槽完了我分享一下我使用纯 nvue 项目加载“西瓜播放器”的方法：
西瓜视频播放器，官网：https://v2.h5player.bytedance.com/，
新建组件：H5-Video.nvue
<script>
export default {
data()
{
return{
//视频地址
src:'http://vd2.bdstatic.com/mda-jmawcmkjagd8je0u/mda-jmawcmkjagd8je0u.mp4'
}
},
onBackPress()
{
//退出页销毁播放器
uni.$xgplayer.close()
},
mounted()
{
this.xgplayer()
},
methods: {
xgplayer()
{
let styles = {
top: '0px',
bottom: '540px',
height: '256px',
width: '100%',
zindex:0,
position: 'static',
titleNView: {
autoBackButton: true,
backgroundColor: '#202028',
titleColor: '#ffffff'
} ,
"statusbar": {
"immersed": true ,//开启沉浸式状态栏
"background": '#202028'
},
"hardwareAccelerated" : true, //开启硬件加速
"allowsInlineMediaPlayback": true,//ios关闭原生控件
};
uni.$xgplayer = plus.webview.create('','xgplayer', styles, {}); //挂载到uni全局
uni.$xgplayer.setStyle({
'videoFullscreen':'landscape-primary',//视频全屏时支持横屏 IOS 端无效
});
uni.$xgplayer.loadURL("/hybrid/html/xgplayer.html?src="+this.src)
uni.$xgplayer.show();
}
},
}
</script>
新建本地HTML文件
hybrid/html/xgplayer.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui">
<meta name="referrer" content="no-referrer">
<title>H5高清播放</title>
<script src="js/uni.webview.1.5.2.js" charset="utf-8"></script>
<style type="text/css">
html, body {width:100%;height:100%;margin:auto;overflow: hidden;background-color: #000000;-webkit-user-select: none; user-select: none;}
</style>
</head>
<body>
<div id="mse"></div>
<script src="https://cdn.jsdelivr.net/npm/xgplayer@1.1.4/browser/index.js" charset="utf-8"></script>
<script>
let url = getQueryVariable('src');
let player = new Player({
"id": "mse",
"url": url,
"playsinline": true,
"width":"100%",
"height":"225px",
"autoplay": true,
"whitelist": [''],
"danmu": {
"comments": [
{
"duration": 15000,
"id": '1',
"start": 3000,
"txt": '长弹幕长弹幕长弹幕长弹幕长弹幕',
"style": { //弹幕自定义样式
"color": '#ff9500',
"fontSize": '17px',
// "border": 'solid 1px #ff9500',
"borderRadius": '50px',
"padding": '5px 11px',
"backgroundColor": 'rgba(255, 255, 255, 0.1)'
}
}
],
"area": {
"start": 0,
"end": 1
}
},
});
//获取url参数
function getQueryVariable(variable)
{
var reg = new RegExp('(^|&)' + variable + '=([^&]*)(&|$)', 'i');
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return unescape(r[2]);
}
return null;
}
</script>
</body>
</html>这样图二的效果就实现了！
缺点：就是和应用交互通讯困难，目前还没较好治疗药物！
有点：画质清晰、加载速度快，相同方法可以整合DP、videojs等网页H5播放器，DP支持 CDNBye p2p加速，速度更快！！
uni-app的video组件画质问题从去年就开始关注，直到现在已经彻底不报希望了，只能另找出路！！
你可以说插件市场有许多原生的播放器插件可以选择，如果说视频播放部分需要使用第三方插件来弥补，那么原生video组件存在的意义是什么？？难道原生video已经不能再优化了吗？？？
现在是视频播放的潮流，将来更是，为什么没有得到重视？？
