生活随笔
收集整理的這篇文章主要介紹了
多个video标签，控制最多只能一个同时播放
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
添加一個事件： @play="handlePlay(index)"
<divv
-for="(item, index) in videoUrlList":key
="index":class="
[item
.productSuffix
.toLowerCase() === 'mp4' ? 'videoClass' : 'adeoClass','spaceClass',]"
><p
class="ggName">作品名稱：
{{ item
.productName
}}<span style
="margin-left: 10px">作品類型：
{{ item
.productSuffix
.toLowerCase() === 'mp4' ? '視頻' : '音頻' }}</span
></p
><videox5
-playsinline
="true"x
-webkit
-airplay
="allow"webkit
-playsinline
="true"playsinline
="true"controls
="controls"class="videorece"object
-fit
="cover"controlslist
="nodownload noremoteplayback":disablePictureInPicture
="true"oncontextmenu
="return false;":src
="item.productUrl"@play
="handlePlay(index)" ></video
></div
>
2.在data中定義一個屬性
videoElement
: []
在mounted中獲取所有的 video標簽
this.videoElement
= document
.getElementsByTagName('video');
最后一步，在methods 中 設置事件
handlePlay(index) {const videoElement
= this.videoElement
;if (videoElement
&& videoElement
.length
) {videoElement
.forEach((v, i) =>i
=== index
? this.videoElement
[i
].play() : this.videoElement
[i
].pause(),);}},
總結
以上是生活随笔為你收集整理的多个video标签，控制最多只能一个同时播放的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
