首页 > 其他分享 >js实现多个video,一个播放其他暂停

js实现多个video,一个播放其他暂停

时间:2024-03-20 17:44:35浏览次数:23  
标签:function index 播放 videos js length video videoElement

window.onload=function(){
    var videos = document.getElementsByTagName('video');//获取所有video
    //循环给所有video添加监听事件 当前的video开始播时  调用pauseAll 将当前播放的video的索引传值过去
    for (var i = videos.length - 1; i >= 0; i--) {
        (function(n){
            videos[n].addEventListener('play',function(){
                pauseAll(n);
            })
        })(i)
    }
    //接收调用传来的索引 循环所有video 索引与传来的索引不相同的 暂停 重载
    function pauseAll(index){
        for (var j = videos.length - 1; j >= 0; j--) {
            if (j!=index){
                videos[j].pause();
                videos[j].load();
            }
        }
    };

}

  vue

<div class='video-list'>
    <div class="video-wrap" v-for="(item, index) in dataList" :key="index">
          <div class="video">
                <video :src="item.src" @play="handlePlay(index)" controls="controls">
                  您的浏览器不反对 video 标签。
                </video>
          </div>
    </div>
</div>

data () {
    videoElement: [] // 创立一个数组
},
mounted () {
    this.videoElement = document.getElementsByTagName('video') // 获取页面上所有的video对象
},
handlePlay (index) {
    const videoElement = this.videoElement
    if (videoElement && videoElement.length > 0) {
        for (let i = 0; i < videoElement.length; i++) {
            if (i === index) {
                this.videoElement[i].play()
            } else {
                this.videoElement[i].pause()
            }
        }
    }
}

 

标签:function,index,播放,videos,js,length,video,videoElement
From: https://www.cnblogs.com/j-a-h/p/18085737

相关文章

  • Three.js快速入门
    Three.js介绍创建目录并使用 npminit-y 初始化 package.json使用 npminstall--save-devparcel 安装 Web 应用打包工具 parcel这一步不是必须的,可以使用其他打包工具例如 webpack 等在目录中新建 src/index.html 和 src/script.js 两个文件<!DOCT......
  • 企业身份认证接口-身份证实名认证接口免费调用-Node.js接口调用教程
    现如今,无论是银行开户、办理社保、购买保险、在线教育、电商购物等等的应用场景,都需要进行身份证的实名认证。随着人工智能技术的不断开拓与创新,身份证实名认证已经逐步实现了智能化、在线化。也正因如此,企业对于身份证实名认证接口的需求也在不断增多。翔云身份证识别接口与身份......
  • 基于Java的校园电商物流云平台(Vue.js+SpringBoot)
    目录一、摘要1.1项目介绍1.2项目录屏二、功能模块2.1数据中心模块2.2商品数据模块2.3快递公司模块2.4物流订单模块三、系统设计3.1用例设计3.2数据库设计3.2.1商品表3.2.2快递公司表3.2.3物流订单表四、系统展示五、核心代码5.1查询商品5.2查询快递公......
  • Android视角看鸿蒙第七课(module.json5中的各字段含义之abilities)
    Android视角看鸿蒙第七课(module.json5中的各字段含义之abilities)导读今天一起来了解module.json5中的最后一个字段,也是最复杂的字段abilities官方文档Indicatesallabilitiesinthecurrentmodule.Thevalueisanarrayofobjects,eachofwhichrepresentsan......
  • 基于Java的医院门诊预约挂号系统(Vue.js+SpringBoot)
    目录一、摘要1.1项目介绍1.2项目录屏二、功能模块2.1功能性需求2.1.1数据中心模块2.1.2科室医生档案模块2.1.3预约挂号模块2.1.4医院时政模块2.2可行性分析2.2.1可靠性2.2.2易用性2.2.3维护性三、数据库设计3.1用户表3.2科室档案表3.3医生档案表3.4......
  • 基于Java的考研专业课程管理系统(Vue.js+SpringBoot)
    目录一、摘要1.1项目介绍1.2项目录屏二、功能模块2.1数据中心模块2.2考研高校模块2.3高校教师管理模块2.4考研专业模块2.5考研政策模块三、系统设计3.1用例设计3.2数据库设计3.2.1考研高校表3.2.2高校教师表3.2.3考研专业表3.2.4考研政策表四、系统展......
  • fastjson记录
    参考指南fastjson:我一路向北,离开有你的季节|素十八(su18.org)Java反序列化漏洞始末(3)—fastjson-浅蓝'sblog(b1ue.cn)梅子酒の笔记本(meizjm3i.github.io)fastjson基础早期版本的fastjson的框架图fastjson功能要点:fastjson在创建一个类实例时会通过反射......
  • 【附源码】Node.js毕业设计服装创意定制管理系统(Express)
    本系统(程序+源码)带文档lw万字以上  文末可获取本课题的源码和程序系统程序文件列表系统的选题背景和意义选题背景:随着互联网技术的飞速发展,人们对于个性化、定制化的需求日益增长。在服装行业,传统的成品服装销售模式已经无法满足消费者对于个性化、独特性的追求。因此,越......
  • 【附源码】Node.js毕业设计扶贫助农系统(Express)
    本系统(程序+源码)带文档lw万字以上  文末可获取本课题的源码和程序系统程序文件列表系统的选题背景和意义选题背景:在现代社会,随着科技的不断发展和互联网技术的进步,信息技术已经深入到各个领域中,对人们的生产和生活方式产生了深远的影响。特别是在农业领域,传统的农业生产......
  • 梨花带雨网页音乐播放器二开优化修复美化版全开源版本源码,附带系统搭建教程
    梨花带雨播放器基于thinkphp6开发的XPlayerHTML5网页播放器前台控制面板,支持多音乐平台音乐解析。二开内容:修复播放器接口问题,把接口本地化替换掉原来的接口,扒梨花的前端UI,美化登录页面源码免费下载地址抄笔记chaobiji.cn......