web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2025-07-15 01:34:23 +02:00
Code Releases Activity

Maded some revisions to videojs/video.js#1369

Browse Source 
closes #1369
This commit is contained in:
Steve Heffernan
2014-08-04 15:04:39 -07:00
parent b3bbb17dd4
commit 527a33a252
6 changed files with 53 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/js/lib.js
View File

@ -8,29 +8,29 @@ var hasOwnProp = Object.prototype.hasOwnProperty;
* @private * @private
*/ */
vjs.createEl = function(tagName, properties){ vjs.createEl = function(tagName, properties){
var el, propName; var el;
el = document.createElement(tagName || 'div'); tagName = tagName || 'div';
properties = properties || {};
for (propName in properties){ el = document.createElement(tagName);
if (hasOwnProp.call(properties, propName)) {
//el[propName] = properties[propName];
// Not remembering why we were checking for dash
// but using setAttribute means you have to use getAttribute
// The check for dash checks for the aria-* attributes, like aria-label, aria-valuemin. vjs.obj.each(properties, function(propName, val){
// The additional check for "role" is because the default method for adding attributes does not // Not remembering why we were checking for dash
// add the attribute "role". My guess is because it's not a valid attribute in some namespaces, although // but using setAttribute means you have to use getAttribute
// browsers handle the attribute just fine. The W3C allows for aria-* attributes to be used in pre-HTML5 docs.
// http://www.w3.org/TR/wai-aria-primer/#ariahtml. Using setAttribute gets around this problem.
if (propName.indexOf('aria-') !== -1 || propName=='role') { // The check for dash checks for the aria-* attributes, like aria-label, aria-valuemin.
el.setAttribute(propName, properties[propName]); // The additional check for "role" is because the default method for adding attributes does not
} else { // add the attribute "role". My guess is because it's not a valid attribute in some namespaces, although
el[propName] = properties[propName]; // browsers handle the attribute just fine. The W3C allows for aria-* attributes to be used in pre-HTML5 docs.
} // http://www.w3.org/TR/wai-aria-primer/#ariahtml. Using setAttribute gets around this problem.
if (propName.indexOf('aria-') !== -1 || propName == 'role') {
el.setAttribute(propName, val);
} else {
el[propName] = val;
} }
} });
return el; return el;
}; };
@ -402,7 +402,7 @@ vjs.setElementAttributes = function(el, attributes){
if (attrValue === null || typeof attrValue === 'undefined' || attrValue === false) { if (attrValue === null || typeof attrValue === 'undefined' || attrValue === false) {
el.removeAttribute(attrName); el.removeAttribute(attrName);
} else { } else {
el.setAttribute(attrName,attrValue === true ? '' : attrValue); el.setAttribute(attrName, (attrValue === true ? '' : attrValue));
} }
}); });
}; };

4
src/js/media/html5.js
View File

@ -81,9 +81,9 @@ vjs.Html5.prototype.createEl = function(){
el = clone; el = clone;
player.tag = null; player.tag = null;
} else { } else {
el = vjs.createEl('video', {}); el = vjs.createEl('video');
vjs.setElementAttributes(el, vjs.setElementAttributes(el,
vjs.obj.merge(player.tagAttributes||{}, { vjs.obj.merge(player.tagAttributes || {}, {
id:player.id() + '_html5_api', id:player.id() + '_html5_api',
'class':'vjs-tech' 'class':'vjs-tech'
}) })

7
src/js/player.js
View File

@ -32,11 +32,12 @@ vjs.Player = vjs.Component.extend({
init: function(tag, options, ready){ init: function(tag, options, ready){
this.tag = tag; // Store the original tag used to set options this.tag = tag; // Store the original tag used to set options
this.tagAttributes = (tag) ? vjs.getElementAttributes(tag) : {}; // Store the tag attributes used to restore html5 tech
// Make sure tag ID exists // Make sure tag ID exists
tag.id = tag.id || 'vjs_video_' + vjs.guid++; tag.id = tag.id || 'vjs_video_' + vjs.guid++;
// Store the tag attributes used to restore html5 element
this.tagAttributes = tag && vjs.getElementAttributes(tag);
// Set Options // Set Options
// The options argument overrides options set in the video tag // The options argument overrides options set in the video tag
// which overrides globally set options. // which overrides globally set options.
@ -195,7 +196,7 @@ vjs.Player.prototype.createEl = function(){
// Copy over all the attributes from the tag, including ID and class // Copy over all the attributes from the tag, including ID and class
// ID will now reference player box, not the video tag // ID will now reference player box, not the video tag
attrs = vjs.getAttributeValues(tag); attrs = vjs.getElementAttributes(tag);
vjs.obj.each(attrs, function(attr) { vjs.obj.each(attrs, function(attr) {
el.setAttribute(attr, attrs[attr]); el.setAttribute(attr, attrs[attr]);
}); });

19
test/unit/lib.js
View File

@ -152,20 +152,17 @@ test('should read tag attributes from elements, including HTML5 in all browsers'
equal(trackVals['title'], 'test'); equal(trackVals['title'], 'test');
}); });
test('should set element attributes from object', function(){
var el, vid1Vals;
test('should set tag attributes from object', function(){ el = document.createElement('div');
el.id = 'el1';
var tags = '<video id="vid1" controls data-test="ok"></video>'; vjs.setElementAttributes(el, { controls: true, 'data-test': 'asdf' });
document.getElementById('qunit-fixture').innerHTML += tags; equal(el.getAttribute('id'), 'el1');
var el = document.getElementById('vid1'); equal(el.getAttribute('controls'), '');
vjs.setElementAttributes(el, {controls: false,'data-test': 'asdf'}); equal(el.getAttribute('data-test'), 'asdf');
var vid1Vals = vjs.getElementAttributes(document.getElementById('vid1'));
equal(vid1Vals['controls'], undefined);
equal(vid1Vals['id'], 'vid1');
equal(vid1Vals['data-test'], 'asdf');
}); });
test('should get the right style values for an element', function(){ test('should get the right style values for an element', function(){

46
test/unit/player.js
View File

@ -495,32 +495,26 @@ test('Data attributes on the video element should persist in the new wrapper ele
equal(player.el().getAttribute('data-id'), dataId, 'data-id should be available on the new player element after creation'); equal(player.el().getAttribute('data-id'), dataId, 'data-id should be available on the new player element after creation');
}); });
test('should restore all video tags attribute after a tech switch', function(){ test('should restore attributes from the original video tag when creating a new element', function(){
var fixture = document.getElementById('qunit-fixture'); var player, html5Mock, el;
var html = '<video id="example_1" class="vjs-tech" preload="" webkit-playsinline="" autoplay=""></video>';
fixture.innerHTML += html;
var tag = document.getElementById('example_1'); player = PlayerTest.makePlayer();
var player = new videojs.Player(tag, {techOrder:['html5']}); html5Mock = { player_: player };
var techOptions = vjs.obj.merge({ 'source': '', 'parentEl': player.el_ }, player.options_['html5']);
vjs.Html5.disposeMediaElement(player.tag);
player.tag = null;
player.tech = new vjs.Html5(player, techOptions);
PlayerTest.htmlEqualWithSort(player.tech.el_.outerHTML, html.replace('example_1','example_1_html5_api')); // simulate attributes stored from the original tag
}); player.tagAttributes = {
'preload': 'auto',
test('should restore all video tags attribute after a tech switch and keep options', function(){ 'controls': true,
var fixture = document.getElementById('qunit-fixture'); 'webkit-playsinline': true
var html = '<video id="example_1" class="vjs-tech" preload="none" autoplay=""></video>'; };
fixture.innerHTML += html;
// set options that should override tag attributes
var tag = document.getElementById('example_1'); player.options_['preload'] = 'none';
var player = new videojs.Player(tag, {techOrder:['html5'], autoplay:false});
var techOptions = vjs.obj.merge({ 'source': '', 'parentEl': player.el_ }, player.options_['html5']); // create the element
vjs.Html5.disposeMediaElement(player.tag); el = vjs.Html5.prototype.createEl.call(html5Mock);
player.tag = null;
player.tech = new vjs.Html5(player, techOptions); equal(el.getAttribute('preload'), 'none', 'attribute was successful overridden by an option');
equal(el.getAttribute('controls'), '', 'controls attribute was set properly');
PlayerTest.htmlEqualWithSort(player.tech.el_.outerHTML, html.replace('example_1','example_1_html5_api').replace(' autoplay=""','')); equal(el.getAttribute('webkit-playsinline'), '', 'webkit-playsinline attribute was set properly');
}); });

11
test/unit/test-helpers.js
View File

@ -17,16 +17,5 @@ var PlayerTest = {
playerOptions['techOrder'] = ['mediaFaker']; playerOptions['techOrder'] = ['mediaFaker'];
return player = new videojs.Player(videoTag, playerOptions); return player = new videojs.Player(videoTag, playerOptions);
},
htmlEqualWithSort : function(htmlResult,htmlExpected) {
function htmlTransform(str) {
str = str.replace(/[<|>]/g,' ');
str = str.trim();
str = str.replace(/\s{2,}/g, ' ');
return str.split(' ').sort().join(' ');
}
htmlResult= htmlResult.split(' ').sort().join(' ');
equal(htmlTransform(htmlResult),htmlTransform(htmlExpected));
} }
}; };