vue pc/ uniapp小程序 视频列表其中一个播放,其他暂停

小程序

<video
v-for="(item, index) in dataS" :key="index"
                  @play="handlePlay(item.id)"
                  :id="item.id"
                  style="width: 100%;height: 100%;"
                  :src="apiUrl + '/api' + item.websiteLink"
                  controls
                ></video>

const handlePlay = idV => {
  let videoContext = uni.createVideoContext(idV, this);
  videoContext.play();
  dataS.value.map((item, index) => {
    if (item.id != idV) {
      let videoContext2 = uni.createVideoContext(item.id, this);
      videoContext2.pause();
    }
  });
};

pc

<lay-form v-for="(item, index) in list" :key="index">
        <div class="cardcontainer">
          <div class="video">
            <video
              @play="handlePlay(index,item)"
              style="width: 100%;height: 100%;"
              :src="apiBaseUrl + '/api' + item.websiteLink"
              controls
            ></video>
          </div>
          <div class="title">{{ item.websiteName }}</div>
          <div class="foot">
            <div class="peonum">{{ item.numberOfLearners }}人学习</div>
            <div class="date">{{ item.createTime }}上传</div>
          </div>
        </div>
const videoElement = ref([]);
const handlePlay = (index, item) => {
  const videoElementsArray = Array.from(videoElement.value);
  if (videoElementsArray) {
    videoElementsArray.forEach((video, i) =>
      i === index ? video.play() : video.pause()
    );
  }
};

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容