uniapp video播放视频悬浮在屏幕无法滑动

更新时间：2024年08月08日 11:01:56 作者：影子信息

在uniapp中,需要使用<video></video>标签进行播放动态src的视频,这里只是简单的在App端播放视频,且动态赋值src,如果还有其它复杂的布局内部嵌套video标签也是不成功的,例如：<swiper>、<scroll-view>等,感兴趣的朋友跟随小编一起看看吧

背景：

在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官方文档。因为偏原生组件，较复杂，可自行选择学习

Html5产业联盟。关于video标签的相关文档

3.subNVue

subNVue是原生渲染的nvue子窗体，把一个nvue页面以半屏的方式覆盖在vue页面上

subnvue 创建原生子窗体，放在当前页面下，放好位置即可。

首先创建nvue文件。最好放入同级。

在 pages.json 中，新增了 subNVues 节点,配置 subNVue 子窗体的相关属性。

在 pages.json 中增加完配置，也写好了 subNVue 子窗体，接下来就是在 vue/nvue 页面中使用了。

uni-app subNVue 原生子窗体开发指南

参考博客：参考博客

五、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>等

到此这篇关于uniapp video播放视频悬浮在屏幕无法滑动的文章就介绍到这了,更多相关uniapp video播放视频内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

uniapp中使用videojs构建H5直播播放器

vue 组件销毁并重置的实现
这篇文章主要介绍了vue 组件销毁并重置的实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-01-01
js钢琴按钮波浪式图片排列效果代码分享
这篇文章主要为大家详细介绍了js钢琴按钮波浪式图片排列效果，推荐给大家，有需要的小伙伴可以参考下。
2015-08-08
关于字符串和对象互转以及JSON.parse()的坑
这篇文章主要介绍了关于字符串和对象互转以及JSON.parse()的坑及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
layer弹出层取消遮罩的方法
今天小编就为大家分享一篇layer弹出层取消遮罩的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
浏览器调试动态js脚本的方法(图解)
这篇文章主要介绍了浏览器调试动态js脚本的方法，文中给大家带来两种调试方法，非常不错，具有参考借鉴价值,需要的朋友可以参考下
2018-01-01
JavaScript中数组遍历的7种方法小结
作为JavaScript开发人员,熟悉数组的遍历和操作是非常重要的,数组遍历是处理和操作数组元素的基本需求之一,本文将介绍JavaScript中的7种常见数组遍历方法,帮助你成为数组操作的达人
2023-11-11
TypeScript中的类型断言和非空断言的使用方法
类型断言是一种方式，可以手动指定变量的类型，非空断言是一种类型断言的特殊形式，这篇文章主要给大家介绍TypeScript 中的类型断言和非空断言的使用方法,需要的朋友可以参考下
2023-07-07
JavaScript 放大镜放大倍率和视窗尺寸
对JavaScript 放大镜来说, 计算倍率必不可少.一个完整的放大镜结构里, 与倍率扯上关系的一共有 4 个对象, 原图, 缩略图, 镜片和视窗.
2011-05-05
javascript获取下拉列表框当中的文本值示例代码
需要将用户点击下拉列表当中某个选项后，将其所选的内容保存起来，下面与大家分享下如何使用js获取下拉列表框文本值，由此需求的朋友可以参考下
2013-07-07
全面理解面向对象的 JavaScript(来自ibm)
要掌握好 JavaScript，首先一点是必须摒弃一些其他高级语言如 Java、C# 等类式面向对象思维的干扰，全面地从函数式语言的角度理解 JavaScript 原型式面向对象的特点
2013-11-11