SevLen
SevLen
  • 发布:2022-06-27 11:40
  • 更新:2022-09-29 14:52
  • 阅读:870

官方的video是不再更新了吗?APP端的层级与视频的第一帧黑屏没有优雅的解决方案了吗?

分类:uni-app

video组件微信小程序已经做到了同层级。而APP端仍然没有得到官方的支持。
以及APP端视频第一帧获取不到,官方也没有提供优雅的解决方案。

本人使用了subNvue子窗口的方法去创建了header、tabbar做视频遮挡,但是还是有难以掩盖的瑕疵。其实本质还是没有绕开两套代码,维护太困难了。
在header中,有一个页面滚动时背景渐变的效果,APP【IOS】端会疯狂闪烁【Vue与Nvue之间的通信损耗】(加了防抖,但是防抖时间过长,渐变色的透明度不精确)。
在tabbar中,样式与Vue页面中的设置一致,但跑真机时还是会错位,难以校准。
以及最近的一个 【广告需求】弹窗,也使用了subNvue来制作,明明使用了watch来控制是否显示,条件为false了还是会出现该subNvue【使用的$emit来触发subNvue的v-if】...
另外,最近发现在QQ浏览器的H5内,首页的视频如果在播放时,点击别的链接进入别的页面,首页的视频还一直存在窗口中并没有被清理。。。

2022-06-27 11:40 负责人:无 分享
已邀请:
SevLen

SevLen (作者)

官方是真的没人负责这一块了吗。。

DCloud_Android_DQQ

DCloud_Android_DQQ

在维护的。最近有其他的开发排期。

你的 移动端诉求是

APP端视频第一帧获取不到

是吗。
这个我们稍后有了调研结果回复你。

  • SevLen (作者)

    QQ浏览器的H5内,首页的视频如果在播放时,点击别的按钮进入别的页面,首页的视频还一直存在窗口中进行播放

    2022-07-06 20:37

  • SevLen (作者)

    以及在使用了video组件的页面中就一定要使用nVue再去写一套代码而实现组件的同层级渲染吗

    2022-07-06 20:38

  • SevLen (作者)

    回复 h***@163.com: 使用subNvue的效果并不理想

    2022-07-06 20:38

DCloud_Android_DQQ

DCloud_Android_DQQ

先说第一个问题。

APP端视频第一帧获取不到

这个具体什么意思。我没看懂 提供一个示例。说明一下问题

  • SevLen (作者)

    自家产品都不知道啥意思吗?

    2022-11-16 18:39

SevLen

SevLen (作者)

代码如下

<view>  
        this is test  
        <view class="">  
            <video   
                src="2022/05/11/da1e0b366cc2481b93f1cf89b7b92feb.mp4"   
                controls  
                style="width: 100%; "  
            >  
            </video>  
        </view>  
</view>
  • H5及微信小程序会自动获取视频第一帧作为封面图

  • APP端会获取不到,官方文档为什么没有阐述解决方案?记得旧版文档地址的poster属性有注明APP端会黑屏,但是新版完全没有提及?(旧版文档链接现在已经找不到了)

SevLen

SevLen (作者)

第二点:
QQ浏览器的H5内,首页的视频如果在播放时,点击别的按钮进入别的页面,首页的视频还一直存在窗口中进行播放

如字面意思所述,就是H5端运行在QQ浏览器,我的首页放置了视频,随后点击了视频,视频处于播放状态时,我点击了别的按钮跳转至了别的路由页面中,该视频还会存在窗口中处于播放状态。而其他的浏览器并不会出现这种现象。

SevLen

SevLen (作者)

第三点:仍然是层级渲染的问题
在使用了video组件的页面中就一定要使用nVue再去写一套代码而实现组件的同层级渲染吗(coverview完全不满足需求),然而查阅官方文档【plus.nativeObj.view, subNvue】,官方似乎更推荐使用subNvue,然而我使用subNvue的效果并不理想。
在现在短视频流量的冲击下,页面上引入video的需求很频繁。因此我之前的版本中使用vue编写的页面,假设要加入页面滚动自动播放视频的需求,那么为了进行同层渲染就必须重写一套nVue以兼容APP端,这样的做法不合理吧?同样的使用subNvue如官方提及会带来更大的内存占用,这样的做法也有所欠缺吧?
我使用subNvues的配置如下,subNheader是页面顶部导航栏的实现,否则页面滚动时video会将导航栏进行层级遮挡,我的导航栏有一个随滚动距离而变化的渐变色需求,然而编译至安卓【HONOR 9X(鸿蒙OS版本)】是渐变正常的,编译至苹果【iphone6s】时渐变色是突变(急速闪烁)的,我想是uni.$emit通信的消耗导致的(渐变色变量opacity是从首页传递至subNvue窗口中);subNfooter则是底部tabbar的实现;subNad则是广告弹窗的实现,然后我这个广告弹窗是通过后台开关进行配置是否有广告的,因此我在subNad的beforeCreate函数中通过uni.$on监听首页传递的变量isOpen来调用uni.getCurrentSubNvue().hide/show来动态开启该subNvue,然而编译调试时是没有问题的,打包至生产环境使用时,isOpen初始状态为false时,该subNad仍然存于页面中遮挡了整个应用,结果应该是该subNad被关闭的。

"app-plus": {  
                    "subNVues":[  
                        {  
                            "id": "subNheader", // 唯一标识    
                            "path": "nVue/appHeader", // 页面路径    
                            /*"type": "popup",  这里不需要*/  
                            // "type":"navigationBar",  
                            "style": {    
                                "position": "absolute",    
                                // "dock": "top",  
                                // "top":"20px",  
                                "width": "100%",  
                                // "height": "88rpx",  
                                "background": "transparent",  
                                "zindex": 2  
                            }  
                        },  
                        {  
                            "id": "subNfooter", // 唯一标识    
                            "path": "nVue/appFooter", // 页面路径    
                            /*"type": "popup",  这里不需要*/  
                            // "type":"navigationBar",  
                            "style": {  
                                "position": "position",    
                                "dock": "bottom",  
                                "bottom":"0",  
                                "width": "100%",  
                                "height":"100rpx",  
                                // "background": "#ff2000"  
                                "zindex": 2  
                            }  
                        }  
                        // {  
                        //  "id": "subNad", // 唯一标识  
                        //  "path": "components/common/popupAdvert/popupAdvert", // 页面路径    
                        //  /*"type": "popup",  这里不需要*/  
                        //  // "type":"navigationBar",  
                        //  "style": {  
                        //      "position": "position",    
                        //      "dock": "bottom",  
                        //      "top":"0%",  
                        //      "bottom":"0%",  
                        //      "width": "100%",  
                        //      // "height":"100rpx"  
                        //      "background": "rgba(0,0,0,.4)",  
                        //      "zindex": 3  
                        //  }  
                        // }  
                    ]  
                }

subNad的动态开启与关闭

 showMask(show = true) {  
            const curVue = uni.getCurrentSubNVue()  
            if(!show) {  
                curVue.hide()  
            }else {  
                curVue.show()  
            }  
},
x***@188.com

x***@188.com

请问一下,app端获取视频第一帧解决了没?

x***@188.com

x***@188.com

请问一下,app端获取视频第一帧解决了没?

要回复问题请先登录注册