login.nvue 页面代码
<template>
<div>
<backgrounVideo></backgrounVideo>
<div class="background">
</div>
</div>
</template>
<script>
import backgrounVideo from "@/components/backgrounVideo";
export default {
components: {
backgrounVideo
},
data() {
return {
}
},
methods: {
}
}
</script>
<style>
/* 按钮样式 */
</style>
backgrounVideo.nvue 组件代码
<template>
<video
ref="bgVideos"
id="bgVideo"
:src="backgroundSrc"
:autoplay="true"
:enable-progress-gesture="false"
:page-gesture="false"
:controls="false"
:muted="true"
:show-fullscreen-btn="false"
:show-center-play-btn="false"
:loop="true"
object-fit="fill"
:poster="poster"
:show-loading="false"
>
</video>
</template>
<script>
export default {
data()
{
return{
poster:"",
backgroundSrc:"",
}
},
mounted(){
this.$nextTick(()=>{
//组件挂载完成后动态赋值视频地址
this.backgroundSrc ='https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4';
})
},
methods: {
}
}
</script>
<style>
</style>
取代方案：
之前早就发现了这个问题，是因为有可用的取代方案，所以一直没提交bug，解决这问题，只需要动态设置 muted‘值即可解决，
在data中设置muted默认值为false，把muted绑定到data中， 在每次动态赋值src后在修改 data中的muted为 true 集可以解决
0 个回复