【ionic】html angular video视频组件-沉睡个人博客

【ionic】html angular video视频组件

1,823人已阅读时间：2022-03-19 00:00:00

##html angular video视频组件
####[官方网站](https://videogular.github.io/videogular2/)
####[项目地址](https://github.com/videogular/videogular2)
####[博主提供的下载地址](http://oss.liuzhuo.xin/xcx/image/k6jhxnm0_4dvodji9dij15e44200d8cedb.zip)
####[文档地址](https://videogular.github.io/videogular2/docs/ "文档地址")
# Videogular
[![travis build](https://travis-ci.org/videogular/videogular2.svg?branch=master)](https://travis-ci.org/videogular/videogular2)
[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/2fdevs/videogular?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
[![Greenkeeper badge](https://badges.greenkeeper.io/videogular/videogular2.svg)](https://greenkeeper.io/)

**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](https://videogular.github.io/videogular2/docs/getting-started/).

## 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](https://stackblitz.com/edit/angular-videogular?file=app%2Fhello.component.ts)

## 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](https://github.com/Elecash) and released under [MIT license](https://github.com/videogular/videogular2/blob/master/LICENSE).

This project would not be possible without our [team members](https://github.com/orgs/videogular/people) and an [amazing community](https://github.com/videogular/videogular2/graphs/contributors),

####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 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-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>

上一篇：【微信小程序】微信小程序获取上一页路由获取从哪个页面跳转进来的

下一篇：【微信小程序】微信小程序插件---表单验证篇