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

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

前言

因为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">
        <