解决app中video无法播放，但是在html文件中可以播放的bug（uniapp）

有时候后端上传文件服务器后返回的在线地址，链接访问不是直接播放视频，而是帮你下载下来。的 app 中，他是无法播放的，但是这个视频链接在。

A Naruto

3228人浏览 · 2023-03-22 17:16:28

A Naruto · 2023-03-22 17:16:28 发布

有时候后端上传文件服务器后返回的在线地址，链接访问不是直接播放视频，而是帮你下载下来。这时候如果在 uniapp的 app 中，他是无法播放的，但是这个视频链接在 html 文件的 <video> 标签中是可以播放的

解决办法：使用 uniapp 的 <web-view> 加载本地的 html 里的 <video> 标签来渲染这个视频，这个方式可以播放，如果需要联动，这个时候就需要使用到 web-view 和 app 去进行交互

uniapp的web-view传送门

<web-view :webview-styles="{
	    width:'100%',
	    height:'100%', 
	}" :src="`/static/html/file.html?url=${showM diaUrl}`" @message="closeToast"></web-view>

注意：这个 file.html 文件必须要在项目的 static 的文件夹下，然后如果需要渲染的 video 标签链接是一个动态的，就可以将它拼接在 src 路径下，这个时候就可以在 file.html 中可以通过 window.location.href 获取到完整路径。然后切割出需要渲染的 video 路径

app 中接收 webview 传递出来的数据

// 这个是在 webview 中被抛出的信息
closeToast (event) {
	console.log(event,'event');
	this.closePopup()
},

html 的代码结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
	<script src="./uni.webview.1.5.4.js"></script>
</head>
<style>
	body {
		position: relative;
		width: 98vw;
		margin: 0 auto;
		height: 100vh;
		background-color: rgba(0,0,0,0.5);
	}
	video {
		width: 100%;
		border-radius: 10px;
		height: 80%;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
	}
</style>
<body>
    <video id="video" controls src=""></video>
</body>
</html>
<script>    
    // 获取完整路径，切割出视频链接，然后给 video 赋值上去
	let href = window.location.href
	let url = href.split('url=')[1]
	document.querySelector('#video').setAttribute('src',url)
	// 监听 uni.webview.js 完成挂载，
	// 监听页面点击。发送事件出去给app
	document.addEventListener('UniAppJSBridgeReady', function() {
		 let btn = document.querySelector('close')
		 document.body.onclick = function () {
			  uni.postMessage({
			    data: {
			        clsoe:true
			    }
			});
		 }
	 })
</script>

uni.webview.js地址