欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue單頁面如何解決多個視頻同時僅能播放一個問題

 更新時間：2024年03月21日 09:41:59   作者：V_AYA_V  
這篇文章主要介紹了vue單頁面如何解決多個視頻同時僅能播放一個問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue單頁面解決多個視頻同時僅能播放一個

封裝一個媒體播放的列表組件，里面包含圖集和視頻。

為了代碼解耦，將圖集組件，和視頻播放組件分離出來。

在這里僅記錄一下視頻播放遇到的問題。

在列表數(shù)據(jù)里面可能有多個視頻，循環(huán)渲染列表,這里僅簡述多視頻播放，要求一次只能播放一個的問題。

列表渲染

<template>
  <div class="case-container">
    <div class="case-list">
      <div class="case-item" v-for="item in caseList" :key="item.id">
        <video-card :src="item.src" :poster="item.src"></video-card>
        <!--<images-card></images-card>-->
      </div>
    </div>
  </div>
</template>

<script>
import VideoCard from './videoCard'
// import ImagesCard from './imagesCard'
export default {
  components: {
    VideoCard
    // ImagesCard
  },
  props: {
    caseList: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style lang="less" scoped>
</style>

視頻組件封裝

視頻組件封裝十分常規(guī)，用到了video標(biāo)簽，支持手動控制播放暫停。

如果要支持播放下一個視頻前前面的播放的視頻暫停，只能手動去觸發(fā)其他video標(biāo)簽的pause方法。

因?yàn)槭嵌嘟M件通信，無法獲取其他video的DOM,所以跨組件通信。

this.$bus，值得擁有

<template>
  <div class="video-container">
    <video
      v-if="isPlay"
      ref="video"
      class="video"
      controls
      :src="src"
      :poster="poster"
      :autoplay="isPlay"
      @touchmove.prevent
      @pause="pause"
      @play="play"
      @ended="pause"
      webkit-playsinline="true"
      playsinline="true"
    ></video>
    <div v-if="disabled" class="cover-outer"></div>
    <!--自定義播放按鈕-->
    <div
      v-if="!isPlay"
      class="cover center-flex"
      :style="poster ? {backgroundImage: `url(${poster})`} : {}"
    >
      <img
        @click="play"
        src="xxx"
        class="play-icon"
      />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    src: {
      type: String,
      default: ''
    },
    poster: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isPlay: false,
      disabled: true
    }
  },
  mounted() {
    this.$bus.$on('stopVideo', this.pause) // 子組件接受數(shù)據(jù)
  },
  beforeDestroy() {
    this.$bus.$off('stopVideo') // 銷毀前清除事件監(jiān)聽
  },
  methods: {
    clearTimer() {
      this.timer && clearTimeout(this.timer)
    },
    play() {
      this.$bus.$emit('stopVideo') // 子組件發(fā)送數(shù)據(jù)
      this.clearTimer()
      this.isPlay = true
      // 防止點(diǎn)擊穿透
      this.timer = setTimeout(() => {
        this.disabled = false
      }, 500)
      this.$nextTick(() => {
        this.$refs.video.play()
      })
    },
    pause() {
      this.clearTimer()
      this.isPlay = false
      this.disabled = true
    }
  }
}
</script>

<style lang="less" scoped>
// 樣式省略
</style>

bus.js就是這么簡單。

創(chuàng)建之后掛載到app.js,通過this.$bus.$on,this.$bus.$emit去觸發(fā)方法，具體使用見上。

不知道怎么使用this.$bus可以去百度一下，網(wǎng)上教程很詳細(xì)，不再贅述

import Vue from 'vue'

export default () => {
  Vue.prototype.$bus = new Vue()
}

總結(jié)

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論