I am facing an issue while using the capacitor youtube player plugin

Capacitor
1

I have a video component in this I need to play a video in the template I have used capacitor youtube player plugin from this I have used IPlayerOptions and in this I need a videoId from the youtubelink so In the response data I have a video link from that video link I have extracted the unique_id in the video link and passed in the IplayerOptions and also passed a id in the playerOptions and in html I have given the id this id. I am sharing snapshots of the code.

detailVideo: any = [
{
id: 242,
thumbnail_path:“”,
title: “Opening Keynote | Max Lynch | Ioniconf 2021”,
videoId: “YouTube”
}
];

cap1
cap11138×407 23 KB

html :
cap2

I am getting this error

cap3
cap3735×321 12 KB

Thanks

2

I got the solution for the above issue , in the detailvideo object i am sending the id with a number instead of string , but here i am using capacitor.getPlatform() === ‘web’ , if i am using android instead of the web the video is not playing can any one help me out of this on how to play a video while we use mobile platform

Thanks

3

A link to the plugin you are using would be helpful. Also, any reason why you are using a Capacitor plugin? My philosophy is to use the HTML tech stack as much as possible. If that is not feasible, only at that time reach for a native solution.

For my app, I am using plyr.io to play YouTube and Vimeo videos without any issues on Android/iOS/Web.

2 Likes
4

Hi, thank you for your response.
I have gone through on plyr.io and I tried to use it but when I import and declaring in the imports I am getting an error like (This likely means that the library (ngx-plyr) which declares PlyrModule is not compatible with Angular Ivy.) and I have installed the latest version,
If you provide any source code on this it will be helpful

Thank you

5

I am using Vue so this code example may not be of help.

<template>
    <div>
        <IonModal
            class="video-player-modal auto-height"
            :is-open="showVideoViewer"
            @did-present="createPlayer"
            @did-dismiss="$emit('onVideoClose')"
        >
            <div class="inner-content p-2">
                <div
                    :id="playerId"
                    :data-plyr-provider="videoType"
                    :data-plyr-embed-id="playerVideoId"
                ></div>
            </div>
        </IonModal>
    </div>
</template>

<script lang="ts">
import { computed, defineComponent, onUnmounted } from 'vue'
import { IonModal } from '@ionic/vue'
import Plyr from 'plyr'
import { MediaHelper } from '@/utils/media-helper'
import { LoadingComponent } from '@/utils/loading-component'

export default defineComponent({
    components: {
        IonModal,
    },
    name: 'VideoPlayer',
    emits: {
        onVideoStart: null,
        onVideoPause: null,
        onVideoEnd: null,
        onVideoClose: null,
    },
    props: {
        videoId: {
            type: String,
            required: true,
        },
        playerId: {
            type: String,
            required: false,
            default: 'video-player',
        },
        showVideoViewer: {
            type: Boolean,
            required: false,
            default: false,
        },
    },
    setup(props, { emit }) {
        const playerVideoId = computed(() => {
            const videoIdParts = props.videoId.split(':')

            if (videoIdParts.length !== 2) {
                return ''
            }

            return videoIdParts[1]
        })

        const videoType = computed(() => MediaHelper.determineVideoType(props.videoId))

        let player: Plyr

        const createPlayer = async () => {
            const loader = await LoadingComponent.create({ definedText: 'Loading' })
            loader.present()

            player = new Plyr('#' + props.playerId, {
                debug: false,
                autopause: false,
                controls: [
                    'play',
                    'progress',
                    'current-time',
                    'mute',
                    'captions',
                    'settings',
                    'fullscreen',
                ],
                storage: {
                    enabled: false,
                },
            })

            player.on('ready', () => {
                loader.dismiss()
            })

            player.on('playing', () => emit('onVideoStart'))
            player.on('pause', () => emit('onVideoPause'))
            player.on('ended', () => emit('onVideoEnd'))
        }

        const destroyPlayer = () => {
            if (player != null) {
                player.destroy()
            }
        }

        onUnmounted(() => {
            destroyPlayer()
        })

        return {
            // Computed properties
            playerVideoId,
            videoType,

            // Methods
            createPlayer,
        }
    },
})
</script>