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

wei佳

已于 2023-10-28 17:45:14 修改

阅读量2.2k

点赞数 1

文章标签： vue.js electron 音视频

于 2023-10-28 17:42:55 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_47426048/article/details/134093962

版权

文章介绍了如何在Vue应用中使用HTMLVideoElement和typescript实现视频播放功能，包括视频顺序控制、循环播放逻辑以及与Electron集成。重点讨论了如何处理视频播放的初始化、暂停和切换等操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里是取得部分代码，里面有几个点注意，一个是用两个标签后，视频播放顺序，用变量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>