web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2025-02-02 11:34:50 +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
Show Stats 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
*/
vjs.createEl = function(tagName, properties){
var el, propName;
var el;
el = document.createElement(tagName || 'div');
tagName = tagName || 'div';
properties = properties || {};
for (propName in properties){
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
el = document.createElement(tagName);
// The check for dash checks for the aria-* attributes, like aria-label, aria-valuemin.
// The additional check for "role" is because the default method for adding attributes does not
// add the attribute "role". My guess is because it's not a valid attribute in some namespaces, although
// 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.
vjs.obj.each(properties, function(propName, val){
// Not remembering why we were checking for dash
// but using setAttribute means you have to use getAttribute
if (propName.indexOf('aria-') !== -1 || propName=='role') {
el.setAttribute(propName, properties[propName]);
} else {
el[propName] = properties[propName];
}
// The check for dash checks for the aria-* attributes, like aria-label, aria-valuemin.
// The additional check for "role" is because the default method for adding attributes does not
// add the attribute "role". My guess is because it's not a valid attribute in some namespaces, although
// 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;
};
@ -402,7 +402,7 @@ vjs.setElementAttributes = function(el, attributes){
if (attrValue === null || typeof attrValue === 'undefined' || attrValue === false) {
el.removeAttribute(attrName);
} 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;
player.tag = null;
} else {
el = vjs.createEl('video', {});
el = vjs.createEl('video');
vjs.setElementAttributes(el,
vjs.obj.merge(player.tagAttributes||{}, {
vjs.obj.merge(player.tagAttributes || {}, {
id:player.id() + '_html5_api',
'class':'vjs-tech'
})

7
src/js/player.js
View File

@ -32,11 +32,12 @@ vjs.Player = vjs.Component.extend({
init: function(tag, options, ready){
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
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
// The options argument overrides options set in the video tag
// 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
// ID will now reference player box, not the video tag
attrs = vjs.getAttributeValues(tag);
attrs = vjs.getElementAttributes(tag);
vjs.obj.each(attrs, function(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');
});
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;
var el = document.getElementById('vid1');
vjs.setElementAttributes(el, {controls: false,'data-test': 'asdf'});
var vid1Vals = vjs.getElementAttributes(document.getElementById('vid1'));
equal(vid1Vals['controls'], undefined);
equal(vid1Vals['id'], 'vid1');
equal(vid1Vals['data-test'], 'asdf');
equal(el.getAttribute('id'), 'el1');
equal(el.getAttribute('controls'), '');
equal(el.getAttribute('data-test'), 'asdf');
});
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');
});
test('should restore all video tags attribute after a tech switch', function(){
var fixture = document.getElementById('qunit-fixture');
var html = '<video id="example_1" class="vjs-tech" preload="" webkit-playsinline="" autoplay=""></video>';
fixture.innerHTML += html;
test('should restore attributes from the original video tag when creating a new element', function(){
var player, html5Mock, el;
var tag = document.getElementById('example_1');
var player = new videojs.Player(tag, {techOrder:['html5']});
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);
player = PlayerTest.makePlayer();
html5Mock = { player_: player };
PlayerTest.htmlEqualWithSort(player.tech.el_.outerHTML, html.replace('example_1','example_1_html5_api'));
});
test('should restore all video tags attribute after a tech switch and keep options', function(){
var fixture = document.getElementById('qunit-fixture');
var html = '<video id="example_1" class="vjs-tech" preload="none" autoplay=""></video>';
fixture.innerHTML += html;
var tag = document.getElementById('example_1');
var player = new videojs.Player(tag, {techOrder:['html5'], autoplay:false});
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').replace(' autoplay=""',''));
// simulate attributes stored from the original tag
player.tagAttributes = {
'preload': 'auto',
'controls': true,
'webkit-playsinline': true
};
// set options that should override tag attributes
player.options_['preload'] = 'none';
// create the element
el = vjs.Html5.prototype.createEl.call(html5Mock);
equal(el.getAttribute('preload'), 'none', 'attribute was successful overridden by an option');
equal(el.getAttribute('controls'), '', 'controls attribute was set properly');
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'];
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));
}
};