nkoehler / mat-video Goto Github PK
View Code? Open in Web Editor NEW:tv: mat-video is an Angular 8/9+ video player using Material!
Home Page: https://nkoehler.github.io/mat-video/
License: MIT License
:tv: mat-video is an Angular 8/9+ video player using Material!
Home Page: https://nkoehler.github.io/mat-video/
License: MIT License
Feature
Due to de issue seem on #53 I'm wondering if there is any way to customize the displayed control components individually, instead of just hiding the entire overlay. This, as I want to be able to pause and fullscreen, but my implementation doesn't need the progress bar to be selectable. Or is there any way to disable just the progress bar?
bug:
If the app has bootstrap module (version 4), bootstrap has a class named .progress in _progress.scss and the progessbar fails.
This appears to be a bug. Tested in iOS using Chrome browser. Not an issue on desktop - Chrome for MacOS works perfectly.
Navigate to https://nkoehler.github.io/mat-video/ using Chrome on an iOS mobile device. Tap on the video to start playback. Video is jumpy / keeps freezing. Poor playback experience.
Video should play smoothly while streaming.
Providing a StackBlitz reproduction is the best way to share your issue.
StackBlitz starter: https://goo.gl/wwnhMV
As above. You can reproduce using the demo page on mobile.
Users are complaining
Tested on Angular 8, iOS, Chrome. Other browsers / devices not tested.
I didn't wait for the spinner to disappear before tapping on the video to start playback. Should I? My users certainly don't. Thanks
Onto the task at hand.
This may be more of a feature request, but given the current landscape of the web/mobile, responsiveness is a core expectation.
The reqeust is to allow '%' values as a parameter for video height and width.
Material is responsive at it's core.
My sense is that a Material-Video Component should be responsive as well.
The video sizing is rigid and fixed accepting a number. Because 100 isn't a percentage, it gives you a 100 pixel wide video.
Ideally, the parameters would accept % as well as a number. Or maybe just have an isResponsive option.
Providing a StackBlitz reproduction is the best way to share your issue.
StackBlitz starter: https://goo.gl/wwnhMV
Adding a % to the height or width parameter will cause the compile to fail (as it should).
There are many ways to manage component sizes and responsiveness.
We could do calculations based on a stream from the BreakpointObserver for instance, but it has been my experience that a more fluid (%) based approach works best for responsive tasks.
Angular 6 / Material 6, TypeScript 2.7.2, all
Again... BRILLIANT Work.
After looking at the code for a bit, I think you can deliver a fully responsive video by just using the same style settings as you use for Full Screen.
If #mat-video# sets the internal video width to 100%. And the #mat-video# video is contained within a flex or other responsive parent element, it should fill the width of the parent element the way a normal html5 video does if you set it's width to 100%. Then the height or aspect ratio should take care of itself.
I just love your progress bar treatment and the overall clean look of this! I can't wait to use it!
Thank you
K
Hello,
Would it be possible to export the subcomponents linked to this library?
Indeed, I would like to change the appearance of the video player and keep the related subcomponents.
Thank you
WARNING in ./node_modules/@angular/cdk/esm5/a11y.es5.js 2956:54-72
"export 'ɵɵdefineInjectable' was not found in '@angular/core'
WARNING in ./node_modules/@angular/material/esm5/icon.es5.js 1027:57-75
"export 'ɵɵdefineInjectable' was not found in '@angular/core'
WARNING in ./node_modules/@angular/cdk/esm5/a11y.es5.js 1361:62-80
"export 'ɵɵdefineInjectable' was not found in '@angular/core'
WARNING in ./node_modules/@angular/cdk/esm5/a11y.es5.js 2038:58-76
"export 'ɵɵdefineInjectable' was not found in '@angular/core'
WARNING in ./node_modules/@angular/cdk/esm5/a11y.es5.js 2324:55-73
"export 'ɵɵdefineInjectable' was not found in '@angular/core'
WARNING in ./node_modules/@angular/cdk/esm5/a11y.es5.js 456:55-73
"export 'ɵɵdefineInjectable' was not found in '@angular/core'
WARNING in ./node_modules/@angular/cdk/esm5/bidi.es5.js 91:56-74
"export 'ɵɵdefineInjectable' was not found in '@angular/core'
WARNING in ./node_modules/@angular/material/esm5/core.es5.js 1452:59-77
"export 'ɵɵdefineInjectable' was not found in '@angular/core'
WARNING in ./node_modules/@angular/cdk/esm5/platform.es5.js 102:50-68
"export 'ɵɵdefineInjectable' was not found in '@angular/core'
WARNING in ./node_modules/@angular/cdk/esm5/observers.es5.js 38:65-83
"export 'ɵɵdefineInjectable' was not found in '@angular/core'
WARNING in ./node_modules/@angular/cdk/esm5/observers.es5.js 195:57-75
"export 'ɵɵdefineInjectable' was not found in '@angular/core'
WARNING in ./node_modules/@angular/cdk/esm5/a11y.es5.js 2038:204-212
"export 'ɵɵinject' was not found in '@angular/core'
WARNING in ./node_modules/@angular/cdk/esm5/observers.es5.js 195:151-159
"export 'ɵɵinject' was not found in '@angular/core'
WARNING in ./node_modules/@angular/cdk/esm5/a11y.es5.js 2324:145-153
"export 'ɵɵinject' was not found in '@angular/core'
WARNING in ./node_modules/@angular/material/esm5/icon.es5.js 1027:151-159
"export 'ɵɵinject' was not found in '@angular/core'
WARNING in ./node_modules/@angular/cdk/esm5/a11y.es5.js 2324:206-214
"export 'ɵɵinject' was not found in '@angular/core'
WARNING in ./node_modules/@angular/cdk/esm5/a11y.es5.js 2324:226-234
"export 'ɵɵinject' was not found in '@angular/core'
WARNING in ./node_modules/@angular/cdk/esm5/a11y.es5.js 456:145-153
"export 'ɵɵinject' was not found in '@angular/core'
WARNING in ./node_modules/@angular/cdk/esm5/a11y.es5.js 2956:142-150
"export 'ɵɵinject' was not found in '@angular/core'
WARNING in ./node_modules/@angular/cdk/esm5/a11y.es5.js 2956:160-168
"export 'ɵɵinject' was not found in '@angular/core'
WARNING in ./node_modules/@angular/material/esm5/icon.es5.js 1027:176-184
"export 'ɵɵinject' was not found in '@angular/core'
WARNING in ./node_modules/@angular/cdk/esm5/bidi.es5.js 91:148-156
"export 'ɵɵinject' was not found in '@angular/core'
WARNING in ./node_modules/@angular/cdk/esm5/a11y.es5.js 1361:166-174
"export 'ɵɵinject' was not found in '@angular/core'
WARNING in ./node_modules/@angular/material/esm5/icon.es5.js 1027:200-208
"export 'ɵɵinject' was not found in '@angular/core'
WARNING in ./node_modules/@angular/cdk/esm5/platform.es5.js 102:130-138
"export 'ɵɵinject' was not found in '@angular/core'
WARNING in ./node_modules/@angular/cdk/esm5/a11y.es5.js 2038:154-162
"export 'ɵɵinject' was not found in '@angular/core'
WARNING in ./node_modules/@angular/cdk/esm5/a11y.es5.js 2038:186-194
"export 'ɵɵinject' was not found in '@angular/core'
WARNING in ./node_modules/@angular/cdk/esm5/a11y.es5.js 2324:188-196
"export 'ɵɵinject' was not found in '@angular/core'
It always shows a loading icon on ios
always shows a loading icon on ios until a click
Hide the loading icon after the video loaded
Providing a StackBlitz reproduction is the best way to share your issue.
https://nkoehler.github.io/mat-video/
Angular 7, ios, Safari
Also, the Chrome on safari, the css is not quite right. the loading bar is in the middle, and also it will automatically into full screen mode when click play icon
Please implement switch quality source
Bug
When using a video in a mat-dialog and clicking on full screen, following error can be seen in Chrome dev-tools and the video doesn't change to full screen.
mat-video.js:582 Uncaught (in promise) TypeError: Failed to execute 'requestFullscreen' on 'Element': parameter 1 ('options') is not an object.
at FullscreenService.push../node_modules/mat-video/fesm5/mat-video.js.FullscreenService.request (mat-video.js:582)
at MatFullscreenButtonComponent.push../node_modules/mat-video/fesm5/mat-video.js.MatFullscreenButtonComponent.updateFullscreen (mat-video.js:745)
at MatFullscreenButtonComponent.push../node_modules/mat-video/fesm5/mat-video.js.MatFullscreenButtonComponent.toggleFullscreen (mat-video.js:736)
at Object.handleEvent (mat-video.d.ts.ɵh.html:1)
at handleEvent (core.js:19628)
at callWithDebugContext (core.js:20722)
at Object.debugHandleEvent [as handleEvent] (core.js:20425)
at dispatchEvent (core.js:17077)
at core.js:17524
at HTMLButtonElement.<anonymous> (platform-browser.js:993)
I would have expected the video to display full screen and without an error.
Alternatively (much preferred) have the option to open video in an overlay mode without needing a mat-dialog.
Use the following code in a mat-dialog component:
<mat-dialog-content>
<mat-video [src]="src" [autoplay]="true" [fullscreen]="true" [download]="false"></mat-video>
</mat-dialog-content>
Run the app, open dev tools, open the video (should open it in a dialog) and click on the full screen button.
The video has no overlay option and it needs to be displayed on a user action only.
Angular 7.0.3
"@angular/material": "7.0.3",
"mat-video": "2.5.0"
"typescript": "3.1.6"
Chrome Version 71.0.3578.98 (Official Build) unknown (64-bit)
OS: Ubuntu 16.6 LTS
n/a
AppComponent_Host.ngfactory.js? [sm]:1 ERROR TypeError: Cannot read property '__zone_symbol__addEventListener' of null
Bug
When loading in a video with a simple configuration such as
<mat-video
src="{{ video.absolutePath | remoteVideo }}"
[download]="true"
[title]="video.name"
[poster]="coverImage(video) | remoteImage"
></mat-video>
The following error is thrown in the console.
core.js:5845 ERROR TypeError: Cannot set property 'muted' of null
at MatVolumeControlComponent.set muted [as muted] (mat-video.js:1150)
at setInputsForProperty (core.js:13504)
at elementPropertyInternal (core.js:12319)
at Module.ɵɵproperty (core.js:20842)
at MatVideoComponent_div_8_Template (mat-video.js:96)
at executeTemplate (core.js:11858)
at refreshView (core.js:11705)
at refreshDynamicEmbeddedViews (core.js:13070)
at refreshView (core.js:11728)
at refreshComponent (core.js:13145)
The video however does play and respond still as expected.
No console error is thrown.
"@angular/compiler": "~9.0.1",
"@angular/material": "^9.0.0",
"mat-video": "^2.7.2",
"typescript": "~3.7.5"
Chrome Version 80.0.3987.132
Mac OS 10.15.3
Let's call this a feature request.
There do not appear to be properties for source and track. (Closed captioning, Locale Specific Audio, etc.)
When using an HTML5 video, I expect to be able to add closed captioning (sub titles) in multiple languages. I expect to be able to expose alternate audio streams to suppor multiple languages.
Providing a StackBlitz reproduction is the best way to share your issue.
StackBlitz starter: https://goo.gl/wwnhMV
Examine properties surface in code.
HTML5 video supports source and track. It's a must for internationalization.
Closed captions or subtitles are a must for hearing impared.
These represent "basic" functionality for HTML5. They are not difficult to implement. Matching the feature set of HTML5, is likely to make your component more attractive to the developers who are working with HTML5 video. (arguably your target audience).
How do you catch / handle errors with mat-video?
I have tried: this.renderer.listen(video, 'error', () => console.log('video ended'));
but no luck.
in my case I am trying to load flv videos and receive an error (which I am not sure even why as the video is H.264 encoded).
tx,
Sean.
<mat-video #video [src]="src" title="My Tutorial Title" [(time)]="ctime" [autoplay]="true" [preload]="true" [download]="false" color="accent" spinner="spin">
TS:-
ctime = 30;
never stop on time given
Video need to be paused on selected time
Providing a StackBlitz reproduction is the best way to share your issue.
StackBlitz starter: https://goo.gl/wwnhMV
Bug
When you click on progressbar (or grab it), it stucks on grabbing and can't click anymore.
Click or grab the progressbar then try to click or grab.
Angular 9
In Edge browser video spinner always visible.
Support in IE
I used the mat-video in my code, it runs well in Chrome and Firefox, but cannot work in IE.
Works well in most used browsers. (Chrome, Firefox, IE, Safari...)
Providing a StackBlitz reproduction is the best way to share your issue.
StackBlitz starter: https://goo.gl/wwnhMV
Angular 6
I was trying to to embed youtube video in this <mat-video #vid [ngClass]="ngclass" [src]="'https://www.youtube.com/watch?v=TbJSABCCtt8" /> but its throwing this error, may i know youtube videos are allowd.?
Hi,
I'm trying to build an angular video-playing application that, for reasons of privacy, does not access any external resources. My application has the "material-design-icons-iconfont" npm package, but unfortunately your mat-video package hardcodes the URL to the material design icons webfont on google's servers, which breaks my application.
Since the default setup for angular material is to already include a link to those webfonts into a CSS stylesheet in index.html, this seems like duplication of effort, and it breaks my (valid, IMHO) use case in that I would have to fork your component in order to do what I want.
Would it be possible to declare that the "Material Icons" webfont will be used and that it is necessary to include it, very much like is being done with the Roboto font right now? That way I can just serve them locally and include things that way if I so choose.
In the document subtitles feature is available using track but i have tried using the track but couldn't get the track.
Bug
Doesn't show subtitle feature
Should display the subtitle feature
i want to seek into a video at particular duration, how can i do it ?
ERROR TypeError: this._renderer.addClass is not a function
at MatSliderProgressBarComponent.set [as color] (core.es5.js:272)
at MatSliderProgressBarComponent.class_1 [as constructor] (core.es5.js:253)
at MatSliderProgressBarComponent.MatSlider [as constructor] (slider.es5.js:84)
at new MatSliderProgressBarComponent (mat-video.js:331)
at createClass (core.es5.js:10922)
at createDirectiveInstance (core.es5.js:10751)
at createViewNodes (core.es5.js:12192)
at callViewAction (core.es5.js:12622)
at execComponentViewsAction (core.es5.js:12531)
at createViewNodes (core.es5.js:12220)
Disable shortcuts if needed.
if you have some input on the page with mat-video and type 'f', => open fullscreen mode.
choose to disable shortcuts attribute
you can reproduce in your example.
Can I use multiple video sources that play continuously one after the other?
I want to know if this functionality needs a custom implementation, or already exist in the component and can be used easily.
Providing a StackBlitz reproduction is the best way to share your issue.
StackBlitz starter: https://goo.gl/wwnhMV
I'm developing a landing with a video player, where I have a Video with mat-video, the thing is that I need to know when the video has ended, that's why I think I need to access the video player API, to get the current time and total time and compare both, or simply listen to an ended event listener.
No knowing how to gain more control over the video API.
Been able to play, stop, the video from the API.
Just install the component.
Curiosity, learning, build something personal.
Angular 5, TypeScript 5.
Great component, pretty cool.
Bug
There is intermittent confusion in the full screen control representation.
The control can display the wrong state.
There is an image attached that shows the #mat-video at less than full screen.
The icon should be the one that takes the user to full-screen.
The actual icon is the one that takes the user back to not-full-screen.
The control should show the "Go to Full Screen" Icon when NOT in Full screen mode.
Providing a StackBlitz reproduction is the best way to share your issue.
StackBlitz starter: https://goo.gl/wwnhMV
The behavior is intermittent. It is possible to make this behavior impossible. Doing so would probably take much less time than trying to locate the intermittent cause.
It's incorrect. ;-)
Angular 6/ Material 6 / Typescript 2.7.2 / Screen shot detail is from latest FireFox.
The behavior is intermittent so it might be difficult to reproduce.
In my opinion, the best way to proceed is to restrict the decision to a single choke point in the code that controls this underlying variable in both direction.
It also probably a good idea to ensure that the default is set to not-full-screen.
Then ensure that the only way this can change is by an action taken by the user on the control.
Note* I can't think of any web use cases where the starting state would be full-screen. But it's probably still a good idea to let the composing developer control the default.
feature request
I need to get the time where I stopped the video
Providing a StackBlitz reproduction is the best way to share your issue.
StackBlitz starter: https://goo.gl/wwnhMV
Requirement for my project
Angular 7
I have some .3gp file shot from my earlier cellphone, I can hear the voice but can't see the image.
I can hear the voice but can't see the image.
both voice and image should work
you can find a random 3gp file and try
angular 7
mat-video/app/video/video.component does not seem to be loading.
ERROR in ./src/app/video-player/video-player.component.ts
Module not found: Error: Can't resolve 'mat-video/app/video/video.component' in 'F:\Source\Repos\EventPlayer\EventPlayer\ClientApp\src\app\video-player'
Failed to compile.
I get the above error whenever I try to run.
I need to be able to listen to events on the mat video player and seek.
https://stackblitz.com/edit/angular-mkrj9r
package.json
"dependencies": {
"@angular/animations": "^8.0.2",
"@angular/cdk": "8.0.1",
"@angular/common": "8.0.2",
"@angular/compiler": "8.0.2",
"@angular/core": "8.0.2",
"@angular/forms": "8.0.2",
"@angular/material": "^8.0.1",
"@angular/platform-browser": "8.0.2",
"@angular/platform-browser-dynamic": "8.0.2",
"@angular/platform-server": "8.0.2",
"@angular/router": "8.0.2",
"@aspnet/signalr": "^1.1.4",
"@fortawesome/angular-fontawesome": "^0.4.0",
"@fortawesome/fontawesome-svg-core": "^1.2.19",
"@fortawesome/free-solid-svg-icons": "^5.9.0",
"@nguniversal/module-map-ngfactory-loader": "7.1.0",
"aspnet-prerendering": "^3.0.1",
"bootstrap": "^4.3.1",
"core-js": "^2.6.9",
"hammerjs": "^2.0.8",
"jquery": "3.3.1",
"mat-video": "^2.7.2",
"oidc-client": "^1.8.2",
"popper.js": "^1.15.0",
"rxjs": "^6.5.2",
"tslib": "^1.10.0",
"zone.js": "~0.9.1"
},
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { NavMenuComponent } from './nav-menu/nav-menu.component';
import { HomeComponent } from './home/home.component';
import { CounterComponent } from './counter/counter.component';
import { FetchDataComponent } from './fetch-data/fetch-data.component';
import { EventViewComponent } from './event-view/event-view.component';
import { MainPlayerComponent } from './main-player/main-player.component';
import { VideoPlayerComponent } from './video-player/video-player.component';
import { CdkTreeModule } from '@angular/cdk/tree';
import { MatIconModule } from '@angular/material/icon';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatVideoModule } from 'mat-video';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent,
NavMenuComponent,
HomeComponent,
CounterComponent,
FetchDataComponent,
EventViewComponent,
MainPlayerComponent,
VideoPlayerComponent
],
imports: [
BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
BrowserAnimationsModule,
MatVideoModule,
HttpClientModule,
CdkTreeModule,
MatIconModule,
FontAwesomeModule,
FormsModule,
RouterModule.forRoot([
{ path: '', component: HomeComponent, pathMatch: 'full' },
{ path: 'counter', component: CounterComponent },
{ path: 'fetch-data', component: FetchDataComponent },
{ path: 'event-view', component: EventViewComponent },
{ path: 'main-player', component: MainPlayerComponent },
{ path: 'video-player', component: VideoPlayerComponent }
])
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
video-player.component.ts
import { Component, Input, ViewChild, AfterViewInit, Renderer2 } from '@angular/core';
import { MatVideoComponent } from 'mat-video/app/video/video.component';
export interface Video {
Title: string;
Source: string;
Thumbnail?: string;
StartTime?: number;
PreviousVideo?: Video;
}
@Component({
selector: 'app-video-player',
templateUrl: './video-player.component.html',
styleUrls: ['./video-player.component.css']
})
export class VideoPlayerComponent implements AfterViewInit{
@Input() video: Video;
@ViewChild('video', { static: false }) matVideo: MatVideoComponent;
videoPlayer: HTMLVideoElement;
constructor(private renderer: Renderer2) { }
public seek(time: number) {
this.videoPlayer.currentTime = time;
}
ngAfterViewInit(): void {
this.videoPlayer = this.matVideo.getVideoTag();
this.renderer.listen(this.videoPlayer, 'ended', () => console.log('video ended'));
}
}
video-player.component.html
<mat-video #video src="{{ video.Source }}"></mat-video>
Tried Angular 7 and 8 and had same issue
I am pretty new to angular so I apologize if I have missed something obvious. I followed your installation instructions with no issue. I can play video and change source correctly. I am only having issues with MatVideoComponent.
After upgrading to 2.7.0 from 2.6.0 my project isn't compiling anymore. I tried to remove the node_modules folder and run a fresh npm install without success. If I revert back to 2.6.0 it starts fine
This was the only modification since my last start.
+++ b/package-lock.json
@@ -6336,9 +6336,9 @@
}
},
"mat-video": {
- "version": "2.6.0",
- "resolved": "https://registry.npmjs.org/mat-video/-/mat-video-2.6.0.tgz",
- "integrity": "sha512-iAx7NjAfzsfCOp5e3rUeltrzyUQWIJC7q4za3d5Vs7rrbOo/5d3OcYUc5gzqUXsp0+aWunKpBUnHrvvaHHNWkw==",
+ "version": "2.7.0",
+ "resolved": "https://registry.npmjs.org/mat-video/-/mat-video-2.7.0.tgz",
+ "integrity": "sha512-Z95zB8ANN/HMyEgCn9+U083ohK3mVsF5h3GOcIyQlYZciq1AZqEfI2mAP6s0ZSKmhsI7hsHgZeJx/lG/0YX8Ig==",
"requires": {
"tslib": "^1.9.0"
}
diff --git a/package.json b/package.json
index 2a3a555..96c62cd 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
"@swimlane/ngx-charts": "^11.1.0",
"core-js": "^2.5.4",
"hammerjs": "^2.0.8",
- "mat-video": "^2.6.0",
+ "mat-video": "^2.7.0",
"ngx-cookie": "^4.1.2",
"ngx-uploader": "^7.1.0",
"rxjs": "~6.3.3",
When running ng serve, I get the following error:
ng serve
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Date: 2019-06-02T15:09:32.567Z
Hash: a1500ba70e0080194789
Time: 6998ms
chunk {es2015-polyfills} es2015-polyfills.js, es2015-polyfills.js.map (es2015-polyfills) 284 kB [initial] [rendered]
chunk {main} main.js, main.js.map (main) 1.86 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 93.1 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 179 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 327 kB [initial] [rendered]
ERROR in No NgModule metadata found for 'AppModule'.
I then tried to modify the app.module.ts by adding a new empty line at the end, and the recompilation triggers:
ERROR in node_modules/mat-video/app/video/ui/mat-fullscreen-button/mat-fullscreen-button.component.d.ts(2,30): error TS2307: Cannot find module '../../services/event.service'.
node_modules/mat-video/app/video/ui/mat-fullscreen-button/mat-fullscreen-button.component.d.ts(3,35): error TS2307: Cannot find module '../../services/fullscreen.service'.
node_modules/mat-video/app/video/ui/mat-play-button/mat-play-button.component.d.ts(2,30): error TS2307: Cannot find module '../../services/event.service'.
node_modules/mat-video/app/video/ui/mat-seek-progress-control/mat-seek-progress-control.component.d.ts(3,30): error TS2307: Cannot find module '../../services/event.service'.
node_modules/mat-video/app/video/ui/mat-video-spinner/mat-video-spinner.component.d.ts(2,30): error TS2307: Cannot find module '../../services/event.service'.
node_modules/mat-video/app/video/ui/mat-volume-control/mat-volume-control.component.d.ts(3,30): error TS2307: Cannot find module '../../services/event.service'.
node_modules/mat-video/app/video/video.component.d.ts(3,30): error TS2307: Cannot find module './services/event.service'.
node_modules/mat-video/mat-video.d.ts(5,47): error TS2307: Cannot find module './app/video/directives/mat-video-source.directive'.
node_modules/mat-video/mat-video.d.ts(6,46): error TS2307: Cannot find module './app/video/directives/mat-video-track.directive'.
node_modules/mat-video/mat-video.d.ts(9,36): error TS2307: Cannot find module './app/video/services/event.service'.
node_modules/mat-video/mat-video.d.ts(10,41): error TS2307: Cannot find module './app/video/services/fullscreen.service'.
My guess is that the new mat-video module wasn't properly delivered / delivered with the sample app and the default app.module.ts causing havroc in my project
Can't start application in local anymore
Application starts....
"dependencies": {
"@angular/animations": "^7.2.7",
"@angular/cdk": "^7.3.3",
"@angular/common": "~7.2.0",
"@angular/compiler": "~7.2.0",
"@angular/core": "~7.2.0",
"@angular/flex-layout": "^7.0.0-beta.23",
"@angular/forms": "~7.2.0",
"@angular/material": "^7.3.3",
"@angular/platform-browser": "~7.2.0",
"@angular/platform-browser-dynamic": "~7.2.0",
"@angular/router": "~7.2.0",
"@nguniversal/express-engine": "^7.1.0",
"@swimlane/ngx-charts": "^11.1.0",
"core-js": "^2.5.4",
"hammerjs": "^2.0.8",
"mat-video": "^2.7.0",
"ngx-cookie": "^4.1.2",
"ngx-uploader": "^7.1.0",
"rxjs": "~6.3.3",
"tslib": "^1.9.0",
"zone.js": "~0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.13.0",
"@angular/cli": "~7.3.3",
"@angular/compiler-cli": "~7.2.0",
"@angular/language-service": "~7.2.0",
"@types/node": "~8.9.4",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.2.2"
}
When using the <sources>
tag for adding video sources, there is an extra src="null"
attribute In the rendered DOMElements for the <video>
tag, which leads to the failure of the loading of the video (I get an infinite loading spinner)
The extra src="null"
attribute IS rendered
The extra src="null"
attribute SHOULD NOT BE rendered
Happens in this stackblitz: https://stackblitz.com/edit/angular-p1cgj5
File: app.component.html
Angular/Material 9+
mat-video 2.8.1
Seems like #19 is still not working in the latest mat-video release (2.8.0) on iphone.
I get the spinner forever even for a 3seconds video and when i click on play the spinner disappear. I don't have this issue on android or ubuntu
The spinner stays present even if the video is loaded on iphone
The spinner should disappear like it's the case on android or various browser
Providing a StackBlitz reproduction is the best way to share your issue.
StackBlitz starter: https://goo.gl/wwnhMV
go on the demo page https://nkoehler.github.io/mat-video/ on an iphone you'll see that the spinner is always present
consistency of display across all players.
I'm using:
mat-video: "2.8.0",
angular: 8.2.14
material: 8.2.3
Typescript: 3.5.3
Issue is present on iphone on safari and chrome at least
Video playing in full-screen mode is showing different behavior,
When we play video in full-screen mode by clicking on the full-screen icon control then the controls in the expanded view is behaving as per the given customized attributes. But when i try to make full-screen mode by calling the request(which is available inside the FullscreenService) method from our component ts, the video player controls in the full-screen mode is entirely different (it has certain features like fast-forward/rewind by double tapping on video) the given attributes restrictions like title and all are also not taking. Is there way to solve this disparity
my sample HTML code: <mat-video #videoFull src="video.mp4" [fullscreen]="true" title="X"
[quality]="false"`
[overlay]="true" >
component.ts(for calling fullscreen from ts on a click)
@ViewChild('videoFull', { static: false }) matVideoFull: MatVideoComponent;
this.FullscreenService.request(this.matVideoFull.getVideoTag());
`
Expose video duration if relevant (not on streamed video)
it is only possible to seek to a certain time, but not to know the video length.
To have some access to know the video duration.
N/A
In case of a playlist i want to switch to the next video as soon as the current one finishes.
Angular 8.2
Material 8.2
Windows 10
Typescript 3.5.3
...
It would be very useful if there was an option to hide the controls. On the standard HTML video tag, just not including the controls attribute would remove them.
Bug
When I move forward in the video to an unloaded clip, The video loads but loader keeps showing even if the video was loaded and started playing, the loader stays there unless you close the video and open it again.
it should disappear after clip loads.
https://angular-mat-video-loading-issue.stackblitz.io
Angular 8, all browsers.
I have tested your demo page from an iPad and Safari.
And it doesnt work.
It just gets stuck on 2 frames...
Wierd ...
Bug
Video controls on white-ish video are not visible (they are on the video, but because the background is white and the controls are white, you can't see them with the naked eye)
In the screenshot I have a recording of a website that I want to render to the user:
Have the possibility to change the control colors or have a gradient that will allow buttons to be viewable.
Use a video that has light background with the default values of mat-video.
Clients have requested viewing online recordings of their websites when there are errors on their website pages. I have no control over client website design decisions.
Angular 7.0.3
"@angular/material": "7.0.3",
"mat-video": "2.5.0"
"typescript": "3.1.6"
Any browsers and OS
n/a
as the title, does anyone know how to set the height and width when using the mat-video? Just like, when we use HTML
Providing a StackBlitz reproduction is the best way to share your issue.
StackBlitz starter: https://goo.gl/wwnhMV
Currently, the mat-video module uses src tag, it's fine but it doesn't works properly when you try to lazyload a video. Also, the video doesn't appears on the http requests, just the poster.
Be able to use either the tags as data-src or [attr.data-src] and the current one src.
I have a home feed using instagram-like cards for every post, and I managed to dynamically load the proper container for every type of post's content (Just one content, multiple content using swiper), here's the snippet:
`
<ng-template #swiperEnabled>
<!-- Swiper -->
<div mat-card-image class="swiper-container" [swiper]="postSwiper">
<div class="swiper-wrapper">
<ng-container mat-card-image *ngFor="let element of post.content" >
<ng-container *ngIf="element.type != 1; else videoContainer" >
<img class="swiper-slide swiper-lazy" [attr.data-src]="element.url" onError="this.src ='assets/img/common/default-user.png'" >
</ng-container>
<ng-template #videoContainer>
<mat-video class="swiper-slide swiper-lazy"
[autoplay]="false" [preload]="false" [fullscreen]="false" [loop]="true" playsinline=""
[quality]="false"
[download]="false" color="primary" spinner="spin" [poster]="element.poster">
<source matVideoSource [src]="element.url" type="video/mp4">
</mat-video>
<!-- DEFAULT VIDEO PLAYER
<video class="swiper-slide swiper-lazy"
muted loop controls playsinline="" preload="none" [poster]="element.poster"
[attr.data-src]="element.url" type="video/mp4" onError="this.src ='assets/img/common/default-user.png'">
</video>-->
</ng-template>
<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
</ng-container>
</div>
<div class="swiper-pagination"></div>
</div>
</ng-template>
`
Like I wrote above, it would be useful for lazy load purposes, and also the request is not visible.
Using Angular 8+ with latest Material module.
Probably a feature request
AVI files don't play. If you try, you get an error:
Cannot play media. No decoders for requested formats: video/x-msvideo
AVI files would play.
Take a file that the Linux app "Motion" creates (default) and try to play it.
AVI files have been around longer than Linux. While AVI files certainly have limitations, they are fairly common.
Firefox (current), Angular 7. More or less up to date as of last week.
as the title, does anyone know how to set the height and width when using the mat-video? Just like, when we use HTML we can set like ""
After installing Angular Material project is showing the following error
Failed to compile.
./node_modules/@angular/material/esm5/button.es5.js
Module build failed: Error: ENOENT: no such file or directory, open '/media/tango/WorkSpace/IonicProject/mat-video-test/node_modules/@angular/material/esm5/button.es5.js'
at Object.openSync (fs.js:447:3)
at Object.readFileSync (fs.js:349:35)
at Storage.provideSync (/media/tango/WorkSpace/IonicProject/mat-video-test/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:98:13)
at CachedInputFileSystem.readFileSync (/media/tango/WorkSpace/IonicProject/mat-video-test/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:259:32)
at Observable._subscribe (/media/tango/WorkSpace/IonicProject/mat-video-test/node_modules/@ngtools/webpack/src/webpack-input-host.js:35:51)
at Observable._trySubscribe (/media/tango/WorkSpace/IonicProject/mat-video-test/node_modules/@ngtools/webpack/node_modules/rxjs/internal/Observable.js:44:25)
at Observable.subscribe (/media/tango/WorkSpace/IonicProject/mat-video-test/node_modules/@ngtools/webpack/node_modules/rxjs/internal/Observable.js:30:22)
at SyncDelegateHost._doSyncCall (/media/tango/WorkSpace/IonicProject/mat-video-test/node_modules/@angular-devkit/core/src/virtual-fs/host/sync.js:22:20)
at SyncDelegateHost.read (/media/tango/WorkSpace/IonicProject/mat-video-test/node_modules/@angular-devkit/core/src/virtual-fs/host/sync.js:49:21)
at WebpackCompilerHost.readFileBuffer (/media/tango/WorkSpace/IonicProject/mat-video-test/node_modules/@ngtools/webpack/src/compiler_host.js:125:44)
at VirtualFileSystemDecorator.readFile (/media/tango/WorkSpace/IonicProject/mat-video-test/node_modules/@ngtools/webpack/src/virtual_file_system_decorator.js:39:54)
at processResource (/media/tango/WorkSpace/IonicProject/mat-video-test/node_modules/loader-runner/lib/LoaderRunner.js:202:11)
at iteratePitchingLoaders (/media/tango/WorkSpace/IonicProject/mat-video-test/node_modules/loader-runner/lib/LoaderRunner.js:158:10)
at runLoaders (/media/tango/WorkSpace/IonicProject/mat-video-test/node_modules/loader-runner/lib/LoaderRunner.js:365:2)
at NormalModule.doBuild (/media/tango/WorkSpace/IonicProject/mat-video-test/node_modules/webpack/lib/NormalModule.js:280:3)
at NormalModule.build (/media/tango/WorkSpace/IonicProject/mat-video-test/node_modules/webpack/lib/NormalModule.js:427:15)
Angular: ^8.0.1
Material: ^5.2.0
OS: Ubuntu 19.04
TypeScript: ~3.1.6
feature
Doesn't give option to disable subtitle or to change track.
To have previously mentioned features
After running the following command in the angular project. I am getting error in the browser as shown in the image below.
npm install --save @angular/material @angular/cdk @angular/animations hammerjs
npm install --save mat-video
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatVideoModule } from 'mat-video';
@NgModule({
imports: [
BrowserAnimationsModule,
MatVideoModule
],
})
Providing a StackBlitz reproduction is the best way to share your issue.
StackBlitz starter: https://goo.gl/wwnhMV
The latest version is not included in npm registry.
Not much more to say...
Providing a StackBlitz reproduction is the best way to share your issue.
StackBlitz starter: https://goo.gl/wwnhMV
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.