preview-realtime.nvue
<!-- 实时预览 -->
<template>
<view class="preview-realtime">
<!-- 预览视频 -->
<view class="preview-realtime__video">
<!-- https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4 -->
<video class="video" id="myVideo" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
@error="videoErrorCallback" enable-danmu danmu-btn controls
poster="https://web-assets.dcloud.net.cn/unidoc/zh/poster.png"></video>
<cover-view class="preview-realtime__camera" v-if="cameraStatus"></cover-view>
</view>
<!-- 操作栏 -->
</view>
</template>
<script setup>
import {
onMounted,
ref
} from "vue";
const cameraStatus = ref(false);
// 是否静音
// 视频播放错误
const videoErrorCallback = (error) => {
console.log(error);
}
</script>
<style lang="scss" scoped>
.preview-realtime {
&__video {
position: relative;
.video {
/* #ifdef H5 */
width: 100%;
/* #endif */
// width: 100vw;
height: 800rpx;
}
}
&__camera {
position: absolute;
top: 20rpx;
right: 20rpx;
width: 30rpx;
height: 30rpx;
background-color: #ed1a12;
border-radius: 50%;
}
}
</style>
b***@163.com (作者)
我这边已经有试过更新到 3.8.12 了，你看上面的环境描述。
2023-08-24 14:45