Ionic3 learning notes (XIV) video playback using videogular2 and some problems encountered

This is an original article. Please indicate Source

Catalog

  1. Using videogular2
    • install
    • Add Icon and font support
    • Import module
    • For instance
  2. Problems encountered
    • iOS automatically enters full screen play
    • autoplay on Android does not work
  3. More

1. Use videogular2

install

Terminal operation:

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, copy its fonts folder to the assets folder of your Ionic project, and introduce the css file of video regular in index.html:

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

Import module

Import the module of the page where you want to use videogular2. For example, if I want to use it in tracker.html, I will import it into tracker.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 instance

  <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" post = "your post" SRC = "your SRC" autoplay > < / video >
  </vg-player>

2. Problems encountered

iOS automatically enters full screen play

Add two attributes to the video tag, playinline (iOS 10 and above) and WebKit playinline (before iOS 10).

In addition, you need to add

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

autoplay on Android does not work

Whose pot is this? It's a long story. It doesn't matter

3. more

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

If there is anything wrong, please correct it. Thank you

Tags: iOS github Android npm

Posted on Thu, 16 Apr 2020 08:43:02 -0700 by Basdub