Merge pull request #20 from dutchcoders/video.js

Video.js

Gruntfile.js

@@ -12,6 +12,8 @@ module.exports = function (grunt) {
     // show elapsed time at the end
     require('time-grunt')(grunt);
 
+    grunt.loadNpmTasks('grunt-npm-command');
+
     // configurable paths
     var yeomanConfig = {
         app: require('./bower.json').appPath || 'src',
@@ -37,11 +39,11 @@ module.exports = function (grunt) {
                     livereload: '<%= connect.options.livereload %>'
                 },
                 files: [
-          '<%= yeoman.app %>/*.html',
+                    '<%= yeoman.app %>/*.html',
-          '{.tmp,<%= yeoman.app %>}/styles/{,*/}*.css',
+                    '{.tmp,<%= yeoman.app %>}/styles/{,*/}*.css',
-          '{.tmp,<%= yeoman.app %>}/scripts/{,*/}*.js',
+                    '{.tmp,<%= yeoman.app %>}/scripts/{,*/}*.js',
-          '<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
+                    '<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
-        ],
+                ],
                 tasks: ['includes:server']
             }
         },
@@ -56,19 +58,19 @@ module.exports = function (grunt) {
                 options: {
                     open: true,
                     base: [
-            '.tmp',
+                        '.tmp',
-            '<%= yeoman.app %>'
+                        '<%= yeoman.app %>'
-          ]
+                    ]
                 }
             },
             test: {
                 options: {
                     port: 9001,
                     base: [
-            '.tmp',
+                        '.tmp',
-            'test',
+                        'test',
-            '<%= yeoman.app %>'
+                        '<%= yeoman.app %>'
-          ]
+                    ]
                 }
             },
             dist: {
@@ -82,11 +84,11 @@ module.exports = function (grunt) {
                 files: [{
                     dot: true,
                     src: [
-            '.tmp',
+                        '.tmp',
-            '<%= yeoman.dist %>/*',
+                        '<%= yeoman.dist %>/*',
-            '!<%= yeoman.dist %>/.git*'
+                        '!<%= yeoman.dist %>/.git*'
-          ]
+                    ]
-        }]
+                }]
             },
             server: '.tmp'
         },
@@ -96,11 +98,11 @@ module.exports = function (grunt) {
                 reporter: require('jshint-stylish')
             },
             all: [
-        'Gruntfile.js',
+                'Gruntfile.js',
-        '<%= yeoman.app %>/scripts/{,*/}*.js',
+                '<%= yeoman.app %>/scripts/{,*/}*.js',
-        '!<%= yeoman.app %>/scripts/vendor/*',
+                '!<%= yeoman.app %>/scripts/vendor/*',
-        'test/spec/{,*/}*.js'
+                'test/spec/{,*/}*.js'
-      ]
+            ]
         },
 
 
@@ -153,11 +155,11 @@ module.exports = function (grunt) {
             dist: {
                 files: {
                     src: [
-            '<%= yeoman.dist %>/scripts/{,*/}*.js',
+                        '<%= yeoman.dist %>/scripts/{,*/}*.js',
-            '<%= yeoman.dist %>/styles/{,*/}*.css',
+                        '<%= yeoman.dist %>/styles/{,*/}*.css',
-            '<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
+                        '<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
-            '<%= yeoman.dist %>/fonts/{,*/}*.*'
+                        '<%= yeoman.dist %>/fonts/{,*/}*.*'
-          ]
+                    ]
                 }
             }
         },
@@ -181,7 +183,7 @@ module.exports = function (grunt) {
                     cwd: '<%= yeoman.app %>/images',
                     src: '{,*/}*.{png,jpg,jpeg}',
                     dest: '<%= yeoman.dist %>/images'
-        }]
+                }]
             }
         },
 
@@ -189,9 +191,9 @@ module.exports = function (grunt) {
             dist: {
                 files: {
                     '<%= yeoman.dist %>/styles/main.css': [
-            '.tmp/styles/{,*/}*.css',
+                        '.tmp/styles/{,*/}*.css',
-            '<%= yeoman.app %>/styles/{,*/}*.css'
+                        '<%= yeoman.app %>/styles/{,*/}*.css'
-          ]
+                    ]
                 }
             }
         },
@@ -213,10 +215,24 @@ module.exports = function (grunt) {
                     cwd: '<%= yeoman.app %>',
                     src: '*.html',
                     dest: '<%= yeoman.dist %>'
-        }]
+                }]
             }
         },
-        copy: {
+        'npm-command': {
+            'videojs-install': {
+                options: {
+                    cwd: '<%= yeoman.app %>/bower_components/videojs/'
+                }
+            },
+            'videojs-build': {
+                options: {
+                    cmd: 'run-script',
+                    args: ['build'],
+                    cwd: '<%= yeoman.app %>/bower_components/videojs/'
+                }
+            }
+        }
+        ,copy: {
             dist: {
                 files: [{
                     expand: true,
@@ -224,53 +240,55 @@ module.exports = function (grunt) {
                     cwd: '<%= yeoman.app %>',
                     dest: '<%= yeoman.dist %>',
                     src: [
-            '*.{ico,png,txt}',
+                        '*.{ico,png,txt}',
-            'fonts/{,*/}*.*',
+                        'fonts/{,*/}*.*',
-            '.htaccess',
+                        '.htaccess',
-            'index.txt',
+                        'index.txt',
-            '404.txt',
+                        '404.txt',
-            'images/{,*/}*.{webp,gif,svg}'
+                        'images/{,*/}*.{webp,gif,svg}'
-          ]
+                    ]
-        }]
+                }]
             },
             server: {
                 files: [{
-                  expand: true,
+                    expand: true,
-                  dot: true,
+                    dot: true,
-                  cwd: '<%= yeoman.app %>/bower_components/font-awesome/fonts/',
+                    cwd: '<%= yeoman.app %>/bower_components/font-awesome/fonts/',
-                  dest: '<%= yeoman.app %>/fonts/font-awesome',
+                    dest: '<%= yeoman.app %>/fonts/font-awesome',
-                  src: ['*']
+                    src: ['*']
                 }, {
-                  expand: true,
+                    expand: true,
-                  dot: true,
+                    dot: true,
-                  cwd: '<%= yeoman.app %>/bower_components/bootstrap/dist/fonts/',
+                    cwd: '<%= yeoman.app %>/bower_components/bootstrap/dist/fonts/',
-                  dest: '<%= yeoman.app %>/fonts/glyphicons',
+                    dest: '<%= yeoman.app %>/fonts/glyphicons',
-                  src: ['*']
+                    src: ['*']
                 }]
             }
         },
         concurrent: {
             dist: [
-        'less',
+                'less',
-        'imagemin',
+                'imagemin',
-        'htmlmin'
+                'htmlmin'
-      ]
+            ]
         }
     });
 
+    grunt.loadNpmTasks('grunt-npm-command');
+
     grunt.registerTask('serve', function (target) {
         if (target === 'dist') {
             return grunt.task.run(['build', 'connect:dist:keepalive']);
         }
 
         grunt.task.run([
-      'clean:server',
+            'clean:server',
-      'less',
+            'less',
-                'includes:server',
+            'includes:server',
-      'copy:server',
+            'copy:server',
-      'connect:livereload',
+            'connect:livereload',
-      'watch'
+            'watch'
-    ]);
+        ]);
     });
 
     grunt.registerTask('server', function () {
@@ -279,30 +297,30 @@ module.exports = function (grunt) {
     });
 
     grunt.registerTask('test', [
-    'clean:server',
+        'clean:server',
-    'less',
+        'less',
-    'copy:server',
+        'copy:server',
-    'connect:test',
+        'connect:test',
-  ]);
+    ]);
 
     grunt.registerTask('build', [
-    'clean:dist',
+        'clean:dist',
+        'npm-command',
+        'copy:server',
+        'useminPrepare',
+        'concurrent',
+        'cssmin',
+        'concat',
+        'includes:build',
+        'uglify',
+        'copy',
+        'usemin',
 
-    'copy:server',
+    ]);
-    'useminPrepare',
-    'concurrent',
-    'cssmin',
-    'concat',
-    'includes:build',
-    'uglify',
-    'copy',
-    'usemin',
-
-  ]);
 
     grunt.registerTask('default', [
-    'jshint',
+        'jshint',
-    'test',
+        'test',
-    'build'
+        'build'
-  ]);
+    ]);
 };

bower.json

@@ -13,6 +13,7 @@
     "tests"
   ],
   "dependencies": {
+    "videojs": "~7.4.2",
     "bootstrap": "~3.0.0",
     "modernizr": "~2.6.2",
     "uri.js": "~1.14.1",

package.json

@@ -20,6 +20,7 @@
     "grunt-contrib-watch": "~0.6.1",
     "grunt-include-replace": "^2.0.0",
     "grunt-includes": "^0.4.5",
+    "grunt-npm-command": "^0.1.2",
     "grunt-rev": "~0.1.0",
     "grunt-svgmin": "1.0.0",
     "grunt-usemin": "~2.4.0",

src/download.audio.html

@@ -25,7 +25,13 @@ include "includes/head.html"
 
                     </div>
                     <div id="terminal" class="terminal preview-image">
-                        <audio data-color="#f6f8f8" src="{{.Url}}" type="{{.ContentType}}"></audio>
+                        <audio id="audio-player"
+                               class="video-js vjs-default-skin"
+                               controls
+                               preload="auto"
+                               data-setup='{}'>
+                            <source src="{{.Url}}" type="{{.ContentType}}"></source>
+                        </audio>
                     </div>
                 </div>
             </div>
@@ -37,8 +43,8 @@ include "includes/head.html"
     include "includes/footer.html" 
     include "includes/js.html"
 
-    <!-- build:js /scripts/ckin.js -->
+    <!-- build:js /scripts/vendor/video.js -->
-    <script src="/scripts/ckin.js"></script>
+    <script src="bower_components/videojs/dist/alt/video.novtt.min.js"></script>
     <!-- endbuild -->
 
 </body>

src/download.video.html

@@ -24,7 +24,13 @@ include "includes/head.html"
 
                     </div>
                     <div id="terminal" class="terminal preview-image">
-                        <video data-color="#f6f8f8" src="{{.Url}}" type="{{.ContentType}}"></video>
+                        <video id="video-player"
+                               class="video-js vjs-default-skin"
+                               controls
+                               preload="auto"
+                               data-setup='{}'>
+                            <source src="{{.Url}}" type="{{.ContentType}}"></source>
+                        </video>
                     </div>
                 </div>
             </div>
@@ -36,8 +42,8 @@ include "includes/head.html"
     include "includes/footer.html"
     include "includes/js.html"
 
-    <!-- build:js /scripts/ckin.js -->
+    <!-- build:js /scripts/vendor/video.js -->
-    <script src="/scripts/ckin.js"></script>
+    <script src="bower_components/videojs/dist/alt/video.novtt.min.js"></script>
     <!-- endbuild -->
 
 </body>

src/scripts/ckin.js

@@ -1,509 +0,0 @@
-/*!
-   ckin v0.0.1: Custom HTML5 Media Player Skins.
-   (c) 2017 
-   MIT License
-   git+https://github.com/hunzaboy/ckin.git
-*/
-// Source: https://gist.github.com/k-gun/c2ea7c49edf7b757fe9561ba37cb19ca;
-(function () {
-  // helpers
-  var regExp = function regExp(name) {
-    return new RegExp('(^| )' + name + '( |$)');
-  };
-  var forEach = function forEach(list, fn, scope) {
-    for (var i = 0; i < list.length; i++) {
-      fn.call(scope, list[i]);
-    }
-  };
-
-  // class list object with basic methods
-  function ClassList(element) {
-    this.element = element;
-  }
-
-  ClassList.prototype = {
-    add: function add() {
-      forEach(arguments, function (name) {
-        if (!this.contains(name)) {
-          this.element.className += ' ' + name;
-        }
-      }, this);
-    },
-    remove: function remove() {
-      forEach(arguments, function (name) {
-        this.element.className = this.element.className.replace(regExp(name), '');
-      }, this);
-    },
-    toggle: function toggle(name) {
-      return this.contains(name) ? (this.remove(name), false) : (this.add(name), true);
-    },
-    contains: function contains(name) {
-      return regExp(name).test(this.element.className);
-    },
-    // bonus..
-    replace: function replace(oldName, newName) {
-      this.remove(oldName), this.add(newName);
-    }
-  };
-
-  // IE8/9, Safari
-  if (!('classList' in Element.prototype)) {
-    Object.defineProperty(Element.prototype, 'classList', {
-      get: function get() {
-        return new ClassList(this);
-      }
-    });
-  }
-
-  // replace() support for others
-  if (window.DOMTokenList && DOMTokenList.prototype.replace == null) {
-    DOMTokenList.prototype.replace = ClassList.prototype.replace;
-  }
-})();
-(function () {
-  if (typeof NodeList.prototype.forEach === "function") return false;
-  NodeList.prototype.forEach = Array.prototype.forEach;
-})();
-
-// Unfortunately, due to scattered support, browser sniffing is required
-function browserSniff() {
-  var nVer = navigator.appVersion,
-    nAgt = navigator.userAgent,
-    browserName = navigator.appName,
-    fullVersion = '' + parseFloat(navigator.appVersion),
-    majorVersion = parseInt(navigator.appVersion, 10),
-    nameOffset,
-    verOffset,
-    ix;
-
-  // MSIE 11
-  if (navigator.appVersion.indexOf("Windows NT") !== -1 && navigator.appVersion.indexOf("rv:11") !== -1) {
-    browserName = "IE";
-    fullVersion = "11;";
-  }
-  // MSIE
-  else if ((verOffset = nAgt.indexOf("MSIE")) !== -1) {
-    browserName = "IE";
-    fullVersion = nAgt.substring(verOffset + 5);
-  }
-  // Chrome
-  else if ((verOffset = nAgt.indexOf("Chrome")) !== -1) {
-    browserName = "Chrome";
-    fullVersion = nAgt.substring(verOffset + 7);
-  }
-  // Safari
-  else if ((verOffset = nAgt.indexOf("Safari")) !== -1) {
-    browserName = "Safari";
-    fullVersion = nAgt.substring(verOffset + 7);
-    if ((verOffset = nAgt.indexOf("Version")) !== -1) {
-      fullVersion = nAgt.substring(verOffset + 8);
-    }
-  }
-  // Firefox
-  else if ((verOffset = nAgt.indexOf("Firefox")) !== -1) {
-    browserName = "Firefox";
-    fullVersion = nAgt.substring(verOffset + 8);
-  }
-  // In most other browsers, "name/version" is at the end of userAgent
-  else if ((nameOffset = nAgt.lastIndexOf(' ') + 1) < (verOffset = nAgt.lastIndexOf('/'))) {
-    browserName = nAgt.substring(nameOffset, verOffset);
-    fullVersion = nAgt.substring(verOffset + 1);
-    if (browserName.toLowerCase() == browserName.toUpperCase()) {
-      browserName = navigator.appName;
-    }
-  }
-  // Trim the fullVersion string at semicolon/space if present
-  if ((ix = fullVersion.indexOf(";")) !== -1) {
-    fullVersion = fullVersion.substring(0, ix);
-  }
-  if ((ix = fullVersion.indexOf(" ")) !== -1) {
-    fullVersion = fullVersion.substring(0, ix);
-  }
-  // Get major version
-  majorVersion = parseInt('' + fullVersion, 10);
-  if (isNaN(majorVersion)) {
-    fullVersion = '' + parseFloat(navigator.appVersion);
-    majorVersion = parseInt(navigator.appVersion, 10);
-  }
-  // Return data
-  return [browserName, majorVersion];
-}
-
-var obj = {};
-obj.browserInfo = browserSniff();
-obj.browserName = obj.browserInfo[0];
-obj.browserVersion = obj.browserInfo[1];
-
-wrapPlayers();
-/* Get Our Elements */
-var players = document.querySelectorAll('.ckin__player');
-
-var iconPlay = '<i class="ckin-play"></i>';
-var iconPause = '<i class="ckin-pause"></i>';
-var iconVolumeMute = '<i class="ckin-volume-mute"></i>';
-var iconVolumeHigh = '<i class="ckin-volume-high"></i>';
-var iconVolumeMedium = '<i class="ckin-volume-medium"></i>';
-var iconVolumeLow = '<i class="ckin-volume-low"></i>';
-var iconExpand = '<i class="ckin-expand"></i>';
-var iconCompress = '<i class="ckin-compress"></i>';
-
-players.forEach(function (player) {
-  var video = player.querySelector('video');
-  if (null === video) {
-    return;
-  }
-
-  var skin = attachSkin(video.dataset.ckin);
-  player.classList.add(skin);
-
-  var overlay = video.dataset.overlay;
-  addOverlay(player, overlay);
-
-  var title = showTitle(skin, video.dataset.title);
-  if (title) {
-    player.insertAdjacentHTML('beforeend', title);
-  }
-
-  var html = buildControls(skin);
-  player.insertAdjacentHTML('beforeend', html);
-
-  var color = video.dataset.color;
-  addColor(player, color);
-
-  var playerControls = player.querySelector('.' + skin + '__controls');
-  var progress = player.querySelector('.progress');;
-  var progressBar = player.querySelector('.progress__filled');
-  var progressTime = player.querySelector('.progress__time');
-  var toggle = player.querySelectorAll('.toggle');
-  var skipButtons = player.querySelectorAll('[data-skip]');
-  var ranges = player.querySelectorAll('.' + skin + '__slider');
-  var volumeButton = player.querySelector('.volume');
-  var fullScreenButton = player.querySelector('.fullscreen');
-
-  if (obj.browserName === "IE" && (obj.browserVersion === 8 || obj.browserVersion === 9)) {
-    showControls(video);
-    playerControls.style.display = "none";
-  }
-
-  video.addEventListener('click', function () {
-    togglePlay(this, player, true);
-  });
-  video.addEventListener('play', function () {
-    updateButton(this, toggle);
-  });
-
-  video.addEventListener('pause', function () {
-    updateButton(this, toggle);
-  });
-  video.addEventListener('timeupdate', function () {
-    handleProgress(this, progressBar, progressTime);
-  });
-
-  toggle.forEach(function (button) {
-    return button.addEventListener('click', function () {
-      togglePlay(video, player, true);
-    });
-  });
-  volumeButton.addEventListener('click', function () {
-    toggleVolume(video, volumeButton);
-  });
-
-  var mousedown = false;
-  progress.addEventListener('click', function (e) {
-    scrub(e, video, progress, progressTime);
-  });
-  progress.addEventListener('mousemove', function (e) {
-    return mousedown && scrub(e, video, progress, progressTime);
-  });
-  progress.addEventListener('mousedown', function () {
-    return mousedown = true;
-  });
-  progress.addEventListener('mouseup', function () {
-    return mousedown = false;
-  });
-  fullScreenButton.addEventListener('click', function (e) {
-    return toggleFullScreen(player, fullScreenButton);
-  });
-  addListenerMulti(player, 'webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', function (e) {
-    return onFullScreen(e, player);
-  });
-});
-
-players.forEach(function (player) {
-  var audio = player.querySelector('audio');
-  if (null === audio) {
-    return;
-  }
-
-  var skin = attachSkin(audio.dataset.ckin);
-  player.classList.add(skin);
-
-  var overlay = audio.dataset.overlay;
-  addOverlay(player, overlay);
-
-  var title = showTitle(skin, audio.dataset.title);
-  if (title) {
-    player.insertAdjacentHTML('beforeend', title);
-  }
-
-  var html = buildControls(skin);
-  player.insertAdjacentHTML('beforeend', html);
-
-  var color = audio.dataset.color;
-  addColor(player, color);
-
-  var playerControls = player.querySelector('.' + skin + '__controls');
-  var progress = player.querySelector('.progress');;
-  var progressBar = player.querySelector('.progress__filled');
-  var progressTime = player.querySelector('.progress__time');
-  var toggle = player.querySelectorAll('.toggle');
-  var skipButtons = player.querySelectorAll('[data-skip]');
-  var ranges = player.querySelectorAll('.' + skin + '__slider');
-  var volumeButton = player.querySelector('.volume');
-  var fullScreenButton = player.querySelector('.fullscreen');
-
-  if (obj.browserName === "IE" && (obj.browserVersion === 8 || obj.browserVersion === 9)) {
-    showControls(audio);
-    playerControls.style.display = "none";
-  }
-
-  audio.addEventListener('click', function () {
-    togglePlay(this, player, false);
-  });
-  audio.addEventListener('play', function () {
-    updateButton(this, toggle);
-  });
-
-  audio.addEventListener('pause', function () {
-    updateButton(this, toggle);
-  });
-  audio.addEventListener('timeupdate', function () {
-    handleProgress(this, progressBar, progressTime);
-  });
-
-  toggle.forEach(function (button) {
-    return button.addEventListener('click', function () {
-      togglePlay(audio, player, false);
-    });
-  });
-
-  volumeButton.addEventListener('click', function () {
-    toggleVolume(audio, volumeButton);
-  });
-
-  var mousedown = false;
-  progress.addEventListener('click', function (e) {
-    scrub(e, audio, progress, progressTime);
-  });
-  progress.addEventListener('mousemove', function (e) {
-    return mousedown && scrub(e, audio, progress, progressTime);
-  });
-  progress.addEventListener('mousedown', function () {
-    return mousedown = true;
-  });
-  progress.addEventListener('mouseup', function () {
-    return mousedown = false;
-  });
-  fullScreenButton.addEventListener('click', function (e) {
-    return toggleFullScreen(player, fullScreenButton);
-  });
-  addListenerMulti(player, 'webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', function (e) {
-    return onFullScreen(e, player);
-  });
-});
-
-function showControls(media) {
-  media.setAttribute("controls", "controls");
-}
-
-function togglePlay(media, player, autoHide) {
-  var method = media.paused ? 'play' : 'pause';
-  media[method]();
-  if (autoHide) {
-    media.paused ? player.classList.remove('is-playing') : player.classList.add('is-playing');
-  }
-}
-
-function updateButton(media, toggle) {
-  var icon = media.paused ? iconPlay : iconPause;
-  toggle.forEach(function (button) {
-    return button.innerHTML = icon;
-  });
-}
-
-function skip() {
-  media.currentTime += parseFloat(this.dataset.skip);
-}
-
-function toggleVolume(media, volumeButton) {
-  var level = media.volume;
-  var icon = iconVolumeMedium;
-  if (level == 1) {
-    level = 0;
-    icon = iconVolumeMute;
-  } else if (level == 0.66) {
-    level = 1;
-    icon = iconVolumeHigh;
-  } else if (level == 0.33) {
-    level = 0.66;
-    icon = iconVolumeMedium;
-  } else {
-    level = 0.33;
-    icon = iconVolumeLow;
-  }
-  media['volume'] = level;
-  volumeButton.innerHTML = icon;
-}
-
-function handleRangeUpdate() {
-  media[this.name] = this.value;
-}
-
-function handleProgress(media, progressBar, progressTime) {
-  var percent = media.currentTime / media.duration * 100;
-  progressBar.style.flexBasis = percent + '%';
-  progressTime.innerText = formatTime(media.currentTime) + "/" + formatTime(media.duration);
-}
-
-function scrub(e, media, progress, progressTime) {
-  var scrubTime = e.offsetX / progress.offsetWidth * media.duration;
-  media.currentTime = scrubTime;
-  progressTime.innerText = formatTime(media.currentTime) + "/" + formatTime(media.duration);
-}
-
-function formatTime(time) {
-  var date = new Date(null);
-  date.setSeconds(time); // specify value for SECONDS here
-  return date.toISOString().substr(11, 8);
-}
-
-function wrapPlayers() {
-
-  var videos = document.querySelectorAll('video');
-
-  videos.forEach(function (video) {
-
-    var wrapper = document.createElement('div');
-    wrapper.classList.add('ckin__player');
-
-    video.parentNode.insertBefore(wrapper, video);
-
-    wrapper.appendChild(video);
-  });
-
-  var audios = document.querySelectorAll('audio');
-
-  audios.forEach(function (audio) {
-    var wrapper = document.createElement('div');
-    wrapper.classList.add('ckin__player');
-    wrapper.classList.add('audio');
-
-    audio.parentNode.insertBefore(wrapper, audio);
-
-    wrapper.appendChild(audio);
-  });
-}
-
-function buildControls(skin) {
-  var html = [];
-  html.push('<button class="' + skin + '__button--big toggle" title="Toggle Play">' + iconPlay + '</button>');
-
-  html.push('<div class="' + skin + '__controls ckin__controls">');
-
-  html.push('<button class="' + skin + '__button toggle" title="Toggle Media">' + iconPlay + '</button>', '<div class="progress">', '<div class="progress__filled"></div>', '<p class="progress__breaker"></p>', '<div class="progress__time"></div>', '</div>', '<button class="' + skin + '__button volume" title="Volume">' + iconVolumeMedium + '</button>', '<button class="' + skin + '__button fullscreen" title="Full Screen">' + iconExpand + '</button>');
-
-  html.push('</div>');
-
-  return html.join('');
-}
-
-function attachSkin(skin) {
-  if (typeof skin != 'undefined' && skin != '') {
-    return skin;
-  } else {
-    return 'default';
-  }
-}
-
-function showTitle(skin, title) {
-  if (typeof title != 'undefined' && title != '') {
-    return '<div class="' + skin + '__title">' + title + '</div>';
-  } else {
-    return false;
-  }
-}
-
-function addOverlay(player, overlay) {
-
-  if (overlay == 1) {
-    player.classList.add('ckin__overlay');
-  } else if (overlay == 2) {
-    player.classList.add('ckin__overlay--2');
-  } else {
-    return;
-  }
-}
-
-function addColor(player, color) {
-  if (typeof color != 'undefined' && color != '') {
-    var buttons = player.querySelectorAll('button');
-    var progress = player.querySelector('.progress__filled');
-    progress.style.background = color;
-    buttons.forEach(function (button) {
-      return button.style.color = color;
-    });
-  }
-}
-
-function toggleFullScreen(player, fullScreenButton) {
-  // let isFullscreen = false;
-  if (!document.fullscreenElement && // alternative standard method
-    !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {
-    player.classList.add('ckin__fullscreen');
-
-    if (player.requestFullscreen) {
-      player.requestFullscreen();
-    } else if (player.mozRequestFullScreen) {
-      player.mozRequestFullScreen(); // Firefox
-    } else if (player.webkitRequestFullscreen) {
-      player.webkitRequestFullscreen(); // Chrome and Safari
-    } else if (player.msRequestFullscreen) {
-      player.msRequestFullscreen();
-    }
-    isFullscreen = true;
-
-    fullScreenButton.innerHTML = iconCompress;
-  } else {
-    player.classList.remove('ckin__fullscreen');
-
-    if (document.cancelFullScreen) {
-      document.cancelFullScreen();
-    } else if (document.mozCancelFullScreen) {
-      document.mozCancelFullScreen();
-    } else if (document.webkitCancelFullScreen) {
-      document.webkitCancelFullScreen();
-    } else if (document.msExitFullscreen) {
-      document.msExitFullscreen();
-    }
-    isFullscreen = false;
-    fullScreenButton.innerHTML = iconExpand;
-  }
-}
-
-function onFullScreen(e, player) {
-  var isFullscreenNow = document.webkitFullscreenElement !== null;
-  if (!isFullscreenNow) {
-    player.classList.remove('ckin__fullscreen');
-    player.querySelector('.fullscreen').innerHTML = iconExpand;
-  } else {
-    // player.querySelector('.fullscreen').innerHTML = iconExpand;
-
-  }
-}
-
-function addListenerMulti(element, eventNames, listener) {
-  var events = eventNames.split(' ');
-  for (var i = 0, iLen = events.length; i < iLen; i++) {
-    element.addEventListener(events[i], listener, false);
-  }
-}

src/styles/includes/preview.less

@@ -102,108 +102,22 @@ padding: 0px;
   }
 }
 
-#md-preview,{
+#md-preview {
 	padding-bottom: 30px;
 }
 
-
+video, audio {
-video {
   margin: 0 auto;
   width: 100%;
 }
 
-
 .wrap {
   width: 40%;
   height: 40%;
   margin: 20px auto;
 }
 
-video {
-  width: 100%;
-}
-
-video::-webkit-media-controls-enclosure {
-  padding: 0px;
-  height: 50px;
-}
-
-video::-webkit-media-controls-panel {
-  opacity: 1 !important;
-  display: -webkit-flex !important;
-  margin-top: 50px;
-  height: 50px;
-  background-color: @dark-blue;
-  border-radius: 0 0 10px 10px;
-}
-
-video::-webkit-media-controls-timeline {
-  height: 12px;
-  padding: 0px; 
-  border: 0px;
-}
-
-video::-webkit-media-controls-volume-slider, video::-webkit-media-controls-timeline {
-  height: 12px;
-  border-radius: 5px;
-  min-width: 15px;
-}
-
-video::-webkit-media-controls-volume-slider::-webkit-media-slider-container, video::-webkit-media-controls-timeline::-webkit-media-slider-container {
-  border: 0px;
-  border-radius: 5px;
-  background-color: @blue;
-  cursor: pointer;
-}
-
 ::-webkit-media-slider-thumb {
   -webkit-appearance: none;
   background: red;
 }
-
-video::-webkit-media-controls-play-button {
-  cursor: pointer;
-
-}
-
-video::-webkit-media-controls-play-button:hover {
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
-  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
-  opacity: 0.7;
-}
-
-video::-webkit-media-controls-fullscreen-button {
-  -webkit-appearance: none;
-  background-color: transparent;
-  cursor: pointer;
-  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAABACAYAAADF2C3zAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo2N0Q1MjA3MDc5NjYxMUUyQjQzRjk5Mjc1MTU5Qjk0NSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo2N0Q1MjA3MTc5NjYxMUUyQjQzRjk5Mjc1MTU5Qjk0NSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkQyQkE2QUZGNzkzQjExRTJCNDNGOTkyNzUxNTlCOTQ1IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkQyQkE2QjAwNzkzQjExRTJCNDNGOTkyNzUxNTlCOTQ1Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+1z7uaAAAAVhJREFUeNrsljFuAjEQRb3ACZByii2pECmgySFIGoiUGsEKiaQAimwTToCggSYSNUoJHSfgFJwhMt9oHBlj8Ga2SAqP9KQV7PPY4y1+9PDYEZ4agaHrj4Lwl5LHXFkvsOXKatt1jjykzrq2WeW+Jb6Bhp5BySOvQQLuaKEPYwYnOQLSkpTwBfbUqQam9hDVtieOyaoOGxDTAtNrV9UFqTEc/UGUQeXWmfSZB6BqXMc3aIFlFllY4hP49N2h66p2YJXly3HJ92ABihxZVRPM6BqvViSlFNwqiBwV5CAHOchBDnKQ/5/si4/iOUn5YX0+ec0X1mkBXljH1nlhncTfh3WIF2EdR/gJ677OKqwfdOqHmJ4Nsd17PwU5E/yWgJieY/Biv6MoUVjvOe61j+cGuuwpsLvDOl5KjeFkDusRtiSNKZ6FdXTlhXWIfxTWcf58YR0L3AzrRwEGAJoOgCMfh6hiAAAAAElFTkSuQmCC);
-  background-size: 16px 64px;
-  background-position: center 8px;
-  background-repeat: no-repeat;
-}
-
-video::-webkit-media-controls-mute-button {
-  -webkit-appearance: none;
-  background-color: transparent;
-  cursor: pointer;
-  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAABACAYAAAATffeWAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo2N0Q1MjA3NDc5NjYxMUUyQjQzRjk5Mjc1MTU5Qjk0NSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo2N0Q1MjA3NTc5NjYxMUUyQjQzRjk5Mjc1MTU5Qjk0NSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjY3RDUyMDcyNzk2NjExRTJCNDNGOTkyNzUxNTlCOTQ1IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjY3RDUyMDczNzk2NjExRTJCNDNGOTkyNzUxNTlCOTQ1Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Gp0GRAAAATdJREFUeNpidIsuYMABwoF4BhCvB+IkXIqYcIj7APEiIBYA4jg0OREgLsJnQAgQrwJiNiifGU3eFIi7gDgPxGEBYnYg1gBiDqizQX5ixOEyCyDeC8SNQNwJxJtABuwHYksGwoAR6q3tQFwKxGlAnMtEpGYQ+A+1NROI+aDedGdiIA2sAWJWaDhcBGIVUg1ABqz4ohEXAMXQbyA+DcRaQHwHZMBxIjWDArEcmrg+AXEYEO8ExYIjUjRGQuOXEUcgghLVOahBoAQ1GWTAT2iAgMBJID4BxPOhBqIDkJwnENcDcQkQP8AWBiuAOBiIf0H5f9HkT0NdMAFfIG4D4gggfgtNPMjgDRD3wgPm////DJSAUQNGDRg1YNSAUQNGDRg1YNSA4WhAUnHraI9ltMcy2mMZDD0WgAADADYlybDQKXdAAAAAAElFTkSuQmCC);
-  background-size: 16px 64px;
-  background-position: center 8px;
-  background-repeat: no-repeat;
-}
-
-video::-webkit-media-controls-fullscreen-button:hover {
-  -webkit-appearance: none;
-  background-position: center -42px;
-}
-
-video::-webkit-media-controls-mute-button:hover {
-  -webkit-appearance: none;
-  background-position: center -43px;
-}
-
-video::-webkit-media-controls-current-time-display, video::-webkit-media-controls-time-remaining-display {
-
-  font-size: 13px;
-  font-weight: normal;
-}

src/styles/includes/video-js.less

@@ -0,0 +1,147 @@
+/*
+  Player Skin Designer for Video.js
+  http://videojs.com
+
+  To customize the player skin edit 
+  the CSS below. Click "details" 
+  below to add comments or questions.
+  This file uses some SCSS. Learn more  
+  at http://sass-lang.com/guide)
+
+  This designer can be linked to at:
+  https://codepen.io/heff/pen/EarCt/left/?editors=010
+*/
+
+
+// The following are SCSS variables to automate some of the values.
+// But don't feel limited by them. Change/replace whatever you want.
+
+// The color of icons, text, and the big play button border.
+// Try changing to #0f0
+@primary-foreground-color: #fff; // #fff default
+
+// The default color of control backgrounds is mostly black but with a little
+// bit of blue so it can still be seen on all-black video frames, which are common.
+// Try changing to #900
+@primary-background-color: @blue;  // #2B333F default
+@red-primary-background-color: red(@primary-background-color);
+@green-primary-background-color: green(@primary-background-color);
+@blue-primary-background-color: blue(@primary-background-color);
+
+// Try changing to true
+@center-big-play-button: true; // true default
+
+/* We're using SCSS vars here because the values are used in multiple places.
+   Now that font size is set, the following em values will be a multiple of the
+   new font size. If the font-size is 3em (30px), then setting any of
+   the following values to 3em would equal 30px. 3 * font-size. */
+@big-play-width: 3em;
+/* 1.5em = 45px default */
+@big-play-height: 1.5em;
+
+.video-js {
+  /* The base font size controls the size of everything, not just text.
+     All dimensions use em-based sizes so that the scale along with the font size.
+     Try increasing it to 15px and see what happens. */
+  font-size: 10px;
+  width: 100%;
+
+  /* The main font color changes the ICON COLORS as well as the text */
+  color: @primary-foreground-color;
+}
+
+/* The "Big Play Button" is the play button that shows before the video plays.
+   To center it set the align values to center and middle. The typical location
+   of the button is the center, but there is trend towards moving it to a corner
+   where it gets out of the way of valuable content in the poster image.*/
+.vjs-default-skin .vjs-big-play-button {
+  /* The font size is what makes the big play button...big.
+     All width/height values use ems, which are a multiple of the font size.
+     If the .video-js font-size is 10px, then 3em equals 30px.*/
+  font-size: 3em;
+
+  line-height: @big-play-height;
+  height: @big-play-height;
+  width: @big-play-width;
+
+  /* 0.06666em = 2px default */
+  border: 0.06666em solid @primary-foreground-color;
+  /* 0.3em = 9px default */
+  border-radius: 0.3em;
+}
+.vjs-default-skin .vjs-big-play-button when (@center-big-play-button = true) {
+  /* Align center */
+  left: 50%;
+  top: 50%;
+  margin-left: -(@big-play-width / 2);
+  margin-top: -(@big-play-height / 2);
+}
+.vjs-default-skin .vjs-big-play-button when not (@center-big-play-button = true)  {
+  /* Align top left. 0.5em = 15px default */
+  left: 0.5em;
+  top: 0.5em;
+}
+
+
+/* The default color of control backgrounds is mostly black but with a little
+   bit of blue so it can still be seen on all-black video frames, which are common. */
+.video-js .vjs-control-bar,
+.video-js .vjs-big-play-button,
+.video-js .vjs-menu-button .vjs-menu-content {
+  /* IE8 - has no alpha support */
+  background-color: @primary-background-color;
+  /* Opacity: 1.0 = 100%, 0.0 = 0% */
+  background-color: rgba(@red-primary-background-color, @green-primary-background-color, @blue-primary-background-color, 0.7);
+}
+
+// Make a slightly lighter version of the main background
+// for the slider background.
+@slider-bg-color: lighten(rgb(@red-primary-background-color, @green-primary-background-color, @blue-primary-background-color), 33%);
+@red-slider-bg-color: red(@slider-bg-color);
+@green-slider-bg-color: green(@slider-bg-color);
+@blue-slider-bg-color: blue(@slider-bg-color);
+
+/* Slider - used for Volume bar and Progress bar */
+.video-js .vjs-slider {
+  background-color: @slider-bg-color;
+  background-color: rgba(@red-slider-bg-color, @green-slider-bg-color, @blue-slider-bg-color, 0.5);
+}
+
+/* The slider bar color is used for the progress bar and the volume bar
+   (the first two can be removed after a fix that's coming) */
+.video-js .vjs-volume-level,
+.video-js .vjs-play-progress,
+.video-js .vjs-slider-bar {
+  background: @primary-foreground-color;
+}
+
+/* The main progress bar also has a bar that shows how much has been loaded. */
+.video-js .vjs-load-progress {
+  /* For IE8 we'll lighten the color */
+  background: lighten(rgb(@red-slider-bg-color, @green-slider-bg-color, @blue-slider-bg-color), 25%);
+  /* Otherwise we'll rely on stacked opacities */
+  background: rgba(@red-slider-bg-color, @green-slider-bg-color, @blue-slider-bg-color, 0.5);
+}
+
+/* The load progress bar also has internal divs that represent
+   smaller disconnected loaded time ranges */
+.video-js .vjs-load-progress div {
+  /* For IE8 we'll lighten the color */
+  background: lighten(rgb(@red-slider-bg-color, @green-slider-bg-color, @blue-slider-bg-color), 50%);
+  /* Otherwise we'll rely on stacked opacities */
+  background: rgba(@red-slider-bg-color, @green-slider-bg-color, @blue-slider-bg-color, 0.75);
+}
+
+
+:not(.vjs-has-started) .vjs-control-bar {
+  display: flex;
+}
+
+.vjs-audio .vjs-big-play-button {
+  display: none;
+}
+
+.vjs-audio.audio-player-dimensions {
+  height: 30px;
+}
+

src/styles/main.less

@@ -7,8 +7,9 @@
 @import "includes/global";
 @import "includes/home";
 @import "includes/pages";
-@import "includes/ckin";
 @import "includes/reviews";
+@import "../bower_components/videojs/dist/video-js.min.css";
+@import "includes/video-js";
 @import "includes/transfersh-icons";
 @import "includes/preview";