我有一个videogular2用于运行音频文件的angular 6应用程序。包含vg-player（父组件）的组件是ngSwitch语句的一部分，因此是？可以销毁的组件。
当视图更改时，我需要在后台运行音频。但是，当视图改变时，播放器的所有者将被破坏。
我无法更改这种复杂的开关逻辑，也无法隐藏组件。
我看到的唯一选项是在视图中显示播放器的控件（播放，暂停，音量和进度条），但播放器的源将放置在当前父项持有者组件之外。这样，当视图被破坏时，音频将保留在背景中。
<video id="singleVideo"
[muted]="isMuted"
preload="auto"
[vgMedia]="media"
playsinline>
<source [src]="videoSrc" type="video/mp4">
</video>
总结：
-是否可以将多个不同的视图（仅保留播放器的控件）链接到一个源？
-将源放置在视图之外？
-要同步进度条吗？
-如果一个视图被破坏，剩下的视图将保留下来，并且从每个视图可以命令媒体播放器使用？
-在某些命令上要同步所有控件？
先感谢您！我认为这是非常合法的用例，值得观察。
我正在寻找一个在Ionic 2环境中工作的Videogular 2的工作示例,甚至是一个平坦的Angular 2环境.
我尝试了很多不同的在线示例,感觉文档已经过时或完全不准确.
例如,文档明确指出可以使用以下方式生成基本播放器:
<videogular vg-theme="config.theme">
<vg-media vg-src="config.sources"
vg-tracks="config.tracks">
</vg-media>
<vg-overlay-play></vg-overlay-play>
</videogular>
我在Typescript中加载:
import { VgAPI } from 'videogular2/core';
import { VgCoreModule } from 'videogular2/core';
import { VgControlsModule } from 'videogular2/controls';
import { VgOverlayPlayModule } from 'videogular2/overlay-play';
这给了我错误:
Error: Uncaught (in promise): Error: Template parse errors:
'vg-media' is not a known element
我使用vg-player元素代替videogular然后使用video标记取得了一些成功.这有效,但只是给了我本地玩家.任何在其中使用视频标签的尝试都会给我一个类似的错误.
所有组件也出现在app.module.ts该imports区域下的文件中.
我的完全控制器:
import { Component } from '@angular/core';
import { NavController, NavParams, ToastController, LoadingController } …我试图将 Videogular2 模块包含到我的 Angular 应用程序中，但我不断收到hls.js. 我已按照Getting started指南进行操作，但在开发人员控制台中收到此错误：
ERROR ReferenceError: Hls is not defined
at VgHLS.webpackJsonp.../../../../videogular2/src/streaming/vg-hls/vg-hls.js.VgHLS.createPlayer (vg-hls.js:56)
at VgHLS.webpackJsonp.../../../../videogular2/src/streaming/vg-hls/vg-hls.js.VgHLS.ngOnChanges (vg-hls.js:45)
at checkAndUpdateDirectiveInline (core.es5.js:10840)
at checkAndUpdateNodeInline (core.es5.js:12339)
at checkAndUpdateNode (core.es5.js:12278)
at debugCheckAndUpdateNode (core.es5.js:13139)
at debugCheckDirectivesFn (core.es5.js:13080)
at Object.eval [as updateDirectives] (WatchComponent.html:22)
at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13065)
at checkAndUpdateView (core.es5.js:12245)
我先执行了这个命令
yarn add videogular2 dashjs hls.js
我已经添加了脚本路径.angular-cli.json
"scripts": [
"../node_modules/dashjs/dist/dash.all.min.js",
"../node_modules/hls.js/dist/hls.min.js"
]
导入所需的模块app.module.ts
imports: [
BrowserModule,
VgCoreModule,
VgControlsModule,
VgOverlayPlayModule,
VgBufferingModule,
VgStreamingModule
]
添加了 HTML 文件（使用组件），其中movie是组件的属性。 …
我正在尝试在我的网站上实现Videogular,但没有下载GitHub项目所带来的所有东西.我只想使用videogular.js,插件和默认主题.然而,当我加载页面时,默认的HTML5视频播放器和Videogular没有实现.
我的HTML代码如下:
<html ng-app="myapp">
<head>
<script src="angular.min.js"></script>
<script src="jquery-2.0.3.min.js"></script>
<script src="videogular/videogular.js"></script>
<script src="videogular/plugins/controls.js" type="text/javascript"></script>
<script src="videogular/plugins/overlay-play.js" type="text/javascript"></script>
<script src="videogular/plugins/buffering.js" type="text/javascript"></script>
<script src="videogular/plugins/poster.js" type="text/javascript"></script>
<script src="videoserve.js"></script>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body ng-controller="MyController">
<div id="videoDiv">
<videogular vg-responsive="config.responsive" vg-autoPlay="config.autoPlay">
<video class='videoPlayer' controls preload='metadata'>
<source src='assets/videos/Test 1080p HD.mp4' type='video/mp4'>
</video>
<vg-poster-image vg-url='config.plugins.poster.url' vg-stretch="config.stretch.value"></vg-poster-image>
<vg-buffering></vg-buffering>
</videogular>
</div>
</body>
</html>
我的js文件看起来像:
var app = angular.module('myapp', [
]);
app.controller('MyController', function($scope) {
$scope.stretchModes = [
{label: "None", value: "none"},
{label: "Fit", value: "fit"},
{label: "Fill", value: "fill"} …我正在尝试在我的AngularJS应用程序中实现Videogular.开箱即用的示例运行良好,没有问题.但我无法让玩家手动播放不同的文件,而不是播放音频.
这是我的HTML.
<div ng-controller="HomeCtrl as controller" class="videogular-container" ng-model="sharedProperty">
sharedProperty.data = {{sharedProperty.data}}
<button ng-click="SetValue('http://example.com/myfile.mp3')" type="button" class="btn btn-default">Change Audio</button>
<videogular vg-theme="controller.config.theme.url" class="videogular-container audio">
<vg-media vg-src="controller.config.sources"></vg-media>
<vg-controls>
<vg-play-pause-button></vg-play-pause-button>
<vg-time-display>{{ currentTime | date:'mm:ss' }}</vg-time-display>
<vg-scrub-bar>
<vg-scrub-bar-current-time></vg-scrub-bar-current-time>
</vg-scrub-bar>
<vg-time-display>{{ timeLeft | date:'mm:ss' }}</vg-time-display>
<vg-volume>
<vg-mute-button></vg-mute-button>
</vg-volume>
</vg-controls>
</videogular>
</div>
这是控制器代码:
app.controller('HomeCtrl', ["$sce","$scope", "$window", "sharedProperties",
function($sce, $scope, $window, sharedProperties) {
$scope.sharedProperty = sharedProperties.getProperty();
$scope.SetValue = function (msg)
{
$window.alert( $scope.sharedProperty.data );
$scope.setProperty = sharedProperties.setProperty;
$scope.setProperty(msg);
$window.alert( $scope.sharedProperty.data );
}
$window.alert( $scope.sharedProperty.data );
this.config = {
sources: …我正在使用Videogular来显示视频.当用户点击播放按钮到新视频时,你能帮我看看如何停止/暂停其他视频.因此,用户一次只能播放一个视频.
系统应自动停止在后台播放的其他视频并播放新视频
谢谢
videogular ×6
angularjs ×4
angular ×2
javascript ×2
android ×1
audio-player ×1
hls.js ×1
html5 ×1
html5-audio ×1
html5-video ×1
ionic2 ×1