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

前言

一般正常的视频使用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>
相关推荐
2501_915918412 小时前
iOS 26 App 性能测试|性能评测|iOS 26 性能对比:实战策略
android·macos·ios·小程序·uni-app·cocoa·iphone
用户9047066835712 小时前
uniapp Vue3版本,用pinia存储持久化插件pinia-plugin-persistedstate对微信小程序的配置
前端·uni-app
小美哥131413 小时前
格式工厂转换视频很慢、Pr视频剪辑导出很慢的优化设置(就用显卡的默认设置即可)
音视频·格式工厂
乔冠宇13 小时前
uniapp创建ts项目tsconfig.json报错的问题
uni-app
细节控菜鸡13 小时前
【2025最新】uniapp 中基于 request 封装实现多文件上传完整指南
uni-app
fakaifa13 小时前
【全开源】企业微信SCRM社群营销高级版系统+uniapp前端
uni-app·开源·企业微信·scrm·源码下载·企业微信scrm
宠友信息16 小时前
仿小红书短视频APP源码:Java微服务版支持小程序编译的技术解析
java·微服务·音视频
棋子一名16 小时前
跑马灯组件 Vue2/Vue3/uni-app/微信小程序
微信小程序·小程序·uni-app·vue·js
游戏开发爱好者817 小时前
BShare HTTPS 集成与排查实战,从 SDK 接入到 iOS 真机调试(bshare https、签名、回调、抓包)
android·ios·小程序·https·uni-app·iphone·webview
2501_9160088917 小时前
iOS 26 系统流畅度实战指南|流畅体验检测|滑动顺畅对比
android·macos·ios·小程序·uni-app·cocoa·iphone