Search code examples
mobile-applicationnativescript-vue

Nativescript-vue Video Player loading complete callback not working


I am building native mobile app using nativescript-vue and using Nativescript-videoplayer plugin .Well the player working well but loadingComplete callback function is not working.

<template>
    <Page >
        <ActionBar title="test">
          <StackLayout orientation="horizontal"
            ios:horizontalAlignment="center"
            android:horizontalAlignment="left">
            <Image src="res://icon" width="30" height="30" stretch="aspectFill" />
          </StackLayout>
        </ActionBar>
        <StackLayout>
            <VideoPlayer ref="player" :src="video.file" autoplay="true" height="300" @loadingComplete="videoCompleted" @finished="videoFinished" loop="false" />
        </StackLayout>
    </Page>
</template>
<script >
  export default {
    props:['video'],
    data() {
      return {
      }
    },
    methods:{
        videoCompleted(){
            console.log('Loading Completed');
        },
        videoFinished(){
            console.log('Video finished');
        }

    }
}
</script>

Solution

  • loadingComplete was changed to playbackReady and the other handler attaches to finishedEvent

    <VideoPlayer
        @playbackReady="videoCompleted"
        @finishedEvent="videoFinished"
    />
    

    The demo is quite outdated, but the documentation looks mantained.