前言
一般正常的视频使用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.videoUrl
this.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>
