nativescript-youtubeplayer 在 nativescript-vue 应用程序中切换全屏

Question

我正尝试在 android 设备上的 nativescript-vue 应用程序中通过插件 triniwiz/nativescript-youtubeplayer 在 YouTube 播放器中全屏播放，但我无法实现。

我有以下代码：

<template>
    <Page actionBarHidden="true" class="page" >
        <GridLayout orientation="vertical" width="100%" height="100%" columns="*" rows="*,auto">
            <StackLayout col="0" row="0" backgroundColor="#f8f8f8">
                <StackLayout backgroundColor="#44557f">
                    <Label :text="name" class="font-weight-bold"
                           color="#FFFFFF" padding="15" fontSize="20" textWrap="true"></Label>
                </StackLayout>

                <ScrollView orientation="vertical" height="100%">

                    <ScrollView orientation="vertical">
                        <StackLayout class="home-panel">
                            <YoutubePlayer ref="player" :src="videoLink.substring(17)" apiKey="**********" isFullScreen="true"/>
                        </StackLayout>
                    </ScrollView>
                </ScrollView>
            </StackLayout>
        </GridLayout>
    </Page>
</template>

<script>
    export default {
        props: ['videoLink','name','id'],
        mounted() {
            let player = this.$refs.player
            player.toggleFullscreen();
        }

    }
</script>

但我收到一条错误消息

toggleFullscreen() not found

Answer 1

当您通过 Ref 访问元素时，return 值将是一个 Vue 元素。您应该访问 nativeView 以访问实际元素。

<script>
    export default {
        props: ['videoLink','name','id'],
        mounted() {
            let player = this.$refs.player.nativeView;
            player.toggleFullscreen();
        }

    }
</script>

nativescript-youtubeplayer 在 nativescript-vue 应用程序中切换全屏

nativescript-youtubeplayer toggle fullscreen in nativescript-vue app

vue.js

nativescript

nativescript-vue