Ionic3 study notes (14) using videogular2 to realize video playback and some problems encountered

This article is an original article, please indicate the source when reprinting

content

1. use videogular2
   • Install
   • Add icon and font support
   • import module
   • for example
2. problems encountered
   • iOS automatically enters full screen playback
   • Android autoplay doesn't work
3. More

1. Using videogular2

Install

Terminal run:

npm install videogular2 --save
npm install @types/core-js --save-dev

Add icon and font support

videogular2 GitHub address: https://github.com/videogular/videogular2

git clone down, copy fontsits folder to the folder of your Ionic project assets, and import the css file index.htmlof videogular in:

<link rel="stylesheet" href="assets/fonts/videogular.css">

import module

Import the module of the page you want to use videogular2. For example, if I want trailer.htmlto use it in , then I will import it into trailer.module.ts.

import {NgModule} from '@angular/core';
import {IonicPageModule} from 'ionic-angular';
import {VgCoreModule} from 'videogular2/core';
import {VgControlsModule} from 'videogular2/controls';
import {VgOverlayPlayModule} from 'videogular2/overlay-play';
import {VgBufferingModule} from 'videogular2/buffering';
import {TrailerPage} from './trailer';

@NgModule({
  declarations: [
    TrailerPage,
  ],
  imports: [
    VgCoreModule,
    VgControlsModule,
    VgOverlayPlayModule,
    VgBufferingModule,
    IonicPageModule.forChild(TrailerPage),
  ],
})
export class TrailerPageModule {
}

for example

  <vg-player>
    <vg-overlay-play></vg-overlay-play>
    <vg-buffering></vg-buffering>
    <vg-controls [vgAutohide]="true" [vgAutohideTime]="5">
      <vg-play-pause></vg-play-pause>
      <vg-time-display [vgProperty]="'current'"></vg-time-display>
      <vg-scrub-bar>
        <vg-scrub-bar-current-time [vgSlider]="true"></vg-scrub-bar-current-time>
        <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
      </vg-scrub-bar>
      <vg-time-display [vgProperty]="'total'"></vg-time-display>
      <vg-fullscreen></vg-fullscreen>
    </vg-controls>
    <video #media [vgMedia]="media" poster="你的poster" src="你的src" autoplay></video>
  </vg-player>

2. Problems encountered

iOS automatically enters full screen playback

Add (iOS 10 and above) and (before iOS 10) these two attributes to the videolabel .playsinlinewebkit-playsinline

In addition, you need to add in the config.xmlfile

<preference name="AllowInlineMediaPlayback" value="true" />

Android autoplay doesn't work

Whose pot is this... long story... whatever...

3. More

1. GitHub - videogular2
2. videogular2 docs
3. Cordova - Congig.xml

If there is any inappropriate, please correct me, thank you~