Insert Video with Javascript

index.html

<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.markdown

Insert Video with Javascript

Small helper function with no dependencies that will insert a

A Pen by Shaw on CodePen.

License.

insertVideo.js

(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;

}());