视频列表:点击某个视频进行播放,其余视频全部暂停(同时只播放一个视频)

这篇具有很好参考价值的文章主要介绍了视频列表:点击某个视频进行播放,其余视频全部暂停(同时只播放一个视频)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

需求

视频列表:点击某个视频进行播放,其余视频全部暂停(同时只播放一个视频

实现原理

  1. 在 video 标签添加 自定义属性 id (必须唯一)
  2. 给每个 video 标签 添加 play 视频播放事件
  3. 播放视频时,触发 play 事件,通过添加的自定义属性 id 判断,将 非当前播放视频都暂停

实现代码

<!-- 查看视频 -->
<template>
  <el-drawer
    title="查看视频"
    size="70%"
    :visible.sync="drawerVisible"
    destroy-on-close
    :before-close="handleClose"
  >
    <div class="list">
      <div v-for="item in videoList" :key="item.id">
        <!-- 【主要代码】添加自定义属性 id -->
        <video width="100%" controls="controls" :data-id="item.id">
          <source src="./video.mp4" type="video/mp4" />
        </video>
      </div>
    </div>
  </el-drawer>
</template>

<script>
export default {
  name: 'VideoListDrawer',

  data() {
    return {
      drawerVisible: false,

      drawerType: '',
      videoList: [...Array(20).keys()].map((item) => {
        return {
          id: item
        }
      }),
      currentVideo: ''
    }
  },

  methods: {
    open(type, rowData) {
      this.drawerType = type
      setTimeout(() => {
        this.getVideoDom()
      }, 500)
      this.drawerVisible = true
    },
	
	// 【主要代码】视频播放暂停处理函数
    getVideoDom() {
      const videoList = document.querySelectorAll('video')
      videoList.forEach((item) => {
        // 每个 video 添加 play 监听事件
        item.addEventListener('play', (e) => {
          // 获取当前播放视频的自定义属性 id 的值
          this.currentVideo = e.target.dataset.id
          // 遍历所有 video 标签,将非当前播放视频都暂停
          videoList.forEach((i) => {
            if (i.dataset.id !== this.currentVideo) {
              i.pause() // 暂停视频
            }
          })
        })
      })
    },

    handleClose() {
      this.drawerVisible = false
    }
  }
}
</script>

<style lang='scss' scoped>
::v-deep .el-drawer {
  .el-drawer__header {
    text-align: left;
  }
  .el-drawer__body {
    padding: 10px 20px;
    text-align: left;

    .btns {
      margin-bottom: 10px;
    }

    .list {
      display: flex;
      flex-wrap: wrap;
      > div {
        width: calc(50% - 10px);
        margin-right: 10px;
        margin-bottom: 10px;
      }
    }
  }
}
</style>

页面展示

视频列表:点击某个视频进行播放,其余视频全部暂停(同时只播放一个视频),项目问题,html,JavaScript,音视频,javascript,前端文章来源地址https://www.toymoban.com/news/detail-739964.html

到了这里,关于视频列表:点击某个视频进行播放,其余视频全部暂停(同时只播放一个视频)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包