MEDIA STREAMING VIDEO

MEDIA STREAMING VIDEO

In this tutorial discuss about how to build stream video player, so follow simple steps that have been given below. so create a blank template and build simple video player. 

  • $ ionic start myapp blank --type=ionic-angular
  • $ cd myapp/
  • $ ionic cordova plugin add cordova-plugin-streaming-media
  • $ npm install --save @ionic-native/streaming-media@4
  • $ ionic cordova add platform ios
  • $ ionic cordova build ios
  • $ ionic cordova run ios

Edit src/app/pages/home.html to get design

<ion-header>

<ion-navbar>

<ion-title>

Streaming Media Player

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<button ion-button color="secondary" (click)="play()">Play</button>

</ion-content>

Edit src/app/pages/home.ts to function

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

import { StreamingMedia, StreamingVideoOptions } from '@ionic-native/streaming-media';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

constructor(

public navCtrl: NavController,

private streamingMedia: StreamingMedia) {

}

public play() {

let options: StreamingVideoOptions = {

successCallback: () => { console.log('Video played') },

errorCallback: (e) => { console.log('Error streaming') },

orientation: 'portrait',

shouldAutoClose: true,

controls: true

};

this.streamingMedia.playVideo('http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4', options);

}

}

Follow up with high-quality video tutorial on YouTube

2 thoughts on “MEDIA STREAMING VIDEO

Leave a Reply

Your email address will not be published. Required fields are marked *