如何解决使用 Electron 和 Vue 全屏制作 video.js 组件
我正在使用 Electron + Vue 制作应用程序。我正在以全屏模式启动应用程序(这有效!),但我在尝试 make a specific element fullscreen(video.js 视频播放器)时遇到问题。
安装视频组件后,我调用 this.player.requestFullscreen()
并且视频以全屏显示,但仅在第一次使用 Vue 中的 mounted()
方法调用时。
当视频结束时,我使用 v-if
隐藏视频组件。如果我想显示另一个视频,我只需更改视频的 src
属性,它就像一个魅力,但我无法以全屏模式打开视频。控制台抛出此错误:
Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.
应用启动时实例化的 BrowserWindow
在 webSecurity: false
中设置了 webPreferences
。
视频组件代码:
<template>
<div style="heigth: 100vh">
<video
ref="videoPlayer"
class="video-js"
data-setup="{"fluid": true}"
@ended="onVideoEnded()"
/>
</div>
</template>
<script>
import videojs from 'video.js'
export default {
name: 'VideoPlayer',props: {
options: {
type: Object,default () {
return {}
},},data () {
return {
player: null,}
},watch: {
options: function (val) {
// Couldn't set the src in another any way :(
var player = videojs(document.querySelector('.video-js'))
player.src(val.sources[0])
player.play()
player.requestFullscreen() // It does not work
},mounted () {
this.player = videojs(
this.$refs.videoPlayer,this.options,function onPlayerReady () {
console.log('player ready')
},)
this.player.requestFullscreen() // It works just the first time It gets called
},beforeDestroy () {
if (this.player) {
this.player.dispose()
}
},methods: {
onVideoEnded () {
this.$store.dispatch('mediaModule/getRandomMedia')
},}
</script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。