学习video相关事件及vue中监听切出页面方法

Posted 2023-05-10 sunnyeve

1.vue中监听切出页面方法

使用到的事件为： visibilitychange

visibilitychange 是浏览器新添加的一个事件，当浏览器当前页面被最小化或切换浏览器其他标签页后者从其他页面或应用返回到当前标签页 都会触发这个事件。

document.visibilityState 共有四个值：
   hidden：文档处于背景标签页或者窗口处于最小化状态，或者操作系统正处于锁屏状态。
   visible：只要页面可见，就会返回visible。
   prerender: 页面在屏幕外执行预渲染处理 document.hidden 的值为 true。
   
注意：当 document.visibilityState 属性返回 visible时， document.hidden 属性返回 false，其他情况返回true。

vue 代码如下：
export default 
  data()
    return 
  ,
  mounted()
    document.addEventListener(\'visibilitychange\', this.handleVisibleChange)
  ,
  destroyed()
    document.removeEventListener(\'visibilitychange\', this.handleVisibleChange)
  ,
  methods:
    handleVisibleChange(e)
      switch(e.target.visibilityState)
        case \'prerender\':
          // 网页预渲染，内容不可见
          break;
        case \'hidden\':
          // 内容不可见，处理后台，最小化，锁屏状态
          // 这里可以提示用户离开当前页面了
          break；
        case \'visible\':
          // 处于正常打开
          break;
      
    
  

 2.video视频相关事件方法

<video
ref="video"


controls     （如果出现这个属性，则显示播放控件，如播放按钮等）
poster="封面图片"
autoplay     （在视频就绪后马上播放）
preload      （视频在页面加载时进行加载，并预备播放，如果使用了autoplay则忽略该属性）
src="视频地址"
>
你的浏览器不支持video标签
</video>
事件：
timeupdate: 当前播放位置发生改变时产生该事件
this.$refs.video.currentTime: 获取当前播放的时间，单位秒
this.$refs.video.duration: 获取视频播放总时长，单位秒
this.$refs.video.volume(): 可设置视频播放音量
this.$refs.video.muted: 布尔值，可设置是否静音。
this.$refs.video.initialTime: 返回初始播放的位置

pause： 当媒体暂停时产生该事件
play： 当媒体播放时产生该事件
volumechange: 当音量发生改变时产生该事件

3.综合demo

   背景描述： 从A列表页面进入B详情页面，播放视频，当离开页面或者切换页面时，暂停播放视频，重新进入页面时继续播放视频，当播放一定时长后向后端发送已播放接口，标记当前视频已播放状态。

// A列表页面
<template>
  <div>
    <div @click="goDetail">去详情</div>
  </div>
</template>
<script>
  export default 
    name:\'List\',
    ...
    methods:
      goDetail()
        this.$router.push(
          path: \'/detail\',
          query: ..., //这里可根据实际传递参数
        )
      
    
  
</script>

// B详情页面
<template>
  <div class="page-container">
    <video
    ref="video"
    :poster="poster"
    :src="src"
    controls
    preload
    oncontextmenu="return false"
    controlslist="nodownload"
    @click="handleClickVideo"
    @playing="playing"
    @pause="pause"
    ></video>
  </div>
</template>
<script>
export default 
  name:\'Detail\'
  data()
    return 
      poster:\'\', //视频封面地址
      src: \'\', //视频播放地址
      seconds: 0,//视频播放时长
      duration: 0,//视频总时长
      timer: null, //视频播放定时器
    
  ,
  watch: 
    seconds(nv, ov) 
      // 假设 播放时长超过视频总时长的90%，标记为已播放状态
      if(nv > this.duration * 0.8)
        // 这里就调用标记为已播放状态接口
        
        //以及这里需要清除定时器等
        clearInterval(this.timer)
        this.timer=null
        this.seconds=0
      
    
  ,
  mounted()
    document.addEventListener(\'visibilitychange\', this.handleVisible)
  ,
  destroyed()
    document.removeEventListener(\'visibilitychange\', this.handleVisible)
    clearInterval(this.timer)
    this.timer=null;
    this.seconds = 0
  ,
  methods:
    // 监听页面切出或切换，锁屏状态等触发事件
    handleVisible(e)
      switch(e.target.visibilityState)
        case \'prerender\':
          //网页渲染，内容不可见
          break;
        case \'hidden\':
          //内容不可见，处理后台，最小化，锁屏状态
          clearInterval(this.timer)
          this.timer= null
          setTimeout(()=>
            this.$refs.video.pause()
          , 10)
          break;
        case \'visible\':
          //正常打开
          setTimeout(()=>
            this.$refs.video.play()
          ,10)
          if(this.timer)
            clearInterval(this.timer)
            this.timer = null;
          
          this.timer = setInterval(()=>
            this.seconds++
          ,1000)
          break;
      
    , 
    // 点击视频，如果处理播放状态则暂停，处于暂停状态则播放，可获取视频总时长
    handleClickVideo()
      const duration = this.$refs.video.duration
      this.duration = duration
      if(this.$refs.video.paused)
        this.$refs.video.pause()
      else
        this.$refs.video.play()
      
    ,
    // 视频播放触发事件
    playing()
      const currentTime = this.$refs.video.currentTime
      this.seconds = parseInt(currentTime)
      if(currentTime<=0)
        this.seconds = 0;
      
      if(this.timer)
        clearInterval(this.timer)
        this.timer = null
      
      this.timer = setInterval(()=>
        this.seconds++
      ,1000)
    ,
    // 视频暂停触发事件
    pause()
      const currentTime = this.$refs.video.currentTime
      if(this.timer)
        clearInterval(this.timer)
        this.timer = null
      
      this.seconds = parseInt(currentTime)
    ,
    //这里可以根据实际请求其他接口，例如根据id获取视频地址，封面等
    //或者请求视频已播放状态接口
    /* 假设在弹窗中查看视频，如弹窗中的视频已播放了一段时间，再次查看该视频时，
     * 需要在关闭弹窗前把视频的播放时间归为0，可使用
       this.$refs.video.currentTime = 0
       this.$refs.video.initialTime = 0
    */

  

</script>

 

参考链接：

    https://blog.csdn.net/weixin_47082552/article/details/123698903  - vue监听切出页面方法

如果快乐太难，那祝你平安。

Vue3返回顶部组件及返回顶部js封装

介绍

vue3中，封装监听页面滚动的js， 及页面滚动到一定像素时，显示返回顶部的按钮，点击按钮会有放大的动画，并逐渐滚动到顶部的组件。效果如下：

代码

1. 封装js，监听屏幕滚动事件，以及是否显示返回顶部的按钮；
   在项目目录下新建 utils文件夹，并在该文件夹下创建index.js文件；在这文件里写全局通用的一些方法；现在需要用到的返回顶部的方法就写这里面。

/**
 * @监听屏幕滚动式时，是否显示返回顶部的按钮
 * @return  boolean  返回结果为布尔类型
 **/
export const startScroll = () =>