Angular

ionic3使用video视频/ videogular2

2018-05-29  本文已影响0人  云小诺
npm install videogular2 --save
npm install @types/core-js --save-dev

app.module.ts:

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


imports: [
    VgCoreModule,:
    VgControlsModule,
    VgOverlayPlayModule,
    VgBufferingModule
  ],

因为缺少icon,所以可以去git上面下载下来,我是放在assets里面,然后在index里面引入:
https://github.com/videogular/videogular2

index.html:

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

使用:

  <vg-player *ngIf="selectedItem">
    <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" src="{{selectedItem.video}}" autoplay></video>
  </vg-player>
上一篇下一篇

猜你喜欢

热点阅读