CommonVideo.JS Documentation

I wrote a script that renders a modal overlay with a video.

Supports

Examples

Here are some examples

Selfhosted: Magic Mike Video

CLICK HERE

Code

<a href="#" class="commonvideo magic-mike">CLICK HERE</a>
<script src="https://cdn.walialu.com/apps/commonvideo-js/commonvideo.min.js"></script>
<script>
  CommonVideo.add_video({
    selector: 'a.commonvideo.magic-mike',
    files: [
    {
      type: 'mp4',
      src: 'http://cdn.walialu.com/magic-mike-640-360.mp4',
      name: 'Mobile Drecksquali',
      target_min_width: 100,
      on_play: function(){
        console.log('video started');
      },
      on_ended: function(){
        console.log('video watched');
      }
    },
    {
      type: 'mp4',
      src: 'http://cdn.walialu.com/magic-mike-854-480.mp4',
      name: 'Nicht ganz so dreckig',
      target_min_width: 700,
      on_play: function(){
        console.log('video started');
      },
      on_ended: function(){
        console.log('video watched');
      }
    },
    {
      type: 'mp4',
      src: 'http://cdn.walialu.com/magic-mike-1280-720.mp4',
      name: 'Full HD',
      target_min_width: 1000,
      on_play: function(){
        console.log('video started');
      },
      on_ended: function(){
        console.log('video watched');
      }
    }
  ]
});
CommonVideo.init();
</script>

Selfhosted: Magic Mike Video (with Overlay)

CLICK HERE

Code

<a href="#" class="commonvideo magic-mike-with-overlay">CLICK HERE</a>
<script src="https://cdn.walialu.com/commonvideo-js/commonvideo.min.js"></script>
<script>
  CommonVideo.add_video({
    selector: 'a.commonvideo.magic-mike-with-overlay',
    files: [
      {
        type: 'mp4',
        src: 'http://cdn.walialu.com/magic-mike-1280-720.mp4',
        name: 'Boom Boom Boom',
        target_min_width: 10,
        on_play: function(){
          // custom video overlay, on video click go to about.walialu.com
          var overlay_func = function(){
            ref = window.CommonVideo.get('video.commonvideo-video')[0];
            l = ref.offsetLeft;
            t = ref.offsetTop;
            w = ref.offsetWidth;
            h = ref.offsetHeight;
            o = document.createElement('div');
            o.className = 'commonvideojs-custom-overlay';
            o.style.zIndex = 99999999;
            o.style.position = 'absolute';
            o.style.width = w + 'px';
            o.style.height = h + 'px';
            o.style.left = l + 'px';
            o.style.top = window.scrollY + t + 'px';
            o.style.height = h - 42 + 'px';
            o.style.cursor = 'pointer';
            o.onclick = function() {
              window.CommonVideo.destroy();
              window.open("https://about.walialu.com");
            };
          document.body.appendChild(o);
          };
          var interval_func = function (){
            try {
              var v = CommonVideo.get('video.commonvideo-video')[0],
              p = v.videoWidth;
              if ( p < 1 )
                var timer = window.setTimeout(interval_func,200);
              else
                overlay_func();
            } catch ( ex ) {
              var timer = window.setTimeout(interval_func,200);
            }
          };
          interval_func();
          console.log('video started');
        },
        on_destroy: function(){
          ref = window.CommonVideo.get('div.commonvideojs-custom-overlay')[0];
          document.body.removeChild(ref);
        },
        on_ended: function(){
          console.log('video watched');
        }
      }
    ]
  });
  CommonVideo.init();
</script>

Selfhosted: Magic Mike Compilation

CLICK HERE

Code

<a href="#" class="commonvideo compilation">CLICK HERE</a>
<script src="https://cdn.walialu.com/commonvideo-js/commonvideo.min.js"></script>
<script>
  CommonVideo.add_video({
    selector: 'a.commonvideo.compilation',
    files: [
      {
        type: 'mp4',
        src: 'http://cdn.walialu.com/magic-mike-dance-scenes-640-360.mp4',
        name: 'Mobile Drecksquali',
        target_min_width: 100,
        on_play: function(){
          console.log('video started');
        },
        on_ended: function(){
          console.log('video watched');
        }
      }
    ]
  });
  CommonVideo.init();
</script>

Youtube Video: Anklespankin Jungle Zac

CLICK HERE

Code

<a href="#" class="commonvideo anklespankin-jungle-zac">CLICK HERE</a>
<script src="https://cdn.walialu.com/commonvideo-js/commonvideo.min.js"></script>
<script>
  CommonVideo.add_video({
    selector: 'a.commonvideo.anklespankin-jungle-zac',
    url: 'https://www.youtube.com/watch?v=TXMjjwRS5fU',
    on_play: function(){
      console.log('video started');
    },
    on_ended: function(){
      console.log('video ended');
    }
  });
  CommonVideo.init();
</script>

Vimeo Video: Work Hard Play Hard

CLICK HERE

Code

    <a href="#" class="commonvideo workhardplayhard">CLICK HERE</a>
    <script src="https://cdn.walialu.com/commonvideo-js/commonvideo.min.js"></script>
    <script>
      CommonVideo.add_video({
        selector: 'a.commonvideo.workhardplayhard',
        url: 'https://vimeo.com/43300450',
        on_play: function(){
          console.log('video started');
        },
        on_ended: function(){
          console.log('video ended');
        }
      });
      CommonVideo.init();
    </script>