因为uniapp的video标签层级太高，所以我这边引用了原生的video标签

最新推荐文章于 2024-08-19 10:41:41 发布
最新推荐文章于 2024-08-19 10:41:41 发布
阅读量1.2k 收藏 2
点赞数 3
文章标签： uni-app javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Redguest1/article/details/134673663
版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言

因为uniapp的video标签层级太高，所以我这边引用了原生的video标签 因为uniapp的video标签没有倍速功能而且层级太高只能够利用内置组件进行重写。

一、首先先封装一个组件

这个组件里面要写两个JS，前者是为了引用后者的，直接看完整代码吧！

二、完整代码

1.HTML

代码如下：

<template>
	<view v-html="videoHtml" id="dom-video" class="dom-video" :eventDrive="eventDrive"
		:change:eventDrive="domVideo.eventHandle" :videoSrc="videoSrc" :change:videoSrc="domVideo.srcChange"
		:videoProps="videoProps" :change:videoProps="domVideo.propsChange" :randomNum="randomNum"
		:change:randomNum="domVideo.randomNumChange" />
</template>

2.第一个js

因为是封装的组件所以要传值（第一个js）：

<script>
	export default {
		props: {
			src: {
				type: String,
				default: ''
			},
			autoplay: {
				type: Boolean,
				default: false
			},
			loop: {
				type: Boolean,
				default: false
			},
			controls: {
				type: Boolean,
				default: false
			},
			objectFit: {
				type: String,
				default: 'contain'
			},
			muted: {
				type: Boolean,
				default: false
			},
			poster: {
				type: String,
				default: ''
			},
		},

		// 数据状态
		data() {
			return {
				videoHtml: '',
				videoSrc: '',
				eventDrive: null,
				videoProps: {},
				randomNum: Math.floor(Math.random() * 100000000 + 1)
			}
		},
		watch: {
			// 监听视频资源文件更新
			src: {
				handler(val) {
					if (!val) return
					this.initVideoHtml()
					setTimeout(() => {
						this.videoSrc = val
					}, 0)
				},
				immediate: true
			},
			// 监听首次加载
			autoplay: {
				handler(val) {
					this.videoProps.autoplay = val
				},
				immediate: true
			},
		},
		// 生命周期
		mounted() {
			this.initVideoHtml()
		},
		// 方法
		methods: {
			// 将video的事件传递给父组件
			videoEvent(data) {
				// console.log('向父组件传递事件 =>', data)
				this.$emit("videoEvent", data)
			},
			changePlaybackProgress(data) {
				this.$emit("changePlaybackProgress", data)

			},
			// 初始化视频
			initVideoHtml() {
				this.videoHtml = `<video
          src="${this.src}"
          id="dom-html-video_${this.randomNum}"
          class="dom-html-video"
          ${this.autoplay ? 'autoplay' : ''}
          ${this.loop ? 'loop' : ''}
          ${this.controls ? 'controls' : ''} 
          ${this.muted ? 'muted' : ''}
		  poster="${this.src}?x-oss-process=video/snapshot,t_0,f_jpg"
          preload="auto"
          playsinline
          webkit-playsinline
          width="100%"
          height="100%"
		  controlslist="nodownload"
          style="object-fit: ${this.objectFit};padding:0;"
		
        >
          <source src="${this.src}" type="video/mp4">
          <source src="${this.src}" type="video/ogg">
          <source src="${this.src}" type="video/webm">
        </video>
      `
				// console.log('视频html =>', this.videoHtml)
			},
			resetEventDrive() {
				this.eventDrive = null
			},
			// 将service层的事件/数据 => 传递给renderjs层
			play() {
				this.eventDrive = 'play'
			},
			pause() {
				this.eventDrive = 'pause'
			},
			stop() {
				this.eventDrive = 'stop'
			},
		}
	}
</script>

3.第二个js

<script module="domVideo" lang="renderjs">
	export default {
		data() {
			return {
				video: null,
				timeSetInterval: null,
				num: '',
				options: {},
			}
		},
		mounted() {
			this.initVideoEvent()
		},
		methods: {
			myplay() {
				this.getPlaybackProgress(true)
				this.$ownerInstance.callMethod('videoEvent', 'play')
			},
			mypause() {
				this.getPlaybackProgress(false)
				this.$ownerInstance.callMethod('videoEvent', 'pause')
			},
			myended() {
				this.getPlaybackProgress(false)
				this.$ownerInstance.callMethod('videoEvent', 'ended')
				this.$ownerInstance.callMethod('resetEventDrive')
			},
			initVideoEvent() {
				setTimeout(() => {
					let video = document.getElementById(`dom-html-video_${this.num}`)
					this.video = video
					// 将之前的视频事件移出监听 必须要移出不移出定时器没有办法停止
					video.removeEventListener("play", this.myplay)
					video.removeEventListener("pause", this.mypause)
					video.removeEventListener("ended", this.myended)
					// 监听视频事件/重新监听视频事件
					video.addEventListener('play', this.myplay)
					video.addEventListener('pause', this.mypause)
					video.addEventListener('ended', this.myended)
				}, 100)
				// this.getPlaybackProgress(false)
			},

			eventHandle(eventType) {
				if (eventType) {
					this.video = document.getElementById(`dom-html-video_${this.num}`)
					if (eventType === 'play') {
						setTimeout(() => {
							this.video.play();
						}, 350)
						return
					} else if (eventType === 'pause') {
						setTimeout(() => {
							this.video.pause();
						}, 350)
					} else if (eventType === 'stop') {
						this.video.stop()
					}
				}
			},
			//这里是视频链接切换的时候
			srcChange(val) {
				this.video = document.getElementById(`dom-html-video_${this.num}`)
				// 实现视频的第一帧作为封面，避免视频展示黑屏
				this.initVideoEvent()
				setTimeout(() => {
					let video = document.getElementById(`dom-html-video_${this.num}`)
					video.addEventListener('loadedmetadata', () => {
						let {
							autoplay
						} = this.options
						// video.play()
						// if (!autoplay) {
						// 	video.pause()
						// }
					})
				}, 10)

			},
			propsChange(obj) {
				this.options = obj
			},
			randomNumChange(val) {
				this.num = val
			},
			getPlaybackProgress(bool) {  //这里是为了获取播放的时间
				// console.log(bool)
				if (bool) {
					this.timeSetInterval = setInterval(() => {
						let currentTime = this.video.currentTime
						let duration = this.video.duration
						this.$ownerInstance.callMethod('changePlaybackProgress', {
							currentTime,
							duration
						})
					}, 1000)

				} else {
					clearInterval(this.timeSetInterval)
					this.timeSetInterval = null

				}
			},
		}
	}
</script>

3.css样式

<style lang="scss" scoped>
	.dom-video {
		overflow: hidden;
		height: 100%;
		padding: 0;

		&-height {
			height: 100%;
		}
	}
</style>

4.完整代码

<!-- eslint-disable -->
<template>
	<view v-html="videoHtml" id="dom-video" class="dom-video" :eventDrive="eventDrive"
		:change:eventDrive="domVideo.eventHandle" :videoSrc="videoSrc" :change:videoSrc="domVideo.srcChange"
		:videoProps="videoProps" :change:videoProps="domVideo.propsChange" :randomNum="randomNum"
		:change:randomNum="domVideo.randomNumChange" />
</template>

<script>
	export default {
		props: {
			src: {
				type: String,
				default: ''
			},
			autoplay: {
				type: Boolean,
				default: false
			},
			loop: {
				type: Boolean,
				default: false
			},
			controls: {
				type: Boolean,
				default: false
			},
			objectFit: {
				type: String,
				default: 'contain'
			},
			muted: {
				type: Boolean,
				default: false
			},
			poster: {
				type: String,
				default: ''
			},
		},

		// 数据状态
		data() {
			return {
				videoHtml: '',
				videoSrc: '',
				eventDrive: null,
				videoProps: {},
				randomNum: Math.floor(Math.random() * 100000000 + 1)
			}
		},
		watch: {
			// 监听视频资源文件更新
			src: {
				handler(val) {
					if (!val) return
					this.initVideoHtml()
					setTimeout(() => {
						this.videoSrc = val
					}, 0)
				},
				immediate: true
			},
			// 监听首次加载
			autoplay: {
				handler(val) {
					this.videoProps.autoplay = val
				},
				immediate: true
			},
		},
		// 生命周期
		mounted() {
			this.initVideoHtml()
		},
		// 方法
		methods: {
			// 将video的事件传递给父组件
			videoEvent(data) {
				// console.log('向父组件传递事件 =>', data)
				this.$emit("videoEvent", data)
			},
			changePlaybackProgress(data) {
				this.$emit("changePlaybackProgress", data)

			},
			// 初始化视频
			initVideoHtml() {
				this.videoHtml = `<video
          src="${this.src}"
          id="dom-html-video_${this.randomNum}"
          class="dom-html-video"
          ${this.autoplay ? 'autoplay' : ''}
          ${this.loop ? 'loop' : ''}
          ${this.controls ? 'controls' : ''} 
          ${this.muted ? 'muted' : ''}
		  poster="${this.src}?x-oss-process=video/snapshot,t_0,f_jpg"
          preload="auto"
          playsinline
          webkit-playsinline
          width="100%"
          height="100%"
		  controlslist="nodownload"
          style="object-fit: ${this.objectFit};padding:0;"
		
        >
          <source src="${this.src}" type="video/mp4">
          <source src="${this.src}" type="video/ogg">
          <source src="${this.src}" type="video/webm">
        </video>
      `
				// console.log('视频html =>', this.videoHtml)
			},
			resetEventDrive() {
				this.eventDrive = null
			},
			// 将service层的事件/数据 => 传递给renderjs层
			play() {
				this.eventDrive = 'play'
			},
			pause() {
				this.eventDrive = 'pause'
			},
			stop() {
				this.eventDrive = 'stop'
			},
		}
	}
</script>

<script module="domVideo" lang="renderjs">
	export default {
		data() {
			return {
				video: null,
				timeSetInterval: null,
				num: '',
				options: {},
			}
		},
		mounted() {
			this.initVideoEvent()
		},
		methods: {
			myplay() {
				this.getPlaybackProgress(true)
				this.$ownerInstance.callMethod('videoEvent', 'play')
			},
			mypause() {
				this.getPlaybackProgress(false)
				this.$ownerInstance.callMethod('videoEvent', 'pause')
			},
			myended() {
				this.getPlaybackProgress(false)
				this.$ownerInstance.callMethod('videoEvent', 'ended')
				this.$ownerInstance.callMethod('resetEventDrive')
			},
			initVideoEvent() {
				setTimeout(() => {
					let video = document.getElementById(`dom-html-video_${this.num}`)
					this.video = video
					// 将之前的视频事件移出监听
					video.removeEventListener("play", this.myplay)
					video.removeEventListener("pause", this.mypause)
					video.removeEventListener("ended", this.myended)
					// 监听视频事件/重新监听视频事件
					video.addEventListener('play', this.myplay)
					video.addEventListener('pause', this.mypause)
					video.addEventListener('ended', this.myended)
				}, 100)
				// this.getPlaybackProgress(false)
			},

			eventHandle(eventType) {
				if (eventType) {
					this.video = document.getElementById(`dom-html-video_${this.num}`)
					if (eventType === 'play') {
						setTimeout(() => {
							this.video.play();
						}, 350)
						return
					} else if (eventType === 'pause') {
						setTimeout(() => {
							this.video.pause();
						}, 350)
					} else if (eventType === 'stop') {
						this.video.stop()
					}
				}
			},
			srcChange(val) {
				this.video = document.getElementById(`dom-html-video_${this.num}`)
				// 实现视频的第一帧作为封面，避免视频展示黑屏
				this.initVideoEvent()
				setTimeout(() => {
					let video = document.getElementById(`dom-html-video_${this.num}`)
					video.addEventListener('loadedmetadata', () => {
						let {
							autoplay
						} = this.options
						// video.play()
						// if (!autoplay) {
						// 	video.pause()
						// }
					})
				}, 10)

			},
			propsChange(obj) {
				this.options = obj
			},
			randomNumChange(val) {
				this.num = val
			},
			getPlaybackProgress(bool) {
				// console.log(bool)
				if (bool) {
					this.timeSetInterval = setInterval(() => {
						let currentTime = this.video.currentTime
						let duration = this.video.duration
						this.$ownerInstance.callMethod('changePlaybackProgress', {
							currentTime,
							duration
						})
					}, 1000)

				} else {
					clearInterval(this.timeSetInterval)
					this.timeSetInterval = null

				}
				// console.log(time)
				// 	clearInterval(this.timeSetInterval)
				// 	this.timeSetInterval = null
				// 	this.timeSetInterval = setInterval(() => {
				// 		let currentTime = this.video.currentTime
				// 		let duration = this.video.duration
				// 		this.$ownerInstance.callMethod('changePlaybackProgress', {
				// 			currentTime,
				// 			duration
				// 		})
				// 	}, time)
				//  else {
				// 	clearInterval(this.timeSetInterval)
				// 	this.timeSetInterval = null
				// }

			},
		}
	}
</script>


<style lang="scss" scoped>
	.dom-video {
		overflow: hidden;
		height: 100%;
		padding: 0;

		&-height {
			height: 100%;
		}
	}
</style>

5.在那个页面用就直接引用

	import XXX from '@/components/XXX/XXX.vue'
	直接在用
	<DomVideo ref="domVideo" @videoEvent="method.videoEvent"
				@changePlaybackProgress="method.changePlaybackProgress" :src="ImgUrl" class="domVideo"
				:controls="true" />

如果遇到问题私信我！！

沫轩呀！
关注
uniapp|原生控件层级过高无法覆盖的解决方案
前端程序员、项目经理、人工智能博主
06-25 1万+
简称nview，它是一个原生的类画布的控件，其实cover-view也是用plus.nativeObj.view封装的。这种方式被称为混合渲染。另外cover-view无论如何都无法解决原生导航栏、tabbar、web-view组件的覆盖，为此App端补充了2个层级覆盖方案plus.nativeObj.view和subNVue。但如果在pages.json里注册了原生导航栏和tabbar，nvue里的界面元素默认也无法覆盖这些，也需要plus.nativeObj.view或subNVue。
uni-app/微信小程序video组件层级过高覆盖悬浮按钮
Syleapn的博客
07-30 1万+
uni-app/微信小程序video组件层级过高覆盖悬浮按钮： 一、出现的概率与场景 具有偶然性，即概率性出现，也针对一些手机，尤其在ios版本的一些手机上！ 二、分析： 大体分析说明： 一般的解决方法是采用原生组件cover-view，有图片的话再结合vover-image。但是，一般的悬浮按钮是相对于手机屏幕进行固定的（即不会随着划动被移动），如果采用cover-view...
uniapp video（倍速功能、层级过高、视频第一帧做封面 等问题）
tengyuxin的博客
05-23 7855
逻辑上就是再url后面，添加?出现上下出现黑边的原因是： object-fit ：contain；需要修改为 fill 就可以了。我想要在video视频上面显示内容，可是无论怎么在view中使用定位，都无法盖住视频。后来使用cover-view就可以了。
uni-app-video(支持后台播放音频的视频播放器).zip
10-16
uni-app-video(支持后台播放音频的视频播放器).zip
Uni-App Video 插件教程
最新发布
gitblog_01197的博客
08-19 619
Uni-App Video 插件教程 uni-app-video一个优秀的uni-app影视视频源码项目案例分享，旨在帮助大家更快的上手uniapp视频类项目，个人网站: https://zhaohongcheng.com项目地址:https://gitcode.com/gh_mirrors/un/uni-app-video 1. 项目介绍 Uni-App Video 是一个专为基于 Vue...
uniapp 原生video标签问题
zq15517069607的博客
06-29 1419
uniapp中使用原生video标签
教你在uniapp中解决video组件在app端层级过高的问题
qq_41186730的博客
05-25 2万+
解决video层级过高，有两种方法 1.使用subNvue subNvue，是 vue 页面的原生子窗体，把weex渲染的原生界面当做 vue 页面的子窗体覆盖在页面上。它不是全屏页面，它给App平台vue页面中的层级覆盖和原生界面自定义提供了更强大和灵活的解决方案。它也不是组件，就是一个原生子窗体 { "path": "pages/index/index", "style": { "app-plus": { "subNVues":[{
记录:uni运行H5使用原生video标签、富文本查看图片等
qq_47244439的博客
09-27 1338
于是第一步先到处查阅资料看有没有什么插件可供h5使用并且显示静音按钮等完善的功能，在不懈努力下找到了一个x-video插件，但兼容的不够完善，被弃用；中途还使用了很多类似于“x5-video-player-type="h5" ”的这种属性 ，但是也毫无作用，因为根本不是原生的video标签(内心os：心已死)；最后终于在使用富文本的时候，突然发现。，而uni-video标签在h5中有很多无法使用的属性 例如：无法显示静音按钮，无法使用倍速、画中画等；(为什么没有早点想到，感觉脑子很木)
解决uniapp中video标签层级太高问题
猫七先生的博客
09-19 987
前言：层级太高会导致遮挡其它元素，使用cover-view也能解决，但如果被遮挡的元素使用了第三方UI库，就有点麻烦了。也不知道为什么使用v-html的方式就能解决这个问题，它的解决原理是什么？研究研究v-html实现原理。
uniapp video视频层级过高 遮挡顶部导航 页面弹窗 使用原生子窗体解决问题
05-30
在uniapp项目中 video层级过高 页面滑动时 遮挡顶部导航 或者页面有弹窗效果 视频同时也会遮挡弹窗 使用subNVues 解决此问题 pages.json 中 配置{ "path": "pages/index/index", "style": { ...
uniapp中视频层级过高问题的解决方案
资源摘要信息:"在uniapp开发中，常常会遇到video组件层级过高，导致在页面滑动时遮挡顶部导航或弹窗的问题。为了解决这个问题，可以采用原生子窗体(subNVues)的方式。具体操作如下： 1. 在pages.json文件中进行配置...
video标签层级过高问题
09-28
video标签层级过高问题是由于video标签是小程序中的原生组件，其层级是最高的。因此，无论设置其他组件的z-index为多少，都无法将其覆盖在video标签之上。为了解决这个问题，可以采取以下方法： 1. 可以在video标签...
基于uniapp的uni-video和原生video处理小记
qq_36296358的博客
04-24 1087
想通过uniapp实现调用USB摄像头实现推流到video标签功能，发现摄像头启动了，但是无法预览在页面上。
uniapp的video层级过高引起的页面展示问题
qq_39147047的博客
10-26 6309
uniapp的video层级过高引起的页面展示问题 uniapp的原生组件层级过高，从而一直有黑块悬浮在页面表面，造成页面不美观。 在处理这个问题，我使用了两种方法，一是用处理播放按钮，删除按钮被黑块挡在下面的问题。 <video :src="url + qiniuNewDefuseVedio" object-fit="contain" style="width:200rpx;height: 200rpx;border-radius: 12px;position: relative;" id="de
uni-app之video视频组件
热门推荐
踏雪无痕
06-04 3万+
一.平台差异说明 二.属性说明 备注：video默认宽度 300px、高度 225px，可通过 css 设置宽高。 三.案例实战 1.video界面 <view class="page"> <video class="video" id="demoVideo" :controls="false" :enable-progress-gesture="false" :show-center-play-btn="disable" src="https://img.cdn.ali
uniapp视频播放器（h5+app）
farme_guan的博客
04-27 4618
这是关于一篇在uniapp使用video视频播放器，支持自定义播放器样式，支持手势操作，选集、倍数和清晰度切换，支持SRT字幕格式。
手把手教你uniapp原生插件开发-（无限制缓存）video控件的实现
sfsgtc的博客
04-25 3124
本人对官方原生插件离线包进行修改，封装了一个video控件，可实现任意大小的缓存。
uniapp video视频组件层级的问题
yehaocheng520的博客
11-11 1万+
uniapp 中的video视频组件的层级问题 uniapp中的video视频组件默认是最高层级的，也就是说无论写什么样式，都是在video的下层，这样就会影响到页面的展示。 如果点击视频播放的时候，video视频组件会永远在最高层，为了能够解决这个问题，可以通过另一个方式来处理。 就是视频播放的时候全屏展示，这样就可以避免层级的问题了。 页面顶部添加一个视频的组件 如果是视频格式的则可以点击进行视频的播放 data中创建一个参数用于接收视频路径 页面onReady时创建视频区域 methods方
uni-app APP video层级
small streamed bun
12-24 1522
问题：uni-app写app,video组件层级很高，其他标签调z-idnex，也覆盖不了； 解决：使用v-html指令解决 <template> <view class="page"> <view class="container"> <view class="video"> <view class="httml" v-html="html"> </view> </view> </
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值