ionic使用videojs观看视频

2019-07-01 11:04:00 阅读：233 来源： 互联网

标签：视频 videogular2 core videogular https save import 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

标签：视频,videogular2,core,videogular,https,save,import,ionic,videojs
来源： https://www.cnblogs.com/wei-dong/p/11112863.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

ionic使用videojs观看视频