NativeScript-VideoPlayer Plugin

Go get it: `npm install nativescript-videoplayer`

UPDATE 2/8/2016 10:23am CST

Earlier this morning, Alex Ziskind @digitalix submitted a PR to bring remote video file capability to the iOS version. So now the plugin is full circle supporting local and remote video files on Android and iOS. Thank you Alex!

Contributions

Before we dive in I’d like to thank two developers who had major contributions to this plugin so be sure to thank them and check their stuff out.

• Alexander Ziskind @digitalix on Twitter – http://nuvious.com/Blog
• Nathanael Anderson – @CongoCart on Twitter – http://fluentreports.com/blog/

Let’s Get Started…

Since the launch of NativeScript, you could play videos in your apps just not very easily. There weren’t any abstractions done for the native video player components: VideoView (Android) and AVPlayer on iOS.

Well today I’m very happy to announce that it is going to be much easier going forward. I have just finished publishing the plugin to npm. Here is the link: https://www.npmjs.com/package/nativescript-videoplayer.

Playing videos on mobile devices can be a hassle and this plugin is not exactly ‘full-feature’, there are still many improvements and enhancements to be made. However, it seems to be stable enough to release it to other NativeScript developers. So be sure to go get it, just open your command prompt, navigate to your app’s root folder and execute:

npm i nativescript-videoplayer

Once you have the plugin available in your app, it gets even easier. Open any of your app’s XML files and add the following.

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded"
        xmlns:VideoPlayer="nativescript-videoplayer">
      <StackLayout>
            <VideoPlayer:Video
		src="~/videos/big_buck_bunny.mp4"
                loaded="videoplayerLoaded" 
                finished="videoFinished" 
                autoplay="true" 
                height="300" />            
        </StackLayout>
</Page>

For this example, we have a videos folder in the root of our app with an .mp4 video file. You can get this sample video from here.

That is all there is to it. The VideoPlayer component is where you want to play your video. The src attribute is the video file you want to play. The finished attribute allows you to wire up some logic to execute when the video finishes. Last, the autoplay attribute accepts a boolean value which will tell the video to start as soon as it is available or to wait for user interaction.

One last important fact to remember about playing videos is the video format. If the video won’t play and everything is setup correctly, make sure the video format is valid on the platform/device you are running.