|
- /*!
- 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);
- }
- }
|