ionic使用videojs觀看視頻

工作環境  ionic3+angular5  使用video標簽播放

1.首先安裝模塊

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

 2.其次在使用頁面xxx.module.ts里引入模塊

import {VgCoreModule} from 'videogular2/core';
import {VgControlsModule} from 'videogular2/controls';
import {VgOverlayPlayModule} from 'videogular2/overlay-play';
import {VgBufferingModule} from 'videogular2/buffering';

@NgModule({
    declarations: [],
    imports: [
        VgCoreModule,
        VgControlsModule,
        VgOverlayPlayModule,
        VgBufferingModule
    ],
    providers: [],
    bootstrap: []
})
export class AppModule {
}

 3.最后在html中類似如下使用即可（vg-player標簽里面是各種組件，自己根據需要自行選用添加）

<vg-player class="video-container">
        <vg-overlay-play></vg-overlay-play>
        <vg-buffering></vg-buffering>
        <vg-controls>
          <vg-play-pause></vg-play-pause>
          <vg-playback-button></vg-playback-button>

          <vg-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display>
          <vg-time-display vgProperty="left" vgFormat="mm:ss"></vg-time-display>
          <vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display>
          <vg-mute></vg-mute>
          <vg-volume></vg-volume>
          <vg-fullscreen></vg-fullscreen>
        </vg-controls>
        <video #myMedia [vgMedia]="myMedia"
        height="210" preload="auto" 
         crossorigin playsinline webkit-playsinline>
          <source src="assets/oceans.mp4" type="video/mp4">
        </video>
      </vg-player>

 參考資料

https://github.com/videogular/videogular2

https://videogular.github.io/videogular2/docs/

https://www.jianshu.com/p/d9e9a40fdedc