html angular video视频组件

官方网站

项目地址

博主提供的下载地址

文档地址

Videogular

Videogular is an HTML5 video player for Angular 2.0. Videogular is a wrapper over the HTML5 video tag, so you can just add whatever you want. This provides a very powerful, but simple to use solution, for everybody.

You can see a demo here: https://videogular.github.io/videogular2-showroom/#/

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

How to install

To get up and running quickly, check out the getting started guide.

NPM commands

Run start to compile the project, execute tests and check coverage:

npm start

Run build to compile the project:

npm run build

Run test to test the project:

npm test

Run coverage to check the coverage report:

npm run coverage

To start the example app run the following commands and open http://localhost:8080:

cd examples npm install npm run build npm start

Quick template

Stackblitz Template

Supported by

Videogular wants to thank you to this companies for support this project:

Credits

Videogular is a project created by Raúl Jiménez and released under MIT license.

This project would not be possible without our team members and an amazing community,

html

<vg-player class="video-container"><vg-overlay-play></vg-overlay-play><vg-buffering></vg-buffering><vg-controls [vgAutohide]="true" [vgAutohideTime]="3"><vg-play-pause class="video-control-btn"></vg-play-pause><!--暂停和恢复播放--><vg-playback-button class="video-control-btn"></vg-playback-button><!--倍速播放--><vg-time-display class="video-control-btn" vgProperty="current" vgFormat="mm:ss"></vg-time-display><vg-scrub-bar class="video-progress"><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="left" vgFormat="mm:ss"></vg-time-display>--><vg-time-display class="video-control-btn" vgProperty="total" vgFormat="mm:ss"></vg-time-display><vg-mute class="video-control-btn"></vg-mute><!--当前音量和静音之间切换--><vg-quality-selector class="video-control-btn" [bitrates]="dashBitrates"(onBitrateChange)="vgDash.setBitrate($event)"></vg-quality-selector><!--<vg-volume class="video-control-voice"></vg-volume>&lt;!&ndash;更改音量&ndash;&gt;--><vg-fullscreen class="video-control-btn"></vg-fullscreen><!--全屏和非全屏之间切换--></vg-controls><video #myMedia [vgMedia]="myMedia" id="my-video"height="200" preload="auto"poster="assets/img/icon_head.jpg"crossorigin playsinline webkit-playsinline><source src="{{videoPath}}" type="video/mp4"></video>
</vg-player>