uni-app 页面视频多个视频同时播放处理成一个视频播放（仅适用H5）

偏执的太偏执、 2022-11-25 10:27 239阅读 0赞

## uni-app 一个页面出现多个视频时，播放时几个视频一起播放，这个明显是不合理的，处理方式 ##

<view  v-for="(item,index) in list" :key='index'>
    			<video :src="item.src" controls
    			 :data-id="item.id"
    			 style="width: 100%;"
    			 :ref='item.id'
    			 @play="saveplay"
    			 ></video>
    	</view>
    //return 里面的值 list:[{src:'http://edge.ivideo.sina.com.cn/34667689103.mp4?KID=sina,viask&Expires=1596816000&ssig=oeEgfQQWiZ&reqid=',poster:'',id:'index0'},{src:'http://flv3.people.com.cn/dev1/mvideo/vodfiles/2020/07/29/ee0197afa92d770f46aa57b733ac0974_c.mp4',poster:'',id:'index1'},{src:'http://flv3.people.com.cn/dev1/mvideo/vodfiles/2020/07/29/ee0197afa92d770f46aa57b733ac0974_c.mp4',poster:'',id:'index1'}]
    //methods
     saveplay(e){   
    				    var self = this;
    					// 获取当前视频id
    					let currentId = e.target.dataset.id;
    					// 获取json对象并遍历, 停止非当前视频
    					let trailer = this.list;
    					for (let i = 0; i < trailer.length; i++) { 
    					  let temp = trailer[i].id
    					  if (temp !== currentId) { 
    						   this.$refs[temp][0].pause();
    					  }
    					}
    			  },

发表评论取消回复

表情：

评论列表（有 0 条评论，239人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML5 视频播放

![Center][] 具体代码实现  <!-- <video src=

冷不防/ 2024年02月17日 17:50/ 0 赞/ 75 阅读

相关一个页面播放多个视频

一个页面播放多个视频 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U

梦里梦外;/ 2023年06月09日 11:25/ 0 赞/ 19 阅读

相关 H5播放视频流

代码 <html> <head> <title>视频直播</title> <meta charset="utf-8">

浅浅的花香味﹌/ 2023年01月22日 11:55/ 0 赞/ 291 阅读

相关 H5视频全屏播放

H5视频全屏播放 <div class="video-box"> <video x5-video-player-type="h5" x5-vi

亦凉/ 2022年12月29日 06:58/ 0 赞/ 371 阅读

相关 uniapp小程序一个页面多个视频播放

<template> <view class="">  <view class="hot_vide

浅浅的花香味﹌/ 2022年12月19日 08:35/ 0 赞/ 385 阅读

相关 uni-app 页面视频多个视频同时播放处理成一个视频播放（仅适用H5）

uni-app 一个页面出现多个视频时，播放时几个视频一起播放，这个明显是不合理的，处理方式 <view v-for="(item,index) in list

偏执的太偏执、/ 2022年11月25日 10:27/ 0 赞/ 240 阅读

相关 h5视频播放

html5提供的有视频播放功能，标签可以使用video demo如下： <div class="video"> <video src="video/Vision

谁借莪１个温暖的怀抱￠/ 2022年08月03日 12:55/ 0 赞/ 353 阅读

相关 html5_视频播放

1. 视频播放 <table> <tbody> <tr> <td style="background:rgb(213,213,213);"><p><stro

悠悠/ 2022年05月25日 05:08/ 0 赞/ 401 阅读

相关 H5视频，播放，暂停，重新播放

H5视频，播放，暂停，重新播放 ```<!DOCTYPE html> <html lang="en"> <head> <meta

落日映苍穹つ/ 2022年05月08日 00:10/ 0 赞/ 427 阅读

相关 html5视频播放

<!DOCTYPE html> <head> <meta charset=utf-8> <title>html5播放器</title>

逃离我推掉我的手/ 2022年03月18日 09:24/ 0 赞/ 436 阅读