react中一个音频或视频播放的时候其他音视频暂停播放

又来记录了

需求：一个音频或视频播放的时候，除了这个播放的音频或视频，其他的音频和视频都要暂停播放。

思路：

1.首先获取所有的音视频ID，存到一个数组。获取播放的ID。

2.把获取播放的ID从所有的音视频ID中去除，放到differenceSet数组中。

3.用循环挨个把differenceSet中的ID关闭。

*具体的1、2、3实现可在代码中找到

代码：

import React, { Component } from 'react';export default class Test extends Component {constructor(props) {super(props);this.state = {contents: [3, 2, 8],    //button按钮的内容ids: [] //所有button的ID集合}}componentDidMount() {this.setState({}, () => {this.audiod()})}audiod(id) {console.log('id', id);let divid = [id]    //获取播放的ID，必须加数组里，要不然后面includes(x)会报undefined错this.state.ids = [...new Set(this.state.ids)]   //用setState({})好像不管用，先用这个代替let differenceSet = [...this.state.ids].filter(x => !divid.includes(x)) //思路2console.log('newids', differenceSet);if (differenceSet.length > 0) { //思路3for (let i = 0; i < differenceSet.length; i++) {let audioIds = document.getElementById(differenceSet[i])console.log('audioIds', audioIds);/*** 以下是音频的处理，因为我没找到合适的音频做示范，所以就注掉了，视频同理*/// if (audioIds.nodeName === 'AUDIO') {//     if (audioIds.id == id) continue;//     audioIds.pause()// }}}}render() {return (<div>{this.state.contents.map((content, id) => {this.state.ids.push(id) //思路1return (//真正用的时候把button标签删了，把audio标签放开，因为我没找到合适的音频做示范，所以先用button代替<button id={id} onClick={() => this.audiod(id)}>{content}</button>/*** 以下是音频的标签，因为我没找到合适的音频做示范，所以就注掉了，视频同理*/// <audio id={id}//        src={视频的地址}//        onPlay={() => this.audiod(id)}//        controls// />)})}</div>)}
}

大体效果图：（刚开始没点按钮，所以id是undefined，后来依次点的2 2 8 3）

react中一个音频或视频播放的时候其他音视频暂停播放相关推荐

视频、音频打时间戳的方法及其音视频同步(播放)原理
https://blog.csdn.net/nine_locks/article/details/48007055
【Unity】AVPro使用踩坑，编辑器模式使用视频播放正常，打包后视频无法播放的问题
编辑器模式使用视频播放正常,打包后视频无法播放的问题这个主要是AVPro的坑一般使用会直接Browse给取文件路径,然后面板上面就能看到视频文件的名字,这个方法在编辑器模式下播放是可以获取到文件的 ...
html5中加入音频,使用HTML5在网页中嵌入音频和视频播放的基本方法
HTML5 特性,包括原生音频和视频支持而无需 Flash. HTML5 和标签让我们给站点添加媒体变得简单.我们只需要设置 src 属性来识别媒体资源,包含 controls 属性让用户可以播放和 ...
html5页面嵌入视频播放,使用HTML5在网页中嵌入音频和视频播放的基本方法
HTML5 特性,包括原生音频和视频支持而无需 Flash. HTML5 和标签让我们给站点添加媒体变得简单.我们只需要设置 src 属性来识别媒体资源,包含 controls 属性让用户可以播放和 ...
仿抖音视频自动播放html,vue 仿抖音视频播放切换
一.第一部分html页面的准备 {{item.title}} {{item.introduction}} 二.数据说明部分 data() { let u = navigator.userAgent; ...
安卓自定义视频播放器，有进度条暂停播放等功能
安卓视频播放页代码 package com.example.test1;import android.content.Context; import android.content.Intent; i ...
学习笔记（2):基于NDK、C++、FFmpeg的android视频播放器开发实战-音视频基础知识Mpeg4封装格式音视频编码格式讲解...
立即学习:https://edu.csdn.net/course/play/7417/151027?utm_source=blogtoedu 封装:将音视频从文件中读出来解码:解压出来,转换成显卡支 ...
matlab调整视频播放速度,教你快速调整视频的播放速度
原标题:教你快速调整视频的播放速度今天小编来为大家讲解一下在中如何缩短一段视频的时间.说到缩短视频的时间呢,其实上就是让视频快速地播放,这样就会涉及到EDIUS持续时间.时间重映射与冻结帧的问题.下 ...
python提取视频中的音频代码_如何使用python从视频文件中提取音频？
I want to write a python program that could extract audio from a video file (e.g. video.avi). Is the ...
中忻嘉业科技：剪辑抖音视频需要注意的点有哪些
我们在做抖音短视频的时候需要注意的因素有很多,因为一个短视频能不能有好的效果与很多的因素都是有关的,比如脚本.设备.出镜达人.以及发布时间等,还有一个很重要的就是剪辑.剪辑师对于做抖音短视频来说是很重 ...

react中一个音频或视频播放的时候其他音视频暂停播放

react中一个音频或视频播放的时候其他音视频暂停播放相关推荐

最新文章

热门文章