web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2024-12-04 10:34:51 +02:00
Code Releases Activity

feat(fluid): use default aspect ratio for fluid players if width unknown (#3614)

Browse Source 
If a player is fluid and does not have a width set, and preload is set to none, the height of the player is zero. This includes where preload is forced to none by mobile Chrome as in #3606.

* If the player has the .vjs-fluid class when initialised, fluid is set to true, so adding the class behaves the same as {fluid: true} in the setup options.
* The fluid(bool) setter calls player.updateStyleEl_(). Otherwise it won't be triggered in createEl() if an aspect ratio is not also set.
* Corrects the test for a set videoWidth() in updateStyleEl_() - videoWidth() returns 0 if the width is unknown. This allows the default 16:9 to kick in rather than using 0:0.
This commit is contained in:
mister-ben 2016-11-03 19:37:30 +00:00 committed by Gary Katsevman
parent f599ef4c51
commit 2988f6ae53
2 changed files with 24 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/js/player.js
View File

@ -496,7 +496,7 @@ class Player extends Component {
}
/**
* Add/remove the vjs-fluid class
* Get/set fluid mode
*
* @param {Boolean} bool Value of true adds the class, value of false removes the class
*/
@ -512,6 +512,8 @@ class Player extends Component {
} else {
this.removeClass('vjs-fluid');
}
this.updateStyleEl_();
}
/**
@ -568,7 +570,7 @@ class Player extends Component {
if (this.aspectRatio_ !== undefined && this.aspectRatio_ !== 'auto') {
// Use any aspectRatio that's been specifically set
aspectRatio = this.aspectRatio_;
} else if (this.videoWidth()) {
} else if (this.videoWidth() > 0) {
// Otherwise try to get the aspect ratio from the video metadata
aspectRatio = this.videoWidth() + ':' + this.videoHeight();
} else {
@ -2623,6 +2625,10 @@ class Player extends Component {
const tagOptions = Dom.getElAttributes(tag);
const dataSetup = tagOptions['data-setup'];
if (Dom.hasElClass(tag, 'vjs-fluid')) {
tagOptions.fluid = true;
}
// Check if data-setup attr exists.
if (dataSetup !== null) {
// Parse options JSON

16
test/unit/player.test.js
View File

@ -191,6 +191,22 @@ QUnit.test('should set the width, height, and aspect ratio via a css class', fun
player.dispose();
});
QUnit.test('should default to 16:9 when fluid', function(assert) {
const player = TestHelpers.makePlayer({fluid: true});
assert.equal(player.currentHeight() / player.currentWidth(), 0.5625, 'fluid player without dimensions defaults to 16:9');
});
QUnit.test('should set fluid to true if element has vjs-fluid class', function(assert) {
const tag = TestHelpers.makeTag();
tag.className += ' vjs-fluid';
const player = TestHelpers.makePlayer({}, tag);
assert.ok(player.fluid(), 'fluid is true with vjs-fluid class');
});
QUnit.test('should use an class name that begins with an alpha character', function(assert) {
const alphaPlayer = TestHelpers.makePlayer({ id: 'alpha1' });
const numericPlayer = TestHelpers.makePlayer({ id: '1numeric' });