1
0
mirror of https://github.com/videojs/video.js.git synced 2025-01-25 11:13:52 +02:00

Close GH-546: Fix for exit-fullscreen bug in 4.0. fixes #497.

This commit is contained in:
Steve Heffernan 2013-05-28 15:29:42 -07:00
parent 8dd88d1626
commit 753ce48e21
5 changed files with 41 additions and 45 deletions

View File

@ -9,6 +9,11 @@
<!-- LOAD VIDEO.JS SOURCE FILES IN ORDER -->
<script src="../build/source-loader.js"></script>
<!-- Set the location of the flash SWF -->
<script>
vjs.options.flash.swf = '../src/swf/video-js.swf'
</script>
</head>
<body>
<p style="background-color:#eee; border: 1px solid #777; padding: 10px; font-size: .8em; line-height: 1.5em; font-family: Verdana, sans-serif;">You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example, so please don't edit or add those files. To get started make a copy of index.html.example and rename it to index.html.</p>

View File

@ -174,7 +174,10 @@ vjs.fixEvent = function(event) {
// which makes copying more difficult.
// TODO: Probably best to create a whitelist of event props
for (var key in old) {
event[key] = old[key];
// Safari 6.0.3 warns you if you try to copy deprecated layerX/Y
if (key !== 'layerX' && key !== 'layerY') {
event[key] = old[key];
}
}
// The event occurred on this element

View File

@ -392,7 +392,7 @@ vjs.Player.prototype.onError = function(e) {
vjs.log('Video Error', e);
};
vjs.Player.prototype.onFullscreenChange = function(e) {
vjs.Player.prototype.onFullscreenChange = function() {
if (this.isFullScreen) {
this.addClass('vjs-fullscreen');
} else {
@ -593,7 +593,11 @@ vjs.Player.prototype.requestFullScreen = function(){
// take the controls fullscreen as well as the video
// Trigger fullscreenchange event after change
vjs.on(document, requestFullScreen.eventName, vjs.bind(this, function(){
// We have to specifically add this each time, and remove
// when cancelling fullscreen. Otherwise if there's multiple
// players on a page, they would all be reacting to the same fullscreen
// events
vjs.on(document, requestFullScreen.eventName, vjs.bind(this, function(e){
this.isFullScreen = document[requestFullScreen.isFullScreen];
// If cancelling fullscreen, remove event listener.
@ -601,37 +605,18 @@ vjs.Player.prototype.requestFullScreen = function(){
vjs.off(document, requestFullScreen.eventName, arguments.callee);
}
this.trigger('fullscreenchange');
}));
// Flash and other plugins get reloaded when you take their parent to fullscreen.
// To fix that we'll remove the tech, and reload it after the resize has finished.
if (this.tech.features.fullscreenResize === false && this.options_['flash']['iFrameMode'] !== true) {
this.pause();
this.unloadTech();
vjs.on(document, requestFullScreen.eventName, vjs.bind(this, function(){
vjs.off(document, requestFullScreen.eventName, arguments.callee);
this.loadTech(this.techName, { src: this.cache_.src });
}));
this.el_[requestFullScreen.requestFn]();
} else {
this.el_[requestFullScreen.requestFn]();
}
this.trigger('fullscreenchange');
this.el_[requestFullScreen.requestFn]();
} else if (this.tech.supportsFullScreen()) {
// we can't take the video.js controls fullscreen but we can go fullscreen
// with native controls
this.techCall('enterFullScreen');
} else {
// fullscreen isn't supported so we'll just stretch the video element to
// fill the viewport
this.enterFullWindow();
this.trigger('fullscreenchange');
}
@ -641,31 +626,11 @@ vjs.Player.prototype.requestFullScreen = function(){
vjs.Player.prototype.cancelFullScreen = function(){
var requestFullScreen = vjs.support.requestFullScreen;
this.isFullScreen = false;
// Check for browser element fullscreen support
if (requestFullScreen) {
// Flash and other plugins get reloaded when you take their parent to fullscreen.
// To fix that we'll remove the tech, and reload it after the resize has finished.
if (this.tech.features.fullscreenResize === false && this.options_['flash']['iFrameMode'] !== true) {
this.pause();
this.unloadTech();
vjs.on(document, requestFullScreen.eventName, vjs.bind(this, function(){
vjs.off(document, requestFullScreen.eventName, arguments.callee);
this.loadTech(this.techName, { src: this.cache_.src });
}));
document[requestFullScreen.cancelFn]();
} else {
document[requestFullScreen.cancelFn]();
}
this.trigger('fullscreenchange');
document[requestFullScreen.cancelFn]();
} else if (this.tech.supportsFullScreen()) {
this.techCall('exitFullScreen');
} else {
@ -920,6 +885,7 @@ vjs.Player.prototype.ended = function(){ return this.techGet('ended'); };
// Current W3C Spec
// http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api
// Mozilla Draft: https://wiki.mozilla.org/Gecko:FullScreenAPI#fullscreenchange_event
// New: https://dvcs.w3.org/hg/fullscreen/raw-file/529a67b8d9f3/Overview.html
if (div.cancelFullscreen !== undefined) {
requestFS.requestFn = 'requestFullscreen';
requestFS.cancelFn = 'exitFullscreen';

View File

@ -33,6 +33,10 @@ vjs.MediaFaker.prototype.createEl = function(){
vjs.MediaFaker.prototype.currentTime = function(){ return 0; };
vjs.MediaFaker.prototype.volume = function(){ return 0; };
vjs.MediaFaker.prototype.muted = function(){ return false; };
vjs.MediaFaker.prototype.pause = function(){ return false; };
vjs.MediaFaker.prototype.supportsFullScreen = function(){ return false; };
vjs.MediaFaker.prototype.features = {};
vjs.MediaFaker.prototype.buffered = function(){ return {}; };
// Export vars for Closure Compiler
vjs['MediaFaker'] = vjs.MediaFaker;

View File

@ -250,3 +250,21 @@ test('should set controls and trigger event', function() {
player.dispose();
});
// Can't figure out how to test fullscreen events with tests
// Browsers aren't triggering the events at least
// asyncTest('should trigger the fullscreenchange event', function() {
// expect(3);
// var player = PlayerTest.makePlayer();
// player.on('fullscreenchange', function(){
// ok(true, 'fullscreenchange event fired');
// ok(this.isFullScreen === true, 'isFullScreen is true');
// ok(this.el().className.indexOf('vjs-fullscreen') !== -1, 'vjs-fullscreen class added');
// player.dispose();
// start();
// });
// player.requestFullScreen();
// });