前言
一般正常的视频使用video组件就能播放。但视频源存在问题，在浏览器能正常播放
在Hbuilderx内置浏览器 在真机无法播放
使用v-html的方式
<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存在路由返回的问题 ，首先要自定义整个顶部窗口
{"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
<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.videoUrlthis.url = '/hybrid/html/waterVideo.html?videoUrl=' + this.videoUrl},methods: {}};
</script><style scoped>.mapBox {width: 100%;}
</style>waterVideo.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>