electron-vue使用video标签循环播放视频，解决卡顿、闪烁。

这里是取得部分代码，里面有几个点注意，一个是用两个标签后，视频播放顺序，用变量index来获取，还有就是需要判断视频是否只有一个，循环播放时记得把index++，
1

@ended="playNextVideo()" 是播放完成后的操作，区分两个标签
:style="{ display: !play ? 'unset' : 'none' }"来控制显示，预加载
1
2

<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([])
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>



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134