videogular2 + angular4

官方网站：https://videogular.github.io/videogular2/

1.文档是的使用方法 

1.按照文档中的方法  安装videogular2  到项目中  编译后发现 报错  core-js    是版本问题的原因  于是

npm  view   videogular   查询videogular2  的版本  默认安装最新版本不兼容  然后卸载后一个个版本往后安装5.6.3版本后就不会报错了

{ name: 'videogular2',
  description: 'Videogular is a video application framework for desktop and mobile powered by Angular',
  'dist-tags': { latest: '6.4.0' },
  maintainers: [ 'elecash <elecash@gmail.com>' ],
  time:
   { modified: '2019-01-11T09:39:50.000Z',
     created: '2016-01-25T06:28:13.655Z',
     '6.4.0': '2019-01-11T09:38:50.164Z',
     '6.3.0': '2018-07-16T16:48:24.503Z',
     '6.2.2': '2018-06-14T07:59:25.863Z',
     '6.2.1': '2018-06-10T09:19:32.988Z',
     '6.2.0': '2018-05-30T12:41:42.350Z',
     '6.1.1': '2018-04-18T15:54:55.227Z',
     '6.1.0': '2018-04-18T15:42:03.015Z',
     '6.0.8': '2018-04-01T10:43:50.519Z',
     '6.0.7': '2018-04-01T10:12:32.907Z',
     '6.0.6': '2018-02-14T17:35:58.859Z',
     '6.0.5': '2018-02-14T16:21:30.038Z',
     '6.0.4': '2018-02-12T10:49:30.455Z',
     '6.0.3': '2018-02-07T19:19:30.251Z',
     '6.0.2': '2018-02-07T11:29:05.871Z',
     '6.0.1': '2017-12-14T10:04:36.295Z',
     '6.0.0': '2017-12-14T09:31:37.794Z',
     '5.6.3': '2017-11-03T11:55:22.080Z',
     '5.6.2': '2017-10-23T08:16:43.069Z',
     '5.6.1': '2017-10-09T16:30:10.846Z',
     '5.6.0': '2017-10-06T11:07:07.896Z',
     '5.5.2': '2017-09-29T11:36:35.030Z',
     '5.5.1': '2017-08-27T10:40:41.822Z',
     '5.5.0': '2017-08-19T08:51:44.207Z',
     '5.4.11': '2017-06-27T15:49:27.895Z',
     '5.4.10': '2017-06-22T08:24:02.961Z',
     '5.4.9': '2017-06-22T07:45:43.155Z',
     '5.4.8': '2017-06-20T09:32:43.318Z',
     '5.4.7': '2017-06-09T08:28:44.935Z',
     '5.4.6': '2017-06-08T09:03:59.421Z',
     '5.4.5': '2017-06-08T08:30:55.139Z',
     '5.4.4': '2017-06-05T14:51:39.762Z',
     '5.4.3': '2017-06-05T09:28:08.721Z',
     '5.4.2': '2017-06-02T11:28:24.895Z',
     '5.4.1': '2017-06-02T09:13:28.390Z',
     '5.4.0': '2017-05-27T10:34:13.292Z',
     '5.3.3': '2017-05-26T17:12:31.797Z',
     '5.3.2': '2017-05-26T16:50:27.622Z',
     '5.3.1': '2017-05-26T15:51:48.235Z',
     '5.3.0': '2017-05-26T08:38:25.888Z',
     '5.2.9': '2017-05-13T17:08:06.291Z',
     '5.2.8': '2017-05-13T16:00:04.922Z',
     '5.2.7': '2017-05-12T10:28:42.517Z',
     '5.2.6': '2017-05-05T17:26:45.469Z',
     '5.2.5': '2017-05-05T15:45:10.541Z',
     '5.2.4': '2017-04-30T16:30:54.521Z',
     '5.2.3': '2017-04-23T16:19:59.384Z',
     '5.2.2': '2017-04-09T08:04:42.875Z',
     '5.2.1': '2017-04-09T08:02:44.526Z',
     '5.2.0': '2017-03-26T20:26:05.198Z',
     '5.1.2': '2017-03-26T19:53:31.166Z',
     '5.1.1': '2017-03-26T18:47:03.176Z',
     '5.1.0': '2017-03-26T15:00:10.429Z',
     '5.0.1': '2017-03-26T14:39:41.491Z',
     '5.0.0': '2017-03-18T18:08:57.691Z',
     '4.2.0': '2017-03-12T20:04:46.112Z',
     '4.1.0': '2017-03-12T18:57:13.290Z',
     '4.0.5': '2017-02-26T09:25:31.179Z',
     '4.0.4': '2017-02-25T19:27:38.942Z',
     '4.0.3': '2017-02-25T12:01:59.040Z',
     '4.0.2': '2017-02-25T11:19:37.332Z',
     '4.0.1': '2017-02-25T11:05:11.817Z',
     '4.0.0': '2017-01-24T11:58:29.200Z',
     '3.2.2': '2017-01-17T09:48:16.970Z',
     '3.2.1': '2017-01-02T11:09:27.100Z',
     '3.2.0': '2016-12-30T10:28:52.209Z',
     '3.1.4': '2016-12-29T23:48:47.579Z',
     '3.1.3': '2016-12-29T23:37:26.981Z',
     '3.1.2': '2016-12-29T23:21:27.139Z',
     '3.1.1': '2016-12-27T16:17:00.902Z',
     '3.1.0': '2016-12-22T15:46:10.792Z',
     '3.0.0': '2016-12-18T09:52:14.442Z',
     '2.0.1': '2016-12-12T09:11:43.872Z',
     '2.0.0': '2016-12-10T11:27:16.986Z',
     '1.2.0': '2016-11-20T20:42:16.040Z',
     '1.1.1': '2016-11-07T08:56:51.321Z',
     '1.1.0': '2016-11-05T17:53:24.046Z',
     '1.0.0': '2016-11-01T09:37:01.483Z',
     '0.14.0': '2016-10-23T12:43:09.363Z',
     '0.13.3': '2016-09-21T10:12:30.181Z',
     '0.13.2': '2016-09-21T09:22:24.700Z',
     '0.13.1': '2016-09-17T18:35:31.850Z',
     '0.13.0': '2016-09-14T09:30:39.609Z',
     '0.12.1': '2016-09-12T17:17:00.098Z',
     '0.12.0': '2016-09-12T14:04:04.653Z',
     '0.11.0': '2016-09-05T15:20:02.462Z',
     '0.10.2': '2016-09-04T11:32:28.142Z',
     '0.10.1': '2016-09-03T14:54:43.984Z',
     '0.10.0': '2016-09-02T11:25:27.356Z',
     '0.9.0': '2016-09-01T16:52:44.474Z',
     '0.8.0': '2016-06-27T09:20:07.875Z',
     '0.7.0': '2016-06-06T15:45:49.406Z',
     '0.6.1': '2016-05-08T23:00:05.544Z',
     '0.6.0': '2016-04-16T12:50:29.933Z',
     '0.5.1': '2016-03-21T19:25:30.298Z',
     '0.5.0': '2016-03-05T10:18:28.374Z',
     '0.4.0': '2016-02-28T22:29:10.491Z',
     '0.3.0': '2016-02-19T05:57:37.374Z',
     '0.2.0': '2016-02-16T00:21:35.495Z',
     '0.1.0': '2016-02-12T18:36:45.100Z',
     '0.0.4': '2016-02-07T14:40:57.844Z',
     '0.0.3': '2016-02-06T15:24:35.971Z',
     '0.0.2': '2016-01-26T23:33:49.468Z',
     '0.0.1': '2016-01-25T06:57:02.204Z',
     '0.0.0': '2016-01-25T06:28:13.655Z' },
  users: { denji: true, rexpan: true, 'im.pankratov': true },
  author: 'Raúl Jiménez <elecash@gmail.com>',
  repository:
   { type: 'git',
     url: 'git+https://github.com/videogular/videogular2.git' },
  versions:
   [ '0.0.0',
     '0.0.1',
     '0.0.2',
     '0.0.3',
     '0.0.4',
     '0.1.0',
     '0.2.0',
     '0.3.0',
     '0.4.0',
     '0.5.0',
     '0.5.1',
     '0.6.0',
     '0.6.1',
     '0.7.0',
     '0.8.0',
     '0.9.0',
     '0.10.0',
     '0.10.1',
     '0.10.2',
     '0.11.0',
     '0.12.0',
     '0.12.1',
     '0.13.0',
     '0.13.1',
     '0.13.2',
     '0.13.3',
     '0.14.0',
     '1.0.0',
     '1.1.0',
     '1.1.1',
     '1.2.0',
     '2.0.0',
     '2.0.1',
     '3.0.0',
     '3.1.0',
     '3.1.1',
     '3.1.2',
     '3.1.3',
     '3.1.4',
     '3.2.0',
     '3.2.1',
     '3.2.2',
     '4.0.0',
     '4.0.1',
     '4.0.2',
     '4.0.3',
     '4.0.4',
     '4.0.5',
     '4.1.0',
     '4.2.0',
     '5.0.0',
     '5.0.1',
     '5.1.0',
     '5.1.1',
     '5.1.2',
     '5.2.0',
     '5.2.1',
     '5.2.2',
     '5.2.3',
     '5.2.4',
     '5.2.5',
     '5.2.6',
     '5.2.7',
     '5.2.8',
     '5.2.9',
     '5.3.0',
     '5.3.1',
     '5.3.2',
     '5.3.3',
     '5.4.0',
     '5.4.1',
     '5.4.2',
     '5.4.3',
     '5.4.4',
     '5.4.5',
     '5.4.6',
     '5.4.7',
     '5.4.8',
     '5.4.9',
     '5.4.10',
     '5.4.11',
     '5.5.0',
     '5.5.1',
     '5.5.2',
     '5.6.0',
     '5.6.1',
     '5.6.2',
     '5.6.3',
     '6.0.0',
     '6.0.1',
     '6.0.2',
     '6.0.3',
     '6.0.4',
     '6.0.5',
     '6.0.6',
     '6.0.7',
     '6.0.8',
     '6.1.0',
     '6.1.1',
     '6.2.0',
     ... 4 more items ],
  homepage: 'http://videogular.com',
  bugs: { url: 'https://github.com/videogular/videogular2/issues' },
  license: 'MIT',
  version: '6.4.0',
  peerDependencies: { '@angular/core': '^6.0.3', rxjs: '^6.0.0' },
  devDependencies:
   { '@angular/common': '^6.0.3',
     '@angular/compiler': '^6.0.3',
     '@angular/compiler-cli': '^6.0.3',
     '@angular/core': '^6.0.3',
     '@angular/platform-browser': '^6.0.3',
     '@angular/platform-browser-dynamic': '^6.0.3',
     '@angular/platform-server': '^6.0.3',
     '@types/core-js': '0.9.35',
     '@types/jasmine': '2.5.38',
     codelyzer: '4.0.1',
     commitizen: '2.9.6',
     'core-js': '^2.4.1',
     'cz-conventional-changelog': '2.0.0',
     'es-module-loader': '2.2.8',
     'http-server': '0.10.0',
     husky: '^1.3.0',
     'jasmine-core': '2.5.2',
     karma: '1.5.0',
     'karma-chrome-launcher': '^2.1.1',
     'karma-coverage': '1.1.1',
     'karma-jasmine': '1.1.0',
     'karma-spec-reporter': '0.0.30',
     parallelshell: '2.0.0',
     'reflect-metadata': '^0.1.10',
     'remap-istanbul': '0.9.5',
     rimraf: '2.6.1',
     rxjs: '^6.2.0',
     'semantic-release': '6.3.2',
     systemjs: '^0.20.9',
     tslint: '5.0.0',
     typescript: '2.7.2',
     'validate-commit-msg': '2.12.1',
     watch: '1.0.2',
     'zone.js': '^0.8.5' },
  scripts:
   { commitmsg: 'validate-commit-msg',
     prebuild: 'npm run clean',
     build: 'ngc',
     postbuild: 'npm test',
     'build:travis': 'ngc',
     'postbuild:travis': 'npm run test',
     clean: 'rimraf -rf ./src/**/*.js && rimraf -rf ./src/**/*.d.ts && rimraf -rf ./compiled',
     precommit: 'npm test',
     commit: 'git-cz',
     coverage: 'http-server -c-1 -o -s -p 9875 ./coverage',
     start: 'parallelshell "npm run watch:ts" "npm run start:coverage-server"',
     'start:coverage-server': 'http-server -c-1 -o -p 9875 ./coverage',
     test: 'karma start karma.conf.js',
     posttest: 'remap-istanbul -i ./coverage/coverage-final.json -o coverage -t html',
     'report-coverage': 'cat ./coverage/coverage-final.json | ./node_modules/.bin/remap-istanbul -o coverage-remapped.json',     'semantic-release': 'semantic-release pre && npm publish && semantic-release post',
     'watch:ts': 'watch "npm run build" src',
     parallelshell: 'parallelshell',
     lint: 'tslint \'**/*.ts\' -e \'node_modules/**/*\' -e \'compiled/**/**\'  --fix --noUnusedParameters --noUnusedLocals'
},
  engines: { node: '>= 4' },
  keywords: [ 'video', 'player', 'framework', 'angular2', 'javascript' ],
  contributors:
   [ 'Alberto García <cernhelm@gmail.com>',
     'Joan Llenas Masó <joan.llenas.maso@gmail.com>' ],
  config:
   { commitizen: { path: 'node_modules/cz-conventional-changelog' },
     'validate-commit-msg':
      { types:
         [ 'feat',
           'fix',
           'docs',
           'style',
           'refactor',
           'perf',
           'test',
           'chore',
           'revert',
           'ci' ],
        scope:
         { required: true,
           allowed: [ '*' ],
           validate: true,
           multiple: false },
        warnOnFail: false,
        maxSubjectLength: 100,
        subjectPattern: '.+',
        subjectPatternErrorMsg: 'subject does not match subject pattern!',
        helpMessage: '',
        autoFix: false } },
  gitHead: 'f82d320256e3db9c6d63585155bdba1dccbf9f1c',
  dist:
   { shasum: '18194b7a242d6c3f8114b1473ac6aeeec24c9e6a',
     size: 6427581,
     noattachment: false,
     tarball: 'http://registry.npm.taobao.org/videogular2/download/videogular2-6.4.0.tgz' },
  directories: {},
  publish_time: 1547199530164 }

 

 demo：

 <div class="modal fade" id="video_window" tabindex="-1" role="dialog" aria-labelledby="waterResourcesModalLabel" aria-hidden="true">
                <div class="modal-dialog" style="width: 500px;max-height:90%; height:60%">
                    <div class="modal-content">
                        <div jarvis-widget="" id="wid-id-add-equip" data-widget-colorbutton="false" data-widget-editbutton="false" data-widget-fullscreenbutton="false" data-widget-custombutton="false" data-widget-sortable="false" data-widget-deletebutton="false" class="jarviswidget jarviswidget-sortable edit-dialog"
                            role="widget">
                            <header role="heading" class="ui-sortable-handle">
                                <div class="jarviswidget-ctrls" role="menu">
                                    <a href="javascript:void(0);" class="button-icon jarviswidget-close-btn" rel="tooltip" title="" data-placement="bottom" data-dismiss="modal">&times;</a>
                                </div>
                                <span class="widget-icon"> <i class="fa fa-columns"></i> </span>
                                <h2>视频</h2>
                            </header>
                            <!-- widget div-->
                            <div *ngIf="videoShow" class="widget-div">
                                <!-- widget content -->
                                <div class="widget-body custom-scroll custom-scroll-norrow">
                                    <div class="margin-bottom-10" style="text-align:center;">
                                        <vg-player (onPlayerReady)="onPlayerReady($event)">

                                            <vg-overlay-play></vg-overlay-play>
                                            <vg-buffering></vg-buffering>

                                            <vg-scrub-bar [vgSlider]="true">
                                                <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
                                                <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
                                            </vg-scrub-bar>

                                            <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-scrub-bar style="pointer-events: none;"></vg-scrub-bar>

                                                <vg-time-display vgProperty="left" vgFormat="mm:ss"></vg-time-display>
                                                <vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display>

                                                <vg-track-selector></vg-track-selector>
                                                <vg-mute></vg-mute>
                                                <vg-volume></vg-volume>

                                                <vg-fullscreen></vg-fullscreen>
                                            </vg-controls>

                                            <video [vgMedia]="media" #media id="singleVideo" preload="auto" crossorigin autoplay>
                                                <source  [src]="video.src" [type]="video.type">
                                           
                                          </video>
                                        </vg-player>
                                    </div>
                                </div>
                                <!-- end widget content -->
                            </div>
                            <!-- end widget div -->
                            <div class="ngdialog-buttons">
                                <button type="button" class="btn btn-default btn-width" data-dismiss="modal" ng-disabled="dosaving">关闭</button>
                            </div>
                        </div>
                    </div>
                    <!-- /.modal-content -->
                </div>
                <!-- /.modal-dialog -->
            </div>

 

ts：

 $('#video_window').on('show.bs.modal', (e) => {
      var directory = e.relatedTarget.dataset.directory;
      var path = e.relatedTarget.dataset.path;
      var Vsrc = this.APP_CONFIG.videoUrl + directory + "/" + path;
      this.video = {
        src: Vsrc,
        type: "video/mp4"
      }
      this.videoShow = true;

    })
    //关闭窗口的时候停止视频播放，并清空路径等设置
    $('#video_window').on('hide.bs.modal',  ()=> {
       this.VideoAPI.pause(); 
       this.video ={}; 
       this.videoShow = false;
    })

 

注：视频路径要在modal 初始化之前拼接完成。