官方网站: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">×</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 初始化之前拼接完成。