Best practice regarding updating video sources

[matthiasdv]

Description

I'm struggling with implementing a feature that updates sources for Videogular 2. The basic user flow is as follows;

• User uploads a video to the application's backend.
• Backend does a scale down operation on the video file
• Backend returns a response to the client containing a link to the newly rendered static file
• Client updates the Videogular element with this new source.

I've tried a few possible approaches to this problem and read trough the documentation for videogular 2, as well as the documentation and examples for the Angular 1.x implementation, to no avail.

Actual Behavior

Currently I simply update the [src] binding on the <source/>-element contained within <video vg-media/>. This throws no errors, but the play() function seems to hang. A consecutive pause() throws the following exception:

Uncaught (in promise) DOMException: Theplay() request was interrupted by a call to pause().

This is my HTML:

<video vg-media id="singleVideo" preload="auto" [controls]="controls">
    <source [src]="video.src" [type]="video.type">
</video>

Edit:
When I log this.medias in the API's play() function it returns the following object:

Object
singleVideo:VgMedia
_vgMaster:false
buffer:Object
buffered:(...)
canPlay:false
canPlayThrough:false
currentTime:(...)
duration:(...)
elem:video#singleVideo
id:(...)
isCompleted:false
isMaster:(...)
isMetadataLoaded:false
isWaiting:true
playbackRate:(...)
state:"playing"
subscriptions:Object
time:Object

Both the canPlay and canPlayThrough properties are set to false. When I load my page with a static source link pointing to the same file it plays correctly. Should I reload the videogular component in some way?

Updating video.src in [src]="video.src" triggers the onChanges() function but does not provide a playable video element (see behaviour described above). Do I need to utilise the master-media functionality in order to dynamically update the video sources? I've noticed there's the registerMedia() function in the API, should I use this to register new sources ?

Could you briefly explain the best practices regarding what I'm attempting to achieve?

Thank you!

[Elecash]

Hi,

You don't need to use vg-master or registerMedia() at all. I've seen that error before but it's pretty hard for me to reproduce it. Can you reproduce that error always? If you can, can you tell me how?

In this example you can see what you want to do and I can't reproduce in my machine that error.

https://github.com/videogular/videogular2/tree/master/examples/bound-player

It would be great if you can publish an example to debug with chrome what can be the problem.

[comoris]

hi @Elecash
I'm working on the same project as @matthiasdv , is there a way other than *ngFor to trigger a source-update (on one source-object instead of an array)?.

 constructor(
        private appRef: ApplicationRef,
        private zone: NgZone) {
        this.fsAPI = VgFullscreenAPI;

        this.video = {
                src: "http://static.videogular.com/assets/videos/videogular.mp4",
                type: "video/mp4"
            };
  }

 onClickUpdateSource() {
        this.newVideo = {
            src: "http://techslides.com/demos/sample-videos/small.mp4",
            type: "video/mp4",
        }

        // appRef
        this.video = Object.assign({}, this.newVideo);
        this.appRef.tick();

        // via zone
        this.zone.run( () => {
                this.video = Object.assign({}, this.newVideo)
            }
        )
        // via setTimeout()
        setTimeout( () => { 
            this.video = Object.assign({}, this.newVideo);
        }, 3000);

    }

tried some change detection strategies, but none of them worked updated te video visually, meaning: the source input is changed to the new url but the video plays the old.

Any Suggestions
Thanks in advance

[matthiasdv]

@Elecash

Thanks for referring me to the proper example, it helped a lot.

Turns out the following exception:
localhost/:1 Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().

is thrown whenever api.play() is being called on an invalid video source. i.e. attempting to press the play button when the source url returns a 404.

What made it even more confusing in my particular case was that my application's backend was stuck in a loop encoding the video file over and over again, causing the client to neither fire a 404 response, nor be able to buffer the continuously changing file.

So you may consider this issue closed. Perhaps throwing a more verbose error on invalid source files would be a nice enhancement?

[daslicht]

I have the same issue,

broken link:
https://github.com/videogular/videogular2/tree/master/examples/bound-player

Where do I find this example please?

[Elecash]

This has been moved here: https://github.com/videogular/videogular2-showroom/tree/master/src/app/bound-player

[fdambrosio]

Hi @Elecash I'm testing the bound-player and it doesn't work.
When I click the 'update source' button the player reloads the first video (videogular.mp4).
I've the same issue on a project based on videogular.
My environment: Chrome 58 on Mac 10.12

[Elecash]

@fdambrosio this is a bug probably introduced in the last release. I will fix it asap.