Ionic 3 Video Does Not Play Again Ionic 3 Inline Video Does Not Play Again

How to add Video Player in Ionic 4 App

In this post, you volition learn how to Add video players in Ionic 4 apps using Ionic Native Plugins. We will also learn how to add Youtube hosted video in a simple Ionic 4 app and test.

Consummate source lawmaking of this tutorial is available in the Video Thespian In IONIC 4

What is Ionic iv?

You probably already know almost Ionic, but I'one thousand putting it here just for the sake of beginners. Ionic is a complete open-source SDK for hybrid mobile app development. Ionic provides tools and services for developing hybrid mobile apps using Web technologies similar CSS, HTML5, and Sass. Apps can be built with these Web technologies and then distributed through native app stores to exist installed on devices.

In other words — If you lot create native apps in Android, you code in Java. If y'all create native apps in iOS, you lawmaking in Obj-C or Swift. Both of these are powerful, but complex languages. With Cordova (and Ionic) you tin write a single piece of code for your app that tin can run on both iOS and Android (and windows!), that too with the simplicity of HTML, CSS, and JS.

Post structure

Nosotros will go in a stride-by-step style to explore how to add together video player and Youtube video in IONIC 4 app

STEPS

1. Create a simple IONIC app
2. Install Plugin for Video Player in IONIC four app
3. Play Video in IONIC 4 app with local URL and Server URL
4. Play Youtube uploaded Video in ionic four app

We have three major objectives

1. Play the locally stored video in IONIC 4 app
2. Play video which is hosted on a server in IONIC 4 app
3. Play Youtube video in IONIC four app

Let'south swoop correct in!

Woah! where did he swoop in 😛

Step1 — Create a simple Ionic four app

I have covered this topic in item in this blog.

In short, the steps y'all need to take here are

• Make sure you lot have node installed in the system (V10.0.0 at the time of this blog post)
• Install ionic cliusing npm
• Create an Ionic app using ionic start

You can create a blank starter for the sake of this tutorial. On running ionic start bare , node modules volition be installed. One time the installation is done, run your app on browser using

$ ionic serve

Step: 2 — Install Plugin for Video Player in IONIC 4 app

moust cordova videoplayer plugin

A Cordova plugin that just allows you to immediately play a video in fullscreen mode.

Requires Cordova plugin: com.moust.cordova.videoplayer. For more info, please see the VideoPlayer plugin docs.

Installation

‌For that, open your last and type

ionic cordova plugin add https://github.com/moust/cordova-plugin-videoplayer.git

‌It'southward a chip clumsy to piece of work with Cordova plugin then the ionic team created Ionic Native, which is a wrapper for the Cordova plugins so nosotros can use them in a more "Angular/Ionic" way.

‌So now we will open our final and try this command‌ to install Facebook package from Ionic Native

npm install @ionic-native/video-player

Step:3 — Play Video in IONIC four app with local URL and Server URL

Using this plugin The starting time stride you volition need to do is Add this plugin to your app's module

Import this plugin like this

import { VideoPlayer } from '@ionic-native/video-thespian/ngx';

and add together this to Providers of your app Like this

providers: [

StatusBar,

SplashScreen,

VideoPlayer,

{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }

],

So after Adding Your app.module.ts look like this

Now time to import this plugin in your abode.ts in which we are integrating our Video Player

So for using this plugin in our home.ts showtime, we volition import the plugin similar this

import { VideoPlayer } from '@ionic-native/video-player/ngx';

and inject it in your Constructor (Dependency injection) similar this

constructor(private videoPlayer: VideoPlayer, public modalCtrl: ModalController) {

}

And utilize this code for Calculation Video Player in IONIC App

this.videoPlayer.play('file:///android_asset/world wide web/assets/SampleVideo.mp4').and then(() => {

console.log('video completed');

}).catch(err => {

console.log(err);

});

If yous want to play hosted video on server. you tin change this local URL into your video hosted URL similar this.

this.videoPlayer.play('https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4').then(() => {

panel.log('video completed');

}).catch(err => {

console.log(err);

});

so this lawmaking only allows you to immediately play a video in fullscreen style.

After calculation this lawmaking your abode.ts volition something look like this

 Home Page Video

Video player in full screen

Step:4 — Play Youtube uploaded Video in ionic iv app

In this stride we will utilize iframe for playing Youtube video in IONIC four app

For this you have to use DomSanitizer API from @angular/platform-browser

package

Import this API like this

import {DomSanitizer} from '@angular/platform-browser';

and eject it in our Constructor (Dependency injection) like this

constructor(public  sanitizer:DomSanitizer) {

}

And we will utilise this API like this in our HTML

<iframe [src]="sanitizer.bypassSecurityTrustResourceUrl(videourl)" permit="autoplay;" frameborder="0"

allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

where video Url is basically what we want to play

DomSanitizer helps preventing Cross Site Scripting Security bugs (XSS) by sanitizing values to be prophylactic to apply in the unlike DOM contexts.

Youtube video In IONIC 4 app

So After Adding This code, our html is something look like this.

Conclusion

In this blog, we learned how to implement Video Thespian In IONIC 4 app and besides we have learned how to add Youtube video in IONIC iv app

Complete source code of this tutorial is bachelor in the Video Player in IONIC 4 app

barneslonts1937.blogspot.com

Source: https://enappd.com/blog/adding-video-player-in-ionic-4-app/64/

Share this post