angular使用什么样的样式_使用ngx-videogular构建Angular10播放器

简介

在本Angular教程中，我们将学习如何在Angular 10/9应用程序中嵌入视频播放器以播放视频, 并支持使用 ngx-videogular 包定制的播放列表和视频支付控件。HTML 5的视频播放器提供了许多选项来创建许多现代浏览器都支持的自定义播放器。我们可以根据需要轻松地使用视频标签属性来创建视频播放器。

对于小于Angular 9的版本，您可以使用Videogular2软件包，但对于最新的Angular 9+ 版本，则需要使用新的ngx-videogular软件包。这些ngx-videogular依赖包使用HTML 5视频播放器, 为使用者提供易于使用和令人激动的布局，从而使视频嵌入非常快速。使用此功能, ngx-videogular 提供许多必需的功能, 例如：

• 播放列表控件。
• 音频播放器支持。
• 同一屏幕上有多个玩家。
• 速度控制选项。
• 播放器中的实时媒体流。

创建一个新的Angular应用

运行一下ng命令创建新的Angular应用

$ ng new angular-video-player-app# ? Would you like to add Angular routing? Yes# ? Which stylesheet format would you like to use? SCSS

进入项目目录

$ cd angular-video-player-app

运行应用程序

$ ng serve --open

安装ngx-videogular组件

运行以下命令安装ngx-videogular软件包

$ npm install ngx-videogular --save

导入Icon和style

更新angular.json文件中的样式数组

..."build": {    ...    "styles": [      "./node_modules/@videogular/ngx-vi