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

目录

  • 需求
  • 实现原理
  • 实现代码
  • 页面展示

需求

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

实现原理

  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>

页面展示

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/112556.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

前端性能瓶颈崩溃项目?Webpack助力解决!

&#x1f3ac; 江城开朗的豌豆&#xff1a;个人主页 &#x1f525; 个人专栏 :《 VUE 》 《 javaScript 》 &#x1f4dd; 个人网站 :《 江城开朗的豌豆&#x1fadb; 》 ⛺️ 生活的理想&#xff0c;就是为了理想的生活 ! 目录 ⭐ 专栏简介 &#x1f4d8; 文章引言 一、背…

数据结构详细笔记——二叉树

文章目录 二叉树的定义和基本术语特殊的二叉树满二叉树完全二叉树二叉排序树平衡二叉树 二叉树的常考性质完全二叉树的常考性质二叉树的存储结构顺序存储链式存储 二叉树的先中后序遍历先序遍历&#xff08;空间复杂度&#xff1a;O&#xff08;h&#xff09;&#xff09;中序遍…

【k8s】pod进阶

一、资源限制 1、资源限制的概念 当定义 Pod 时可以选择性地为每个容器设定所需要的资源数量。 最常见的可设定资源是 CPU 和内存大小&#xff0c;以及其他类型的资源。 当为 Pod 中的容器指定了 request 资源时&#xff0c;调度器就使用该信息来决定将 Pod 调度到哪个节点上…

【高光谱与多光谱:空间-光谱双优化模型驱动】

A Spatial–Spectral Dual-Optimization Model-Driven Deep Network for Hyperspectral and Multispectral Image Fusion &#xff08;一种用于高光谱与多光谱图像融合的空间-光谱双优化模型驱动深度网络&#xff09; 深度学习&#xff0c;特别是卷积神经网络&#xff08;CNN…

【Java 进阶篇】Java Response 输出字符数据案例

在Java Web开发中&#xff0c;使用HTTP响应对象&#xff08;Response&#xff09;来向客户端发送数据是一项非常重要的任务。本篇博客将详细介绍如何使用Java中的Response对象来输出字符数据&#xff0c;并提供示例代码以帮助读者更好地理解和应用这一概念。不仅将讨论基础知识…

java 申请堆外内存吗? java如何使用堆外内存?

java 申请堆外内存吗&#xff1f; java如何使用堆外内存&#xff1f; Java堆外内存管理 JVM可以使用的内存分外2种&#xff1a;堆内存和堆外内存&#xff1a; 堆内存完全由JVM负责分配和释放&#xff0c;如果程序没有缺陷代码导致内存泄露&#xff0c;那么就不会遇到java.lan…

【5G PHY】5G SS/PBCH块介绍(二)

博主未授权任何人或组织机构转载博主任何原创文章&#xff0c;感谢各位对原创的支持&#xff01; 博主链接 本人就职于国际知名终端厂商&#xff0c;负责modem芯片研发。 在5G早期负责终端数据业务层、核心网相关的开发工作&#xff0c;目前牵头6G算力网络技术标准研究。 博客…

工业4G路由器桥接多网络,提升工业环境网络覆盖

一款专为工业环境应用所设计的物联网通讯设备“工业4G路由器”&#xff0c;它具有多种功能和特性。其中之一就是桥接功能&#xff0c;在工业领域中被广泛应用并起着重要的通信作用。 桥接功能是指工业4G路由器通过无线网络的方式&#xff0c;为不同的工业设备提供网络并将其连…

【Linux】jdk、tomcat、MySQL环境搭建的配置安装,Linux更改后端端口

一、作用 工具的组合为开发者和系统管理员提供了构建和运行Java应用程序以及存储和管理数据的完整环境。 JDK&#xff08;Java Development Kit&#xff09;&#xff1a;JDK是Java开发工具包&#xff0c;它提供了开发和运行Java应用程序所需的工具和库。通过安装JDK&#xff0c…

git教程(2)---远程仓库操作

git教程---远程仓库 远程操作创建远程仓库克隆远程仓库HTTPSSSH 向远程仓库推送拉取远程仓库.gitignore文件给git指令起别名IssuesPull Requests 标签管理操作标签推送标签 多人协作场景一场景二 开发模型Git分支设计规范使用Gitee的DevOps平台体验项目开发流程 远程操作 创建…

vue+element ui中的el-button自定义icon图标

实现 button的icon属性自定义一个图标名称&#xff0c;这个自定义的图标名称会默认添加到button下i标签的class上&#xff0c;我们只需要设置i标签的样式就可以了 ##3. 按钮上使用自定义的icon 完整代码 <div class"lookBtn"><el-button icon"el-icon-…

Web3时代:探索DAO的未来之路

Web3 的兴起不仅代表着技术进步&#xff0c;更是对人类协作、创新和价值塑造方式的一次重大思考。在 Web3 时代&#xff0c;社区不再仅仅是共同兴趣的聚集点&#xff0c;而变成了一个价值交流和创新的平台。 去中心化&#xff1a;超越技术的革命 去中心化不仅仅是 Web3 的技术…

go 语言介绍

背景 一直有在零散的时间用go写点代码&#xff0c;正好借着最近比较有时间写东西的契机&#xff0c;给这个看着年轻&#xff0c;实际也已经发展10几年&#xff0c;并在当下众多开发领域都有不可忽视作用的语言做个介绍吧 golang 的起点 golang 的诞生可以说是时代造就了它&a…

MolFormer分子预训练模型

Large-scale chemical language representations capture molecular structure and properties&#xff08;2022&#xff0c;NMI&#xff09; 和原本transformer encoder的不同&#xff1a; 采用linear attention mechanismrotary positional embedding 模型 transformer e…

arcgispro中机器学习部分

参考链接 arcgis.learn 模块 |ArcGIS API for Python arcgis包位置 安装路径\GeoScene\Pro\bin\Python\envs\arcgispro-py3\Lib\site-package\arcgis 以automl进行训练工具为例&#xff0c;工具导入模块中涉及机器学习的模块 该模块所在位置 安装路径\GeoScene\Pro\bin\Py…

VCS与XRUN对语法支持的不同点(持续更新...)

静态方法声明位置不同&#xff1a;VCS支持声明在class内/外&#xff08;extern&#xff09;两种方式&#xff0c;XRUN只支持static function声明于类内&#xff0c;不支持类外声明&#xff08;带extern关键字&#xff09;。 字符串转二进制、8进制、十进制、16进制方法&#xf…

回归预测 | Matlab实现SO-CNN-SVM蛇群算法优化卷积神经网络-支持向量机的多输入单输出回归预测

Matlab实现SO-CNN-SVM蛇群算法优化卷积神经网络-支持向量机的多输入单输出回归预测 目录 Matlab实现SO-CNN-SVM蛇群算法优化卷积神经网络-支持向量机的多输入单输出回归预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.SO-CNN-SVM蛇群算法优化卷积神经网络-支持向量…

javaEE -15( 13000字 JavaScript入门 - 2)

一&#xff1a;JavaScript(WebAPI) JS 分成三个大的部分 ECMAScript: 基础语法部分DOM API: 操作页面结构BOM API: 操作浏览器 WebAPI 就包含了 DOM BOM&#xff0c;这个是 W3C 组织规定的. (和制定 ECMAScript 标准的大佬们不是一伙人). 前面学的 JS 基础语法主要学的是 …

MySQL主从复制---一主一从配置过程

1、mysql版本一致且后台以服务运行 2、主从都配置在[mysqld]结点下&#xff0c;都是小写 3、主机修改my.ini配置文件 配置信息说明&#xff1a; 1、主服务器唯一ID server-id1 2、启用二进制日志 log-bin自己本地的路径/data/mysqlbin log-binD:/devSoft/MySQLServer5.5…

Maven第五章: 搭建maven私服以及如何进行管理?

Maven第五章&#xff1a; 搭建maven私服以及如何进行管理&#xff1f; 前言 nexus是什么&#xff1f; Nexus是Sonatype公司发布的一款仓库&#xff08;Repository&#xff09;管理软件&#xff0c;常用来搭建Maven私服&#xff0c;所以也有人将Nexus称为“Maven仓库管理器”…