大图APP
大图APP
  • 发布:2020-12-07 23:45
  • 更新:2024-07-31 11:03
  • 阅读:11412

吐槽一下:uni-app原生video画质简直弱爆了,H5播放器甩原生video几条街!!

分类:nvue

视频地址: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已经不能再优化了吗???

现在是视频播放的潮流,将来更是,为什么没有得到重视??

8 关注 分享
2***@qq.com 降龙十八掌 BlackFish 2***@qq.com 删库跑路 samshum22 一抱一个胖猪猪 makeit

要回复文章请先登录注册

woaizuguo

woaizuguo

回复 大明子 :
解决了吗
2024-07-31 11:03
DCloud_Android_DQQ

DCloud_Android_DQQ

回复 1***@qq.com :
codec String hardware 解码器选择,hardware:硬解码(硬解码可以增加解码算力,提高视频清晰度。少部分老旧硬件可能存在兼容性问题);software:ffmpeg 软解码;
2023-01-29 11:08
1***@qq.com

1***@qq.com

回复 DCloud_Android_DQQ :
求教,如何开启硬件解码
2023-01-18 16:01
万水千山147

万水千山147

回复 zhangrl :
请教下这个问题您怎么解决的?
2022-12-12 16:40
3***@qq.com

3***@qq.com

回复 zhangrl :
解决了吗
2022-10-03 15:23
FullStack

FullStack

VLC多媒体播放器、支持rtsp、rtmp、mms、ftp、udp/rtp等等大多数格式、截图、录制、速率、快进、倒退、音量、窗口缩放、视频纵横比、音轨等等:[https://ext.dcloud.net.cn/plugin?id=8762](https://ext.dcloud.net.cn/plugin?id=8762)
2022-07-14 22:12
zhangrl

zhangrl

请问,WebView打开h5视频,显示灰色背景或黑色三角形 怎么去掉
2022-05-09 18:38
不老刘

不老刘

不得不吐槽一下,video组件确实太渣了,很多该有的都没有,比如最常用的倍速。还要自己单独搞。。。
2021-12-28 14:53
DCloud_Android_DQQ

DCloud_Android_DQQ

你开启硬件解码了吗
2021-12-13 12:25
makeit

makeit

h5 video 播放是比原生video效果好,但是是依赖 浏览器内核的,每个机型内核都不一样。即使官方提供的x5内核问题也很多
2021-12-13 11:21