web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2025-01-31 11:26:45 +02:00
Code Releases Activity

fix: proxy ios webkit events into fullscreenchange (#3644)

Browse Source 
iOS still doesn't have native fullscreen API access. The video element uses the old webkit fullscreen events `webkitbeginfullscreen` and `webkitendfullscreen`. This makes it so both of those trigger `fullscreenchange` on the player always as opposed to only when `requestFullscreen` was called on the player.
This commit is contained in:
Gary Katsevman 2016-09-29 14:35:31 -04:00 committed by GitHub
parent 6878c21c68
commit e479f8c34c
1 changed files with 33 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/js/tech/html5.js
View File

@ -133,6 +133,10 @@ class Html5 extends Tech {
this.setControls(true); this.setControls(true);
} }
// on iOS, we want to proxy `webkitbeginfullscreen` and `webkitendfullscreen`
// into a `fullscreenchange` event
this.proxyWebkitFullscreen_();
this.triggerReady(); this.triggerReady();
} }
@ -445,6 +449,35 @@ class Html5 extends Tech {
return this.el_.offsetHeight; return this.el_.offsetHeight;
} }
/**
* Proxy iOS `webkitbeginfullscreen` and `webkitendfullscreen` into
* `fullscreenchange` event
*
* @private
* @method proxyWebkitFullscreen_
*/
proxyWebkitFullscreen_() {
if (!('webkitDisplayingFullscreen' in this.el_)) {
return;
}
const endFn = function() {
this.trigger('fullscreenchange', { isFullscreen: false });
};
const beginFn = function() {
this.one('webkitendfullscreen', endFn);
this.trigger('fullscreenchange', { isFullscreen: true });
};
this.on('webkitbeginfullscreen', beginFn);
this.on('dispose', () => {
this.off('webkitbeginfullscreen', beginFn);
this.off('webkitendfullscreen', endFn);
});
}
/** /**
* Get if there is fullscreen support * Get if there is fullscreen support
* *
@ -468,16 +501,6 @@ class Html5 extends Tech {
enterFullScreen() { enterFullScreen() {
const video = this.el_; const video = this.el_;
if ('webkitDisplayingFullscreen' in video) {
this.one('webkitbeginfullscreen', function() {
this.one('webkitendfullscreen', function() {
this.trigger('fullscreenchange', { isFullscreen: false });
});
this.trigger('fullscreenchange', { isFullscreen: true });
});
}
if (video.paused && video.networkState <= video.HAVE_METADATA) { if (video.paused && video.networkState <= video.HAVE_METADATA) {
// attempt to prime the video element for programmatic access // attempt to prime the video element for programmatic access
// this isn't necessary on the desktop but shouldn't hurt // this isn't necessary on the desktop but shouldn't hurt