nkoehler / mat-video

:tv: mat-video is an Angular 8/9+ video player using Material!
https://nkoehler.github.io/mat-video/
MIT License
91 stars 47 forks source link

On Safari it does not work. #37

Closed deliverymanager closed 4 years ago

deliverymanager commented 5 years ago

I have tested your demo page from an iPad and Safari. And it doesnt work. It just gets stuck on 2 frames... Wierd ...

am-awais commented 5 years ago

Issue when i play mat video(any format) on Safari it play's with delay like its buffering/loading (after 1s of time interval) but actually its not and when video finish i restart same happens again.

cchatfield commented 4 years ago

Seems to be related to this section in video.component.ts

    @Output() timeChange = new EventEmitter<number>();
    set time(val: number) {
        const video: HTMLVideoElement = this.getVideoTag();
        if (video && val) {
            if (val > video.duration) {
                val = video.duration;
            }
            if (val < 0) {
                val = 0;
            }
            if (val !== video.currentTime) {
                video.currentTime = val;
            }
            if (this.lastTime !== video.currentTime) {
                setTimeout(() => this.timeChange.emit(video.currentTime), 0);
                this.lastTime = video.currentTime;
            }
        }
    }

Commenting out the video.currentTime = val resolves the choppy playback on safari. Maybe something with the val is not in line with the current time and the continuous setting freezes playback.

    @Output() timeChange = new EventEmitter<number>();
    set time(val: number) {
        const video: HTMLVideoElement = this.getVideoTag();
        if (video && val) {
            if (val > video.duration) {
                val = video.duration;
            }
            if (val < 0) {
                val = 0;
            }
            if (val !== video.currentTime) {
                // video.currentTime = val;
            }
            if (this.lastTime !== video.currentTime) {
                setTimeout(() => this.timeChange.emit(video.currentTime), 0);
                this.lastTime = video.currentTime;
            }
        }
    }
iamdimitar3d commented 4 years ago

Will there be a fix for this?

g-hamilton commented 4 years ago

I have the same end result (problem) when tested on Chrome for iOS. So this is affecting more than one browser and device. Really hope there will be a fix soon.

thibserot commented 4 years ago

I've proposed a fix for this issue: https://github.com/nkoehler/mat-video/pull/56

Feedback more than welcome!

nkoehler commented 4 years ago

More feedback surrounding this issue is always appreciated, but for now I've merged the fix. Thanks again.

Improved Safari playback in version 2.8.1.