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>
相关推荐
小徐_23332 天前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
iOS阿玮2 天前
永远不要站在用户的对立面,挑战大众的公知。
uni-app·app·apple
xw52 天前
uni-app中v-if使用”异常”
前端·uni-app
!win !2 天前
uni-app中v-if使用”异常”
前端·uni-app
kaixin_啊啊2 天前
突破限制:Melody远程音频管理新体验
音视频
2501_915918412 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
ai产品老杨2 天前
解锁仓储智能调度、运输路径优化、数据实时追踪,全功能降本提效的智慧物流开源了
javascript·人工智能·开源·音视频·能源
MThinker2 天前
02-Media-8-uvc_with_csc.py 使用硬件解码的USB摄像头(UVC)捕获视频并显示的程序
音视频·智能硬件·micropython·canmv·k230
向阳花开_miemie2 天前
Android音频学习(十八)——混音流程
学习·音视频
00后程序员张2 天前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview