Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Insert Video with Javascript
<p>Only want to insert HTML5 video if certain conditions are met? Say you're using a video as an animated background, but iOS isn't going to play that video inline. Or you may need to only control a video in Javascript. Why waste the users bandwidth loading a video that can't be used?</p>
<p>View the source to see that there are no inline <code>&lt;video&gt;</code> or <code>&lt;img&gt;</code> elements. They are all added via Javascript so you have greater control over when & where.</p>
<div class="insert-video" data-controls="controls" data-mute="mute" data-preload="auto" data-sources='[{"src":"http://techslides.com/demos/sample-videos/small.webm","type":"video/webm"},{"src":"http://techslides.com/demos/sample-videos/small.ogv","type":"video/ogg"},{"src":"http://techslides.com/demos/sample-videos/small.mp4","type":"video/mp4"},{"src":"http://techslides.com/demos/sample-videos/small.3gp","type":"video/3gp"}]' data-srcset='[{"src":"http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4","type":"video/mp4"},{"src":"http://www.quirksmode.org/html5/videos/big_buck_bunny.webm","type":"video/webm"},{"src":"http://www.quirksmode.org/html5/videos/big_buck_bunny.ogv","type":"video/ogg"}] 1x, [{"src":"http://techslides.com/demos/sample-videos/small.webm","type":"video/webm"},{"src":"http://techslides.com/demos/sample-videos/small.ogv","type":"video/ogg"},{"src":"http://techslides.com/demos/sample-videos/small.mp4","type":"video/mp4"},{"src":"http://techslides.com/demos/sample-videos/small.3gp","type":"video/3gp"}] 2x'>
<noscript>Fallback for no Javascript. You could link to the video file, or embed the video anyway.</noscript>
</div>
<hr />
<h1>Video to Placeholder Converter</h1>
<p>Paste your <code>&lt;video&gt;</code> or sources here for a quick conversion to the <code>insert-video</code> placeholder format.</p>
<textarea id="source-convert">
<video controls="controls" mute="mute" preload="auto">
<source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm" />
<source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg" />
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4" />
<source src="http://techslides.com/demos/sample-videos/small.3gp" type="video/3gp" />
</video>
</textarea>
<pre id="source-convert-output"></pre>
<hr />
<h1>Fallbacks</h1>
<p>This <code>insertVideos</code> condition is set to <code>false</code> so the <code>data-fallback</code> attribute will be inserted instead.</p>
<div class="fail-video" data-controls="controls" data-mute="mute" data-preload="auto" data-fallback='<img src="http://lorempixel.com/400/225/animals/7/" alt="" />'>
</div>
<p>This insert video is going to fail so the <code>data-poster</code> attribute will be inserted as an image since there isn't a <code>data-fallback</code> attribute or any fallback set in the <code>insertVideos()</code> call.</p>
<div class="fail-video" data-controls="controls" data-mute="mute" data-preload="auto" data-poster='http://lorempixel.com/400/225/nature/3/'>
test.
<!-- -->
</div>

Insert Video with Javascript

Small helper function with no dependencies that will insert a into an element based on the element's data attributes

A Pen by Shaw on CodePen.

License.

(function(){
var d = document,
strType = typeof '',
defaultSelector = '.insert-video';
function each(obj,callback) {
var length = obj.length,
i = 0;
for ( ; i < length; i++ ) {
if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) { break; }
}
}
function createVideo(vidAttributes){
var video = d.createElement('video'),
sources = vidAttributes.sources;
console.log(video,sources);
if ( !sources || vidAttributes.src ) { return false; }
delete vidAttributes.sources;
for (var attr in vidAttributes) { video.setAttribute(attr,vidAttributes[attr]); }
sources = JSON.parse(sources);
each(sources,function(){
var source = d.createElement('source');
for (var attr in this) { source.setAttribute(attr,this[attr]); }
video.appendChild(source);
});
return video;
}
function insertVideos(selector,opts){
if ( arguments.length === 1 ) {
opts = selector || {};
selector = defaultSelector;
} else {
opts = opts || {};
selector = selector || defaultSelector;
}
var elems = (
selector.nodeType ? [selector] :
typeof selector === strType ? d.querySelectorAll(selector) : selector
),
videos = [];
if ( !elems ) { return false; }
each(elems,function(i,elem){
//if ( elem && elem.className.indexOf(' insert-video--done') < 0 ) {
var dataAttr = elem.dataset || false,
attr, video;
if ( !dataAttr ) {
dataAttr = {};
attr = elem.attributes;
each(attr,function(i,el){
var attrName = this.name.replace('data-','');
if ( attrName.length < this.name.length ) {
dataAttr[attrName] = this.value;
}
});
}
if ( opts.condition !== false ) {
video = createVideo(dataAttr);
}
console.log(elem,dataAttr,video);
if ( video ) {
videos.push(video);
elem.innerHTML = '';
elem.className += ' insert-video--done';
elem.appendChild(video);
} else {
elem.className += ' insert-video--fallback';
elem.innerHTML = ( dataAttr.fallback ? dataAttr.fallback : opts.fallback ? opts.fallback : dataAttr.poster ? '<img src="' + dataAttr.poster + '" />' : '' );
}
//}
});
return videos;
}
window.insertVideos = insertVideos;
}());
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.