背景:
在uniapp中,需要使用<video></video>标签进行播放动态src的视频。
1.在开发的时候,运行到浏览器,vedio标签正常;(使用HbuildX运行,运行 -->运行到浏览器)。
2.但是在打包成原生App,安装.apk后缀的应用程序,vedio播放视频就不正常。(使用HbuildX打包,发行 --> 原生App-云打包)。
问题截图:
问题描述:在App上,视频停在屏幕上,在页面中不会跟随页面滚动而滚动。
问题分析:
1.研究<video>标签,是否某个属性设置错误;
2.给对应的video标签添加上对应的css样式,是否是样式问题;
3.查看uniapp框架。因为在谷歌浏览器播放视频都是正常的,到手机上不正常,查看uniapp框架相关。
4.搜索相关博客,解决问题。
一、video标签
官网:点击跳转官网
1.基本用法属性:
id
: 给视频标签一个唯一的 ID。class
: 用于样式控制。src
: 视频的 URL,可以是本地路径或者网络地址。controls
: 显示默认的视频控件。autoplay
: 自动播放视频。loop
: 循环播放视频。muted
: 静音播放视频
2.事件监听
@start
: 监听视频播放事件。@pause
: 监听视频暂停事件。@finish
: 监听视频播放结束事件。
备注:浏览uniapp框架下的video标签,发现没有属性能够控制其保持在电子屏幕不动。、
进一步说明这个是手机端才有的Bug
二、video标签的css样式
在某些情况下,视频可能会被固定在屏幕上,而不是随着页面滚动。这可能是由于视频元素的层级或样式问题。可以尝试以下方法:
确保视频的样式设置正确,使其能够随着页面滚动。
<template>
<view class="container">
<video
id="myVideo"
class="video"
src="/static/videos/your-video.mp4"
controls
autoplay
loop
muted
preload="auto"
x5-video-player-type="h5"
x5-video-player-fullscreen="true"
x5-playsinline
playsinline
webkit-playsinline
></video>
</view>
</template>
<style>
.container {
width: 100%;
height: 300px;
background-color: #f0f0f0;
overflow: hidden; /* 确保容器能够滚动 */
}
.video {
width: 100%;
height: 100%;
object-fit: cover;
position: relative; /* 确保视频能够随页面滚动 */
}
</style>
在某些设备上,硬件加速或渲染层可能导致视频渲染问题。可以尝试禁用硬件加速或调整渲染层设置:
<template>
<view class="container">
<video
id="myVideo"
class="video"
src="/static/videos/your-video.mp4"
controls
autoplay
loop
muted
preload="auto"
x5-video-player-type="h5"
x5-video-player-fullscreen="true"
x5-playsinline
playsinline
webkit-playsinline
></video>
</view>
</template>
<style>
.container {
width: 100%;
height: 300px;
background-color: #f0f0f0;
overflow: hidden; /* 确保容器能够滚动 */
}
.video {
width: 100%;
height: 100%;
object-fit: cover;
position: relative; /* 确保视频能够随页面滚动 */
will-change: transform; /* 提示浏览器优化渲染 */
transform: translateZ(0); /* 强制开启 GPU 加速 */
}
</style>
备注:
我使用了对应的css样式,但是问题没有解决。
三、uniapp框架下的video标签
查看了uniapp框架下的video标签,但是没有对应的属性能够解决问题。
四、vedio原生组件层级高于前端组件
意思是:
1.Video是属于原生组件的,层级是最高的,无法被其他内容所覆盖,当然也不会跟着div的overflow-y:scroll进行滑动,只会一直浮在表层,挡住其他元素。
2.部分组件如map、video、textarea、canvas通过原生控件实现,原生组件层级高于前端组件(类似flash层级高于div)。
为了能正常覆盖原生组件,设计了cover-view。
uni官网的官方文档:点击跳转官网
cover-view使用示例:
//cover-view标签得在<video>标签内部
<template>
<view>
<video style="position: relative;" src="https://haokan.baidu.com/v?pd=wisenatural&vid=18309277609015821003">
<cover-view style="width: 100px;height: 100px;background-color:
#fff;position:absolute;left: 0;">
</cover-view>
</video>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>
cover-view使用的问题:
uni-app 原生APP 模式下 video 层级过高,页面滚动后会覆盖自定义顶部 tabbar和自定义底部菜单,很多人都只是说 cover-view 覆盖,但是cover-view必须在video里面才是有效的,cover-view 在原生app里面无法嵌套内容 。
vue页面层级覆盖解决方案: 点击跳转官网
三种方式对比:
1.cover-view
更适合在视频上边添加某些组件,比如播放按钮或者什么功能。
cover-view或者cover-image,放在video标签内使用,子绝父相
2.plus.nativeObj.view
这个是安卓的原生写法,看了很多资料,发现是能解决相当多种类的问题,但是毕竟原生语法会难一些,在时间不够的情况下很难去学好怎么使用原生语言满足当前的需求,但如果时间充足且有条件的基础下可以采用这个方法 。
plus.nativeObj.View() 绘制原生画布,有点击事件。不属于dom,可以覆盖webview和各种原生控件
plus.nativeObj.view官方文档。因为偏原生组件,较复杂,可自行选择学习
3.subNVue
subNVue是原生渲染的nvue子窗体,把一个nvue页面以半屏的方式覆盖在vue页面上
subnvue 创建原生子窗体,放在当前页面下,放好位置即可。
首先创建nvue文件。最好放入同级。
在
pages.json
中,新增了subNVues
节点,配置subNVue
子窗体的相关属性。在
pages.json
中增加完配置,也写好了subNVue
子窗体,接下来就是在vue
/nvue
页面中使用了。
参考博客:参考博客
五、video标签一个解决办法
最后在网上参考了其他人的一份解决方案,刚好解决此问题。
封装一个组件,利用iframe实现:
//MyVideo组件
//自行封装一个组件,利用iframe实现
<template>
<iframe :onload="onloadCode" style="width:100%;height:100%;border:1px solid #fff;background: #000;"></iframe>
</template>
<script>
export default {
props: {
src: {}
},
data() {
return {
onloadCode: ''
}
},
created() {
this.onloadCode =
`this.contentWindow.document.body.innerHTML = '<video style="width: 100%;height: 100%" controls="controls" src="${this.src}"></video>';`
},
}
</script>
<style lang="scss">
</style>
使用方式:
在其他页面调用注册此封装的组件,并传递视频资源src
//其它页面调用
<MyVideo :src="item.img" v-for="(item, index) in vediosData" :key="index" class="video"></MyVideo>
写在最后,我们这里只是简单的在App端播放视频,且动态赋值src。如果还有其它复杂的布局内部嵌套video标签也是不成功的,例如:<swiper>、<scroll-view>等