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_915921431 天前
掌握 iOS 26 App 性能监控,从监测到优化的多工具组合流程
android·macos·ios·小程序·uni-app·cocoa·iphone
勉灬之1 天前
通过npm run XXX命令生成uniapp的pages.json文件
npm·uni-app·json
知识分享小能手1 天前
uni-app 入门学习教程,从入门到精通, uni-app常用API的详细语法知识点(上)(5)
前端·javascript·vue.js·学习·微信小程序·小程序·uni-app
2501_916008891 天前
手机 iOS 系统全解析,生态优势、开发机制与跨平台应用上架实践指南
android·ios·智能手机·小程序·uni-app·iphone·webview
00后程序员张1 天前
Fiddler使用教程,全面掌握Fiddler抓包工具的配置方法、代理设置与调试技巧(HTTPHTTPS全解析)
前端·测试工具·ios·小程序·fiddler·uni-app·webview
2501_916008891 天前
HTTPS 下的 DDoS 防护与抓包分析实战,从检测到快速缓解的工程化打法
网络协议·ios·小程序·https·uni-app·iphone·ddos
2501_915918411 天前
App 使用 HTTPS 的工程化实战,从接入到真机排查的一线指南
android·ios·小程序·https·uni-app·iphone·webview
Rysxt_1 天前
Electron 与 uni-app 区别教程:如何选择适合你的跨平台开发框架?
javascript·electron·uni-app·跨平台
EasyNVR1 天前
EasyNVR 录像自由时段启停与快照定时更新
音视频
ontheway-xx1 天前
ffmpeg4.4.2 gcc 15.2.0 编译错误
ffmpeg·音视频