web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2025-01-06 06:50:51 +02:00
Code Releases Activity

Adjusted width/height to support percents. fixes #163

Browse Source
This commit is contained in:
Steve Heffernan 2012-04-09 14:53:03 -07:00
parent 937b52d9bf
commit 4fb7af6b53
1 changed files with 29 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/player.js
View File

@ -38,12 +38,9 @@ _V_.Player = _V_.Component.extend({
_V_.players[el.id] = this; _V_.players[el.id] = this;
// Make box use width/height of tag, or default 300x150 // Make box use width/height of tag, or default 300x150
el.setAttribute("width", options.width);
el.setAttribute("height", options.height);
// Enforce with CSS since width/height attrs don't work on divs // Enforce with CSS since width/height attrs don't work on divs
el.style.width = options.width+"px"; this.width(options.width, true); // (true) Skip resize listener on load
el.style.height = options.height+"px"; this.height(options.height, true);
// Update tag id/class for use as HTML5 playback tech // Update tag id/class for use as HTML5 playback tech
// Might think we should do this after embedding in container so .vjs-tech class // Might think we should do this after embedding in container so .vjs-tech class
@ -535,32 +532,40 @@ _V_.Player = _V_.Component.extend({
// http://dev.w3.org/html5/spec/dimension-attributes.html#attr-dim-height // http://dev.w3.org/html5/spec/dimension-attributes.html#attr-dim-height
// Video tag width/height only work in pixels. No percents. // Video tag width/height only work in pixels. No percents.
// We could potentially allow percents but won't for now until we can do testing around it. // But allowing limited percents use. e.g. width() will return number+%, not computed width
width: function(width, skipListeners){ width: function(num, skipListeners){
if (width !== undefined) { return this.dimension("width", num, skipListeners);
this.el.width = width;
this.el.style.width = width+"px";
// skipListeners allows us to avoid triggering the resize event when setting both width and height
if (!skipListeners) { this.trigger("resize"); }
return this;
}
return parseInt(this.el.getAttribute("width"));
}, },
height: function(height){ height: function(num, skipListeners){
if (height !== undefined) { return this.dimension("height", num, skipListeners);
this.el.height = height;
this.el.style.height = height+"px";
this.trigger("resize");
return this;
}
return parseInt(this.el.getAttribute("height"));
}, },
// Set both width and height at the same time. // Set both width and height at the same time.
size: function(width, height){ size: function(width, height){
// Skip resize listeners on width for optimization // Skip resize listeners on width for optimization
return this.width(width, true).height(height); return this.width(width, true).height(height);
}, },
dimension: function(widthOrHeight, num, skipListeners){
if (num !== undefined) {
// Cache on object to be returned. Shouldn't have any effect after CSS.
this.el[widthOrHeight] = num;
// Check if using percent width/height and adjust
if ((""+num).indexOf("%") !== -1) {
this.el.style[widthOrHeight] = num;
} else {
this.el.style[widthOrHeight] = num+"px";
}
// skipListeners allows us to avoid triggering the resize event when setting both width and height
if (!skipListeners) { this.trigger("resize"); }
return this;
}
// Returns cached width/height in attribute.
// Could make this return computed width and support %s. Not a small amount of work.
return parseInt(this.el.getAttribute(widthOrHeight));
},
// Check if current tech can support native fullscreen (e.g. with built in controls lik iOS, so not our flash swf) // Check if current tech can support native fullscreen (e.g. with built in controls lik iOS, so not our flash swf)
supportsFullScreen: function(){ return this.techGet("supportsFullScreen") || false; }, supportsFullScreen: function(){ return this.techGet("supportsFullScreen") || false; },