这里是取得部分代码,里面有几个点注意,一个是用两个标签后,视频播放顺序,用变量index来获取,还有就是需要判断视频是否只有一个,循环播放时记得把index++
@ended="playNextVideo()" 是播放完成后的操作,区分两个标签
:style="{ display: !play ? 'unset' : 'none' }"来控制显示,预加载
<template>
  <video
    ref="playerSceneRef"
    class="video-player"
    :style="{ display: play ? 'unset' : 'none' }"
    autoplay
    @ended="playNextVideo('v')"
  ></video>
  <video
    ref="playerSceneRef1"
    class="video-player"
    :style="{ display: !play ? 'unset' : 'none' }"
    autoplay
    @ended="playNextVideo('v1')"
  ></video>
</template>

<script setup lang="ts">
import { ref, onMounted, computed, watch } from 'vue'
import { VideoInfo } from '@src/common/types'

const isAlwaysOnTop = ref<boolean>(false)
const play = ref<boolean>(true)

const { ipcRenderer } = window.require('electron')
// const sceneVideos = ref<VideoInfo[]>([])
const videoWaitingList = ref<VideoInfo[]>([])
const playerSceneRef = ref<HTMLVideoElement>()
const playerSceneRef1 = ref<HTMLVideoElement>()
const curVideoIndex = ref<number>(0)
const parentNodeList = ref([]) // 父节点列表
const videoIndex = ref(0) // 当前播放视频索引
onMounted(() => {
  curVideoIndex.value = 0
  ipcRenderer.on('message-from-main', (_, message: string, type: string) => {
    if (type == 'init') {
      parentNodeList.value = JSON.parse(message)
      videoIndex.value = 0
      handleRandom() // 获取总视频列表随机
      playNextVideo('init') // 播放第一个视频,暂停第二个视频
    } else {
      insertVideo(JSON.parse(message))
    }
  })
})
// 监听videoIndex变化,大于videoWaitingList.length时,重新为0
watch(videoIndex, (newVal) => {
  if (newVal >= videoWaitingList.value.length) {
    videoIndex.value = 0
    handleRandom()
  }
})


const playNextVideo = (type: string): void => {
  if (type == 'v') {
    console.log('v-------------', videoIndex.value)
    // 播放第一个视频
    let src = ''
    process.platform == 'darwin'
      ? (src = 'file://' + videoWaitingList.value[videoIndex.value].path)
      : (src = videoWaitingList.value[videoIndex.value].path)

    videoIndex.value++
    // 暂停当前视频
    console.log('src', src)
    playerSceneRef!.value!.src = src
    play.value = false
    playerSceneRef?.value?.pause()
    // 播放下一个视频
    playerSceneRef1?.value?.play()
  } else if (type == 'v1') {
    console.log('v1-------------', videoIndex.value)
    // 播放第二个视频
    let src1 = ''
    process.platform == 'darwin'
      ? (src1 = 'file://' + videoWaitingList.value[videoIndex.value].path)
      : (src1 = videoWaitingList.value[videoIndex.value].path)

    videoIndex.value++
    // 暂停当前视频
    console.log('src1', src1)
    playerSceneRef1!.value!.src = src1
    play.value = true
    // // 暂停当前视频
    playerSceneRef1?.value?.pause()
    // 播放下一个视频
    playerSceneRef?.value?.play()
  } else if (type == 'init') {
    // 初始化
    if (videoWaitingList.value.length > 1) {
      // 大于一个视频
      let src = ''
      process.platform == 'darwin'
        ? (src = 'file://' + videoWaitingList.value[videoIndex.value].path)
        : (src = videoWaitingList.value[videoIndex.value].path)
      videoIndex.value++
      // 暂停当前视频
      let src1 = ''
      process.platform == 'darwin'
        ? (src1 = 'file://' + videoWaitingList.value[videoIndex.value].path)
        : (src1 = videoWaitingList.value[videoIndex.value].path)
      videoIndex.value++ 
      console.log('src,src1', src, src1)
      // 暂停当前视频
      playerSceneRef!.value!.src = src
      playerSceneRef1!.value!.src = src1
      play.value = true
      playerSceneRef?.value?.play()
      // 播放下一个视频
      playerSceneRef1?.value?.pause()
    } else {
      // 只有一个视频
      let src = ''
      process.platform == 'darwin'
        ? (src = 'file://' + videoWaitingList.value[videoIndex.value].path)
        : (src = videoWaitingList.value[videoIndex.value].path)
      videoIndex.value++
      // 暂停当前视频
      playerSceneRef!.value!.src = src
      playerSceneRef1!.value!.src = src
      play.value = true
      playerSceneRef?.value?.play()
      // 播放下一个视频
      playerSceneRef1?.value?.pause()
    }
  }



</script>



GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐