关于uniapp的video组件全屏会被父级的图片和文字顶下来位置这件事

如图

我快疯拉我快疯啦!!!!哈哈哈哈啊哈谁来告诉我这是为什么啊!!!

这是我代码

 <view class="bg-img">
            <image v-if="ispalyVideo" class="img" src=""></image>
            <view v-if="ispalyVideo" class="activity-details-title">
                <view>{{ allformData.name }}</view>
            </view>
            <view class="bg-vague">
                <view class="activity-details-content">
                    <view class="col" style="margin-top: 0;">
                        <view class="title">基本信息</view>
                        <view class="content flex-ac" style="align-items: flex-start;"
                            v-for="(item, index) in activityList" :key="index">
                            <view class="content-title" style="width: 160rpx;">{{ item.name }}:</view>
                            <view class="content-box" style="flex: 1; white-space: pre-line;">{{ item.value || '-' }}
                            </view>
                        </view>

就是 .img 和 .activity-details-title 这两货的问题 哈哈哈哈哈哈

2025/1/16 已解决

疑似 video只能在组件第一个层级里面同一个层级不能有view 如图

上图是有问题,问题表现如第一个图一样

这样是没有问题的。不清楚原理.....

2024.03.21 uniapp播放m3u8视频【mui-player插件】拂晓东夕已于 2024-04-17 16:14:04 修改阅读量2.4k 收藏 17点赞数 14文章标签: uni-app 音视频版权uniapp播放m3u8视频uniapp 官方提供了video,对于MP4格式的视频支持,现有需求查看实视频,m3u8格式的视频流,不支持。网上看了很多插件,在插件市场找到了 mui-player插件,本插件目前免费 感谢作者插件地址https://ext.dcloud.net.cn/plugin?id=16104官方文档https://muiplayer.js.org/zh/guide/使用导入可演示demo,将demo中的node_modules文件夹下的 hls.js文件夹 mui-player文件夹导入自己项目的同目录下,再在展示视频的地方进行实例化配置即可核心代码<div id="mui-player"></div>import 'mui-player/dist/mui-player.min.css'import Hls from 'hls.js'import MuiPlayer from 'mui-player'data(){ return { videoPlay:null, }}mounted() { this.videoPlay = new MuiPlayer({ container: '#mui-player', title: "标题", src: "http://60.163.137.66:9092/openUrl/cRq7nP2/live.m3u8", // poster: this.poster, width: 300, height: 150, preload:"auto", objectFit: "contain", pageHead: false, showMiniProgress: true, autoFit: false, videoAttribute: [ { attrKey: 'webkit-playsinline', attrValue: 'webkit-playsinline' }, { attrKey: 'playsinline', attrValue: 'playsinline' }, { attrKey: 'x5-video-player-type', attrValue: 'h5-page' } ], parse: { type: 'hls', loader: Hls, config: { debug: false } }, })},// 视频流及销毁onUnload (){ if(this.videoPlay != null){ this.videoPlay.destroy() }},123456789101112131415161718192021222324252627282930313233343536373839404142434445具体的配置可查看官方文档,APP打包自测。2024-04-10 更改因上述方式适合用于H5,APP不支持,改变实现方式,使用HTML5+ 提供的调用原生控件,打包须勾选相应模块权限initVideo() { // #ifdef APP-PLUS // 创建视频播放控件 // if (!this.player) { this.player = plus.video.createVideoPlayer('mui-player', { src: this.videoUrl, top: '100px', left: '0px', width: '100%', height: '300px', position: 'static' }); const currentWebview = this.$mp.page.$getAppWebview(); currentWebview.append(this.player) this.player.play() // 打开即全屏 this.player.requestFullScreen() // 监听全屏退出件 this.player.addEventListener("fullscreenchange", (e) => { // if(this.player.isFullScreen()){ // this.player.exitFullScreen() // } if (this.player) { this.player.close() } }) // #endif },
03-22
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值