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
Like!! Thank you for publishing this awesome article.