uni-app中,使用video时,要在视频上覆盖内容,并且要兼容app端,安卓端的适配还好做点,但是ios的话,就弄了我好久,搞了大半天才搞定,这里记录下

1.微信小程序

  • 视频做的是全屏显示的视频,使用cover-view和cover-image对视频进行覆盖,不过,cover-view也有很多限制,像文字多行省略,这个没找到方式,单行的省略就直接用普通就可以了
使用cover-view做三角形也是行不通的,但是你在开发者工具上是没有问题,能够正常显示的,所以,在cover-iew中,要想做三角形的效果,只能用图片来代替

2.APP

  • 使用原生子窗体对video进行覆盖,在视频的那个vue文件中,新建立nvue文件,可以建立多个原生子窗体
  • 在page.json中
{
    "path": "pages/videolist/videolist",
    "style": {
        "navigationBarTitleText": "视频列表",
        "navigationBarBackgroundColor": "#ffffff",
        "navigationBarTextStyle": "black",
        "app-plus": {
            "bounce": "none",
            "pullToRefresh": {
                "support": false
            },
            "subNVues": [{
                "id": "videoChild",
                "path": "pages/videolist/index",
                "style": {
                    "position": "absolute",
                    "left": "0px",
                    "top": "100px",
                    "width": "750px",
                    "height": "110px",
                    "background": "transparent"
                }
            }]
        }
    }
}
  • index.nvue文件中,要使用text标签来显示文字,在nvue中使用375px为屏幕宽度,默认的布局为flex布局,且是纵向的;背景色要使用background-color进行设置
  • 在nvue中可以使用scroll-view来进行滚动
  • 对文字超出隐藏,使用lines进行行数的设置
overflow: hidden;
width: 200px;
text-overflow: ellipsis;
lines: 1;
  • index.nvue文件,要设置page.json中的id
<div class="shopInfo" id="videoChild">
    <div class="shopIntroduce">
        <image class="shopLogo" :src="shopLogo"></image>
    <text class="subShopInfo">{{videoTitle}}</text>
</div>
  • nvue文件和vue文件进行通信
/* 在vue文件中定义事件 */
this.$nextTick(() => {
    let list = {};
    uni.$emit('children', temporaryObj);
});
/* 在nvue中对事件进行监听,并在组件销毁前移除事件监听 */
created() {
    uni.$on('children', (data) => {
        this.$nextTick(() => {
            this.codeImg = data.code_img;
        })
    })
},
beforeDestroy(){
    uni.$off('children');
    this.goodsId = '';
},

安卓和ios对于原生子窗体的弹出表现形式不同

const subNVue = uni.getSubNVueById('videoChild');
/* 隐藏窗体 */
subNVue.hide('none',200);
/* 显示窗体 */
subNVue.show('slide-in-bottom', 200);
  • 在安卓端的page.json中可以不定义"type": "popup",定义也不会出现问题,但是ios端必须定义这个值,才能使窗体在弹出时不会布局错乱;在ios端,如果你没有定义这个属性,然后你设置的子窗体是从底部弹出,且不需要满屏的时候,就会出现这个窗体满屏显示,布局也出现问题
"id": "videoChild",
"path": "pages/videolist/index",
"type": "popup",
"style": {
    "position": "absolute",
    "left": "0px",
    "bottom": "0px",
    "width": "375px",
    "height": "340px",
    "background": "transparent"
}
  • 还有很奇怪的,就是在安卓端的原生子窗体中,使用本地图片是可以显示的,但是,在ios端,使用本地图片就只有在编译调试的那一次才能够显示出来;这个bug测试了我好久,我还一直在搞原生子窗体的布局,对他的position进行更改,后面忽然想到,可能使用网络图片就能显示了,结果,哇,还真的是...

APP端的showLoading和小程序端的显示也是不一样

uni.showLoading({
    title: `视频下载中...`,
})
const downloadTask = uni.downloadFile({})
downloadTask.onProgressUpdate((res) => {
    uni.showLoading({
        title: `视频下载${res.progress}%`,
    })
    if(res.progress == 100) {
        uni.hideLoading();
    }
});
  • 在小程序端,这样写就能够很完美的显示出下载进度,但是app端,如果要显示下载进度的话,就会造成视频和页面卡顿,并且,loading状态也是一直抖动的状态,没有解决方案,各位大佬有的话,可以在评论区告知下,谢谢

视频下载

  • 安卓端和ios端有着不同的状态,安卓端不需要进行savefile操作
  • 但是ios端需要先进行savefile,然后,再保存到相册中
  • 安卓端使用了插件进行权限的判断权限插件
const downloadTask = uni.downloadFile({
    url: '',
    success: async (res) => {
        let filePath = res.tempFilePath;

        let albumAuth;
        /* 判断是否是安卓 */
        if(uni.getSystemInfoSync().platform == 'android') {
            albumAuth = await this.requestAndroidPermission();
            /* 如果没有相册权限,则跳转到应用管理界面 */
            if(albumAuth != 1) {
                permision.gotoAppPermissionSetting()
            } else {
                uni.saveVideoToPhotosAlbum({
                    filePath,
                    success: file => {
                        uni.showToast({
                            title: '下载成功',
                            icon: 'none',
                            duration: 1500
                        })
                    },
                    fail: err => {
                        permision.gotoAppPermissionSetting()
                    },
                })
            }
        } else {
            /* ios端在下载后先进行savefile,然后在保存到相册中 */
            uni.saveFile({
                tempFilePath: filePath,
                success: function (res) {
                    var savedFilePath = res.savedFilePath;
                    uni.saveVideoToPhotosAlbum({
                        filePath: savedFilePath,
                        success: file => {
                            uni.showToast({
                                title: '下载成功',
                                icon: 'none',
                                duration: 1500
                            })
                        },
                        fail: err => {
                        permision.gotoAppPermissionSetting()
                        },
                    })
                }
            });
        }

    },
})
/* 获取安卓端的相册权限 */
async requestAndroidPermission() {
    var result = await permision.requestAndroidPermission('android.permission.WRITE_EXTERNAL_STORAGE');
    return result ? 1 : 0;
},
  • APP端的nvue布局还是有点不太好弄,在样式上直接盲写的话,不能达到想要的效果,还是要直接进行真机调试,然后的话,就是,我在安卓端保存视频的话,似乎是在安装应用的时候就会授权相册,ios在进行savefile操作时,会弹框提醒

正在努力学习中,若对你的学习有帮助,留下你的印记呗(点个赞咯^_^)

作者:SegmentFault 思否-小小蚊子 著作权归作者所有。
相关说明
① 本站VIP源码资源永久免费下载www.src1024.com
② 本网站资源来源于网络收集,如有侵权,请联系站长进行删除处理。
③ 分享目的仅供大家学习和交流,请不要用于商业用途,否则后果自负。
④ 如果你有源码需要出售,可以联系小编,info@src1024.com。
⑤ 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解。
⑥ 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需。
⑦ 在您的能力范围内,为了大环境的良性发展,请尽可能的选择正版资源。
⑧ 网站资源不做任何二次加密和授权后门(原版加密除外)

1024资源网 » uni-app view覆盖在video解决方案:uni-app中覆盖视频(原生子窗体)、视频下载

发表评论