uniapp video组件无法播放视频解决方案

流氓也是种气质 _Cookie2024-12-20 21:51

前言

一般正常的视频使用video组件就能播放。但视频源存在问题，在浏览器能正常播放

在Hbuilderx内置浏览器在真机无法播放

使用v-html的方式

javascript 复制代码

<template>
<uni-popup class="videoPop" type="center" ref="videoPop">
				<view style="width: 100%;height: 100%;text-align: center;" v-html="videoHTML">
				</view>
			</uni-popup>
</template>

</script>
this.$refs.videoPop.open()
					this.videoHTML =
						`<video class="video-box" src="${this.videoUrl}" :autoplay="false" play-strategy="3" controls style="width:100%;height:100%"></video>`
</script>

使用web-view的方式

web-view存在路由返回的问题，首先要自定义整个顶部窗口

javascript 复制代码

{
			"path": "pages/Water/cameraPage/cameraControl",
			// "style": {
			// 	"navigationBarTitleText": "云台控制",
			// 	"enablePullDownRefresh": false
			// }
			"style": {
				"navigationBarTitleText": "云台控制",
				"backgroundColor": "#f2f2f2",
				"navigationStyle": "custom",
				"app-plus": {
					"bounce": "none",
					"titleNView": {
						"autoBackButton": "true"
						// "buttons": [{
						// 	"type": "home",
						// 	"float": "right"
						// }]
					}
				}
			}
		},

cameraControl.vue

javascript 复制代码

<template>
	<web-view :src=url class="mapCon"></web-view>
</template>

<script>
	var _self;
	export default {
		data() {
			return {
				url: '',
				videoUrl:''
			};
		},
		components: {
			footerNav
		},
		onReady() {
			_self = this;
			uni.getSystemInfo({
				success: resu => {
					const query = uni.createSelectorQuery();
					query.select('.mapBox').boundingClientRect();
				
				},
				fail: res => {}
			});
		},
		onLoad(option) {
			this.videoUrl = option.videoUrl
			this.url = '/hybrid/html/waterVideo.html?videoUrl=' + this.videoUrl
		},
		methods: {

		}

	};
</script>



<style scoped>
	.mapBox {
		width: 100%;
	}
</style>

waterVideo.html

html 复制代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>云台控制</title>
		<meta name="viewport" content="user-scalable=no" />
		<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
		<script src="./webView.js"></script>
        <body>
            <div id="app">
			<div id="searchBind">
				<van-icon class="closeIcon" name="cross" @click="back()" />
			</div>
			<div id="mapMenuPop" class="mapMenu" @click="back()">
				<!-- <div id="searchBind" >
					<van-icon name="cross" @click="back()"/>
				</div> -->
				<video id='myVideo' controls="true" :autoplay="false" :src="videoUrl">                        </video>
			</div>
		</div>
        </body>

</html>