nstudio / Nativescript Videoplayer

NativeScript VideoPlayer

A NativeScript plugin to provide the ability to play local and remote videos.

Installation

From your command prompt/terminal go to your app's root folder and execute:

NativeScript Version 7+: tns plugin add nativescript-videoplayer

NativeScript version prior to 7: tns plugin add [email protected]

Platform controls used:

Sample 1	Sample 2

Usage

<Page xmlns="http://schemas.nativescript.org/tns.xsd"
      xmlns:VideoPlayer="nativescript-videoplayer">
        <StackLayout>

            <VideoPlayer:Video id="nativeVideoPlayer"
            controls="true" loop="true" autoplay="false" height="280"
            src="~/videos/big_buck_bunny.mp4" />

            <!-- Remote file to test with https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4 -->

        </StackLayout>
</Page>

import { Video } from 'nativescript-videoplayer';

const video = topmost().currentPage.getViewById('nativeVideoPlayer') as Video;
// Setting event listeners on the Video
video.on(Video.pausedEvent, () => {
  console.log('Video has been paused.');
});

video.on(Video.mutedEvent, () => {
  console.log('Video has been muted.');
});

// changing the src
video.src = 'some video file or url';

// set loop
video.loop = false;

Angular NativeScript Usage

// somewhere at top of your component or bootstrap file
import { registerElement } from "nativescript-angular/element-registry";
import { Video } from 'nativescript-videoplayer';
registerElement("VideoPlayer", () => Video);
// documentation: https://docs.nativescript.org/angular/plugins/angular-third-party.html#simple-elements

With AngularNative you have to explicitly close all components so the correct template code is below.

  <VideoPlayer
      src="https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
      autoplay="true"
      height="300"></VideoPlayer>

Properties

API

Observable Properties

• currentTime() - Current time of video.

Events

iOS Logging

When running the iOS Simulator, after playing a video the iOS system may write log messages to the console every few seconds of the form

[aqme] 254: AQDefaultDevice (173): skipping input stream 0 0 0x0

They will continue being logged even after the video has been properly destroyed. These messages can be safely ignored. To turn them off completely, run the following command in your shell before running tns run ios:

export SIMCTL_CHILD_OS_ACTIVITY_MODE="disable"