video-play插件的使用

grtjh203

已于 2024-01-18 13:13:06 修改

阅读量203

点赞数

文章标签： javascript 前端 html

于 2023-03-15 14:19:22 首次发布

本文链接：https://blog.youkuaiyun.com/qq_59297167/article/details/129554338

版权

当点击视频区域内的X关闭按钮时，通过绑定`click.stop`阻止事件冒泡，调用`close`方法将`flag`设为false并重置视频源，使视频回到初始状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

点击关闭按钮回到初始状态

 close(){
          this.flag=false
          this.$refs.videoPlayer.player.src("http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4") //重置进度条
        }

点击视频区域的X关闭按钮时，需要阻止事件冒泡

<div  @click="close"> 
    <div  class="video" :class="{active:flag}"  @click.stop="big">
      <video-player   class="video-player vjs-custom-skin"
                    ref="videoPlayer"
                    :playsinline="true"
                    :options="playerOptions"
      ></video-player>
      <div class="close" v-show="flag" @click.stop="close">x</div>
    </div>

  </div>