npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@gavant/nativescript-exoplayer

v4.0.3

Published

A NativeScript plugin that uses the ExoPlayer video player on Android to play local and remote videos.

Downloads

5

Readme

npm npm npm Twitter Follow

NativeScript ExoPlayer

A NativeScript plugin to provide the ability to play local and remote videos using Google's ExoPlayer.

Developed by

MasterTech

Platform controls used:

Android | iOS ---------- | ----------- Google ExoPlayer | iOS AVPlayer For a 100% NativeScript plugin use the NativeScript-VideoPlayer.

Based on

This is based on the awesome NativeScript-VideoPlayer by Brad Martin (nStudio, llc); the Android side was re-written to use Google's enhanced ExoPlayer. The iOS side is the same thing as what was in the original NativeScript-VideoPlayer.

Since there is a lot of cases where you might still want a 100% NativeScript plugin, Brad and I decided to make this a separate plugin so that you can use the original NativeScript-VideoPlayer for those cases where you want a pure JavaScript plugin.

The Google ExoPlayer adds about a meg and a half plugin to the Android application.

Sample Usage

            Sample 1             |              Sample 2

-------------------------------------| ------------------------------------- Sample Usage | Sample 2

Installation

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

tns plugin add nativescript-exoplayer

Usage

<Page xmlns="http://schemas.nativescript.org/tns.xsd"
      xmlns:exoplayer="nativescript-exoplayer">
        <StackLayout>
               
            <exoplayer:Video id="nativeexoplayer"
            controls="true" finished="{{ videoFinished }}"
            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>

Angular Native (NativeScript Angular) Usage

// somewhere at top of your component or bootstrap file
import {registerElement} from "nativescript-angular/element-registry";
registerElement("exoplayer", () => require("nativescript-exoplayer").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.

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

Properties

  • src - required

Set the video file to play, for best performance use local video files if possible. The file must adhere to the platforms accepted video formats. For reference check the platform specs on playing videos.

  • enableSubtitles

By default, subtitle support is off. Use this flag to turn them on.

  • subtitles

Set .srt file with subtitles for given video. This can be local file or internet url. Currently only .srt format is supported.

  • autoplay - (boolean) - optional

Set if the video should start playing as soon as possible or to wait for user interaction.

  • finished - (function) - optional

Attribute to specify an event callback to execute when the video reaches the end of its duration.

  • controls - (boolean) - optional

Set to use the native video player's media playback controls.

  • muted - (boolean) - optional

Mutes the native video player.

  • loop - (boolean) - optional

Sets the native video player to loop once playback has finished.

  • fill - (VideoFill) - optional

Android: When set to VideoFill.aspectFill, the aspect ratio of the video will not be honored and it will fill the entire space available.

iOS:

  • VideoFill.default = AVLayerVideoGravityResize
  • VideoFill.aspect = AVLayerVideoGravityResizeAspect
  • VideoFill.aspectFill = AVLayerVideoGravityResizeAspectFill

See here for explanation.

  • playbackReady - (function) - optional

Attribute to specify an event callback to execute when the video is ready to play.

  • seekToTimeComplete - (function) - optional

Attribute to specify an event callback to execute when the video has finished seekToTime.

  • observeCurrentTime - (boolean) - optional

If set to true, currentTimeUpdated callback is possible.

  • currentTimeUpdated - (function) - optional

Attribute to specify an event callback to execute when the time is updated.

API

  • play() - Start playing the video
  • pause() - Pause the video
  • seekToTime(time: number) - Seek the video to a time (milliseconds)
  • getCurrentTime() - Returns the current time in the video duration (milliseconds)
  • getDuration() - Returns the duration of the video (milliseconds)
  • destroy() - Destroy the video player and free resources
  • mute(boolean) - Mute the current video
  • setVolume() - Set the volume - Must be between 0 and 1.

Android only

  • stop() - Stop the playback - this resets the player and remove the video src

Breaking Changes

  • Android will now attach/detach to the application suspend/resume and de-register/re-register video
  • Subtile support will by default be disabled.

Contributors