electron

admin管理员组

文章数量:1530823

electron

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

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

<template><videoref="playerSceneRef"class="video-player":style="{ display: play ? 'unset' : 'none' }"autoplay@ended="playNextVideo('v')"></video><videoref="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 = 0ipcRenderer.on('message-from-main', (_, message: string, type: string) => {if (type == 'init') {parentNodeList.value = JSON.parse(message)videoIndex.value = 0handleRandom() // 获取总视频列表随机playNextVideo('init') // 播放第一个视频，暂停第二个视频} else {insertVideo(JSON.parse(message))}})
})
// 监听videoIndex变化，大于videoWaitingList.length时，重新为0
watch(videoIndex, (newVal) => {if (newVal >= videoWaitingList.value.length) {videoIndex.value = 0handleRandom()}
})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 = srcplay.value = falseplayerSceneRef?.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 = src1play.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 = srcplayerSceneRef1!.value!.src = src1play.value = trueplayerSceneRef?.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 = srcplayerSceneRef1!.value!.src = srcplay.value = trueplayerSceneRef?.value?.play()// 播放下一个视频playerSceneRef1?.value?.pause()}}</script>

本文标签： electron