Skip to content

Commit

Permalink
initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
Chris Sinchok committed Feb 13, 2013
0 parents commit 964bc88
Show file tree
Hide file tree
Showing 12 changed files with 8,302 additions and 0 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
.DS_Store
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Work on a video-js VAST component.
45 changes: 45 additions & 0 deletions responsive.video.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
function responsive (options) {

options = options || {};

var responsiveEl = document.createElement('div');
responsiveEl.className = 'vsj-responsive';
this.getEl().appendChild(responsiveEl);

this.on('loadedmetadata', function() {

var height, width;
var videoEl = this.getEl().getElementsByTagName("video")[0];
if(videoEl.videoHeight && videoEl.videoWidth) {
width = videoEl.videoWidth;
height = videoEl.videoHeight;
}

// If the aspectRatio is specified, trust that.
if (options.aspectRatio) {
width = options.aspectRatio[0];
height = options.aspectRatio[1];
}

// If we made a responsive div, and have a height and width, then let's do this thing.
if(videoEl.localName === 'video' && width && height) {

console.log("Setting up styles...");

this.getEl().style.display = 'inline-block';
this.getEl().style.position = 'relative';
this.getEl().style.height = '';
this.getEl().style.width = '';

videoEl.style.position = 'absolute';
videoEl.style.top = 0;
videoEl.style.bottom = 0;
videoEl.style.left = 0;
videoEl.style.right = 0;
videoEl.style.height = '';
videoEl.style.width = '';

responsiveEl.style.paddingTop = ((height / width) * 100 ) + '%';
}
});
}
64 changes: 64 additions & 0 deletions test/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Video.js VAST Example</title>

<link href="../videojs/video-js.css" rel="stylesheet" type="text/css">
<link href="../vast.video.css" rel="stylesheet" type="text/css">

<style type="text/css">
#vid1 {
width: 75%;
}
</style>

<!--[if IE]>
<script src="https://getfirebug.com/releases/lite/1.4/firebug-lite.js"></script>
<!--<![endif]-->

<!-- GENERATED LIST OF SOURCE FILES -->
<script src="../videojs/minified.video.js"></script>
<script src="../responsive.video.js"></script>
<script src="../vast.js"></script>
<script src="../vast.video.js"></script>
<script>
// Easy access to test Flash over HTML5. Add ?flash to URL
if (window.location.href.indexOf("?flash") !== -1) {
_V_.options.techOrder = ["flash"];
_V_.options.flash.swf = "../videojs/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;">This page shows you how to create, register and initialize a Video.js plugin.</p>

<video id="vid1" class="video-js vjs-default-skin" controls preload="auto"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{}'>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4'>
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'>
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg'>
<p>Video Playback Not Supported</p>
</video>

<script>
(function() {
var vid1;

// register the plugins
_V_.plugin('responsive', responsive);
_V_.plugin('vast', vast);

// initialize it
vid1 = _V_('vid1');
vid1.responsive();

// vid1.vast({VASTServers: ['http://ad.doubleclick.net/pfadx/N270.126913.6102203221521/B3876671.21;dcadv=2215309;sz=0x0;ord=%5btimestamp%5d;dcmt=text/xml']});

vid1.vast({VASTServers: ['http://ad.doubleclick.net/pfadx/N2870.3804.THEONION/B7370520.11;sz=0x0;dcmt=text/xml']});
})();
</script>

</body>
</html>
193 changes: 193 additions & 0 deletions vast.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,193 @@
/* Node helpers */
function getNodeAttr(node, nodeName, attrName) {
var nodes = node.getElementsByTagName(nodeName);
if(nodes) {
return nodes[0].getAttribute(attrName);
} else {
return undefined;
}
}

function getNodeText(node, nodeName) {
var nodes = node.getElementsByTagName(nodeName);
if(nodes) {
return nodes[0].textContent;
} else {
return undefined;
}
}

/**************************************/
/* Objects to hold the VAST node data */
/**************************************/

function compareMediaFiles(a, b) {
var types = {
'video/mp4': 3,
'video/webm': 3,
'video/ogv': 3,
'video/flv': 2,
'video/x-flv': 2
};

var atype = types[a.type] || 0;
var btype = types[b.type] || 0;

if (atype > btype)
return -1;
if (atype < btype)
return 1;

if(a.width > b.width)
return -1;
if(a.width < b.width)
return 1;

return 0;
}

function Linear(node) {
this.sequence = node.parentNode.getAttribute('sequence');

this.duration = getNodeText(node, 'Duration');

this.trackingEvents = {};
var nodes = node.getElementsByTagName('Tracking');
for (var i=0;i<nodes.length;i++) {
this.trackingEvents[nodes[i].getAttribute('event')] = nodes[i].textContent;
}

this.mediaFiles = [];
nodes = node.getElementsByTagName('MediaFile');
for (var j=0;j<nodes.length;j++) {
var mediaFile = {
id: nodes[j].getAttribute('id'),
delivery: nodes[j].getAttribute('delivery'),
src: nodes[j].textContent,
type: nodes[j].getAttribute('type'),
bitrate: nodes[j].getAttribute('bitrate'),
width: parseInt(nodes[j].getAttribute('width')),
height: parseInt(nodes[j].getAttribute('height'))
};
this.mediaFiles.push(mediaFile);
}

this.mediaFiles.sort(compareMediaFiles);

this.sources = function(width, types) {
types = types || ['video/webm', 'video/mp4', 'video/ogv'];

var typeSources = {};
for(var i=0;i<this.mediaFiles.length;i++) {
var thisType = this.mediaFiles[i].type;
var thisSrc = this.mediaFiles[i].src;

if (types.indexOf(thisType) >= 0) {
if(typeSources[thisType] === undefined) {
typeSources[thisType] = thisSrc;
} else {
if (width && this.mediaFiles[i].width < width) {
typeSources[thisType] = thisSrc;
}
}
}
}

var sourcesArray = [];
for(var j=0;j<types.length;j++) {
if(typeSources[types[j]] !== undefined) {
sourcesArray.push({
src: typeSources[types[j]],
type: types[j]
});
}
}
return sourcesArray;
};
}

function Inline(node) {
this.version = getNodeAttr(node, 'AdSystem', 'version');

this.title = getNodeText(node, 'AdTitle');
this.description = getNodeText(node, 'Description');

this.impressions = {};
var nodes = node.getElementsByTagName('TrackingEvent');
for (var i=0;i<nodes.length;i++) {
this.impressions[nodes[i].getAttribute('id')] = nodes[i].textContent;
}

this.linear;
this.nonLinearAds = [];
this.companionAds = [];

// Get the <Linear> creatives.
nodes = node.getElementsByTagName('Linear');
if (nodes.length > 0) {
this.linear = new Linear(nodes[0]);
}

}

function Ad(node) {
this.id = node.getAttribute('id');
this.inlines = [];
var nodes = node.getElementsByTagName('InLine');
for (var i=0;i<nodes.length;i++) {
var inline = new Inline(nodes[i]);
this.inlines.push(inline);
}

this.sources = function(width, types) {
if(this.inlines.length > 0) {
if(this.inlines[0].linear !== undefined) {
return this.inlines[0].linear.sources(width, types);
}
}
return [];
};
}

function skipAd() {

}

function fetchVAST(url, cbk) {
var httpRequest;
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
try {
httpRequest = new ActiveXObject('Msxml2.XMLHTTP');
}
catch (e) {
try {
httpRequest = new ActiveXObject('Microsoft.XMLHTTP');
}
catch (e) {}
}
}

if (!httpRequest) {
console.log('Giving up :( Cannot create an XMLHTTP instance');
return false;
}
if(cbk !== undefined) {
httpRequest.onreadystatechange = function() {
if(this.readyState === 4) {
var ads = [];

var xml = this.responseXML;
var adNodes = xml.getElementsByTagName('Ad');
for (var i=0;i<adNodes.length;i++) {
var ad = new Ad(adNodes[i]);
ads.push(ad);
}
cbk && cbk(ads);
}
};
}
httpRequest.open('GET', url);
httpRequest.send();
}
20 changes: 20 additions & 0 deletions vast.video.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
.vjs-vast-blocker {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;

z-index: 1;
}

.vjs-skip-button {
position: absolute;
top: 0;
right: 0;
width: 45px;
height: 25px;
background-color: black;
border: 1px solid white;
z-index: 2;
}
Loading

0 comments on commit 964bc88

Please sign in to comment.