electron-vue使用video标签循环播放视频,解决卡顿、闪烁。
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
这里是取得部分代码,里面有几个点注意,一个是用两个标签后,视频播放顺序,用变量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 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)