Vue首页如何放视频，并且切换页面后暂停播放，切回来后继续播放

        接到需求，需要在开发的系统首页放上公司宣传视频。

        碰到问题：1、首页切换到其他页面后再切回来，视频不会继续播放。2、首页切换到其他页面，再回来，视频会在间隔的时间里持续后台播放。

        第一个问题是视频播放，放到onMounted方法里，切换回首页不会再次触发。第二个问题是因为页面有缓存。

        后利用vue的生命周期函数，onActivated、onDeactivated解决问题(这两个周期函数会在页面切换回来，以及切走时触发)，并且利用了video的play()和pause()方法实现暂停与播放，controls=false可以实现首页去掉视频播放控制条的效果。代码如下：

<video ref="bVideo" width="100%" height="100%" controls="false" autoplay loop muted>
<source src="http://xxx.xxx.xxx.xxx:9000/test/xxxx.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

import {ref,onActivated,onDeactivated,onMounted} from 'vue'
const bVideo = ref();

onMounted(() => {
  bVideo.value.controls=false;
})

onActivated(() => {
  if(bVideo.value){
    bVideo.value.play();
  }
})

onDeactivated(() => {
  if(bVideo.value){
    bVideo.value.pause();
  }
})

        即可实现，进入系统首页自动开始播放视频，切换页面自动暂停，重新切换回首页则继续上次播放的位置，开始播放。由于浏览器规则等原因，自动播放的视频，只能是静音。