Angel Fernando Quiroz Campos
6 years ago
parent
e8d017c62e
commit
9f0244f64c
@ -0,0 +1,109 @@ |
||||
/*! |
||||
* MediaElement.js |
||||
* http://www.mediaelementjs.com/
|
||||
* |
||||
* Wrapper that mimics native HTML5 MediaElement (audio and video) |
||||
* using a variety of technologies (pure JavaScript, Flash, iframe) |
||||
* |
||||
* Copyright 2010-2017, John Dyer (http://j.hn/)
|
||||
* License: MIT |
||||
* |
||||
*/(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(_dereq_,module,exports){ |
||||
'use strict'; |
||||
|
||||
Object.assign(mejs.MepDefaults, { |
||||
markersRollsColor: '#E9BC3D', |
||||
|
||||
markersRollsWidth: 1, |
||||
|
||||
markersRolls: {} |
||||
}); |
||||
|
||||
Object.assign(MediaElementPlayer.prototype, { |
||||
buildmarkersrolls: function buildmarkersrolls(player, controls, layers, media) { |
||||
var currentPosition = -1, |
||||
lastPlayedPosition = -1, |
||||
lastMarkerRollCallback = -1, |
||||
markersCount = Object.keys(player.options.markersRolls).length; |
||||
|
||||
if (!markersCount) { |
||||
return; |
||||
} |
||||
|
||||
for (var i = 0, total = markersCount; i < total; ++i) { |
||||
var marker = document.createElement('span'); |
||||
|
||||
marker.className = this.options.classPrefix + 'time-marker'; |
||||
controls.querySelector('.' + this.options.classPrefix + 'time-total').appendChild(marker); |
||||
} |
||||
|
||||
var markersRollsLayer = document.createElement('iframe'); |
||||
markersRollsLayer.frameBorder = '0'; |
||||
markersRollsLayer.className = this.options.classPrefix + 'markersrolls-layer' + ' ' + (this.options.classPrefix + 'overlay') + ' ' + (this.options.classPrefix + 'layer'); |
||||
markersRollsLayer.style.display = 'none'; |
||||
markersRollsLayer.style.backgroundColor = '#9F9F9F'; |
||||
markersRollsLayer.style.border = '0 none'; |
||||
markersRollsLayer.style.boxShadow = '#B0B0B0 0px 0px 20px -10px inset'; |
||||
markersRollsLayer.style.paddingBottom = '40px'; |
||||
|
||||
layers.appendChild(markersRollsLayer); |
||||
|
||||
media.addEventListener('durationchange', function () { |
||||
player.setmarkersrolls(controls); |
||||
}); |
||||
media.addEventListener('timeupdate', function () { |
||||
currentPosition = Math.floor(media.currentTime); |
||||
|
||||
if (lastPlayedPosition > currentPosition) { |
||||
if (lastMarkerRollCallback > currentPosition) { |
||||
lastMarkerRollCallback = -1; |
||||
} |
||||
} else { |
||||
lastPlayedPosition = currentPosition; |
||||
} |
||||
|
||||
if (0 === markersCount || !player.options.markersRolls[currentPosition] || currentPosition === lastMarkerRollCallback) { |
||||
return; |
||||
} |
||||
|
||||
lastMarkerRollCallback = currentPosition; |
||||
|
||||
media.pause(); |
||||
|
||||
markersRollsLayer.src = player.options.markersRolls[currentPosition]; |
||||
markersRollsLayer.style.display = 'block'; |
||||
}, false); |
||||
media.addEventListener('play', function () { |
||||
markersRollsLayer.style.display = 'none'; |
||||
markersRollsLayer.src = ''; |
||||
}, false); |
||||
}, |
||||
setmarkersrolls: function setmarkersrolls(controls) { |
||||
var markersRolls = controls.querySelectorAll('.' + this.options.classPrefix + 'time-marker'); |
||||
|
||||
var i = 0; |
||||
|
||||
for (var position in this.options.markersRolls) { |
||||
if (!this.options.markersRolls.hasOwnProperty(position)) { |
||||
continue; |
||||
} |
||||
|
||||
position = parseInt(position); |
||||
|
||||
if (position >= this.media.duration || position < 0) { |
||||
continue; |
||||
} |
||||
|
||||
var left = 100 * position / this.media.duration, |
||||
marker = markersRolls[i]; |
||||
|
||||
marker.style.width = this.options.markersRollsWidth + 'px'; |
||||
marker.style.left = left + '%'; |
||||
marker.style.background = this.options.markersRollsColor; |
||||
|
||||
i++; |
||||
} |
||||
} |
||||
}); |
||||
|
||||
},{}]},{},[1]); |
||||
@ -0,0 +1,12 @@ |
||||
/*! |
||||
* MediaElement.js |
||||
* http://www.mediaelementjs.com/
|
||||
* |
||||
* Wrapper that mimics native HTML5 MediaElement (audio and video) |
||||
* using a variety of technologies (pure JavaScript, Flash, iframe) |
||||
* |
||||
* Copyright 2010-2017, John Dyer (http://j.hn/)
|
||||
* License: MIT |
||||
* |
||||
*/ |
||||
!function i(n,a,l){function p(r,e){if(!a[r]){if(!n[r]){var s="function"==typeof require&&require;if(!e&&s)return s(r,!0);if(c)return c(r,!0);var t=new Error("Cannot find module '"+r+"'");throw t.code="MODULE_NOT_FOUND",t}var o=a[r]={exports:{}};n[r][0].call(o.exports,function(e){return p(n[r][1][e]||e)},o,o.exports,i,n,a,l)}return a[r].exports}for(var c="function"==typeof require&&require,e=0;e<l.length;e++)p(l[e]);return p}({1:[function(e,r,s){"use strict";Object.assign(mejs.MepDefaults,{markersRollsColor:"#E9BC3D",markersRollsWidth:1,markersRolls:{}}),Object.assign(MediaElementPlayer.prototype,{buildmarkersrolls:function(e,r,s,t){var o=-1,i=-1,n=-1,a=Object.keys(e.options.markersRolls).length;if(a){for(var l=0,p=a;l<p;++l){var c=document.createElement("span");c.className=this.options.classPrefix+"time-marker",r.querySelector("."+this.options.classPrefix+"time-total").appendChild(c)}var d=document.createElement("iframe");d.frameBorder="0",d.className=this.options.classPrefix+"markersrolls-layer "+this.options.classPrefix+"overlay "+this.options.classPrefix+"layer",d.style.display="none",d.style.backgroundColor="#9F9F9F",d.style.border="0 none",d.style.boxShadow="#B0B0B0 0px 0px 20px -10px inset",d.style.paddingBottom="40px",s.appendChild(d),t.addEventListener("durationchange",function(){e.setmarkersrolls(r)}),t.addEventListener("timeupdate",function(){(o=Math.floor(t.currentTime))<i?o<n&&(n=-1):i=o,0!==a&&e.options.markersRolls[o]&&o!==n&&(n=o,t.pause(),d.src=e.options.markersRolls[o],d.style.display="block")},!1),t.addEventListener("play",function(){d.style.display="none",d.src=""},!1)}},setmarkersrolls:function(e){var r=e.querySelectorAll("."+this.options.classPrefix+"time-marker"),s=0;for(var t in this.options.markersRolls)if(this.options.markersRolls.hasOwnProperty(t)&&!((t=parseInt(t))>=this.media.duration||t<0)){var o=100*t/this.media.duration,i=r[s];i.style.width=this.options.markersRollsWidth+"px",i.style.left=o+"%",i.style.background=this.options.markersRollsColor,s++}}})},{}]},{},[1]); |
||||
@ -0,0 +1,71 @@ |
||||
'use strict'; |
||||
|
||||
if (mejs.i18n.ca !== undefined) { |
||||
mejs.i18n.ca['mejs.speed-rate'] = 'Velocitat'; |
||||
} |
||||
if (mejs.i18n.cs !== undefined) { |
||||
mejs.i18n.cs['mejs.speed-rate'] = 'Rychlost'; |
||||
} |
||||
if (mejs.i18n.de !== undefined) { |
||||
mejs.i18n.de['mejs.speed-rate'] = 'Geschwindigkeitsrate'; |
||||
} |
||||
if (mejs.i18n.es !== undefined) { |
||||
mejs.i18n.es['mejs.speed-rate'] = 'Velocidad'; |
||||
} |
||||
if (mejs.i18n.fa !== undefined) { |
||||
mejs.i18n.fa['mejs.speed-rate'] = 'نرخ سرعت'; |
||||
} |
||||
if (mejs.i18n.fr !== undefined) { |
||||
mejs.i18n.fr['mejs.speed-rate'] = 'Vitesse'; |
||||
} |
||||
if (mejs.i18n.hr !== undefined) { |
||||
mejs.i18n.hr['mejs.speed-rate'] = 'Brzina reprodukcije'; |
||||
} |
||||
if (mejs.i18n.hu !== undefined) { |
||||
mejs.i18n.hu['mejs.speed-rate'] = 'Sebesség'; |
||||
} |
||||
if (mejs.i18n.it !== undefined) { |
||||
mejs.i18n.it['mejs.speed-rate'] = 'Velocità'; |
||||
} |
||||
if (mejs.i18n.ja !== undefined) { |
||||
mejs.i18n.ja['mejs.speed-rate'] = '高速'; |
||||
} |
||||
if (mejs.i18n.ko !== undefined) { |
||||
mejs.i18n.ko['mejs.speed-rate'] = '속도 속도'; |
||||
} |
||||
if (mejs.i18n.ms !== undefined) { |
||||
mejs.i18n.ms['mejs.speed-rate'] = 'Kelajuan'; |
||||
} |
||||
if (mejs.i18n.nl !== undefined) { |
||||
mejs.i18n.nl['mejs.speed-rate'] = 'Snelheidsgraad'; |
||||
} |
||||
if (mejs.i18n.pl !== undefined) { |
||||
mejs.i18n.pl['mejs.speed-rate'] = 'Prędkość'; |
||||
} |
||||
if (mejs.i18n.pt !== undefined) { |
||||
mejs.i18n.pt['mejs.speed-rate'] = 'Taxa de velocidade'; |
||||
} |
||||
if (mejs.i18n.ro !== undefined) { |
||||
mejs.i18n.ro['mejs.speed-rate'] = 'Viteză de viteză'; |
||||
} |
||||
if (mejs.i18n.ru !== undefined) { |
||||
mejs.i18n.ru['mejs.speed-rate'] = 'Скорость воспроизведения'; |
||||
} |
||||
if (mejs.i18n.sk !== undefined) { |
||||
mejs.i18n.sk['mejs.speed-rate'] = 'Rýchlosť'; |
||||
} |
||||
if (mejs.i18n.sv !== undefined) { |
||||
mejs.i18n.sv['mejs.speed-rate'] = 'Hastighet'; |
||||
} |
||||
if (mejs.i18n.tr !== undefined) { |
||||
mejs.i18n.tr['mejs.speed-rate'] = 'Hız oranı'; |
||||
} |
||||
if (mejs.i18n.uk !== undefined) { |
||||
mejs.i18n.uk['mejs.speed-rate'] = 'Швидкість відтворення'; |
||||
} |
||||
if (mejs.i18n.zh !== undefined) { |
||||
mejs.i18n.zh['mejs.speed-rate'] = '速度'; |
||||
} |
||||
if (mejs.i18n['zh-CN'] !== undefined) { |
||||
mejs.i18n['zh-CN']['mejs.speed-rate'] = '速度'; |
||||
} |
||||
@ -0,0 +1,94 @@ |
||||
.mejs__speed-button, |
||||
.mejs-speed-button { |
||||
position: relative; |
||||
} |
||||
|
||||
.mejs__speed-button > button, |
||||
.mejs-speed-button > button { |
||||
background: transparent; |
||||
color: #fff; |
||||
font-size: 11px; |
||||
line-height: normal; |
||||
margin: 11px 0 0; |
||||
width: 36px; |
||||
} |
||||
|
||||
.mejs__speed-selector, |
||||
.mejs-speed-selector { |
||||
background: rgba(50, 50, 50, 0.7); |
||||
border: solid 1px transparent; |
||||
border-radius: 0; |
||||
height: 150px; |
||||
left: -10px; |
||||
overflow: hidden; |
||||
padding: 0; |
||||
position: absolute; |
||||
top: -100px; |
||||
visibility: hidden; |
||||
width: 60px; |
||||
} |
||||
|
||||
.mejs__speed-selector, |
||||
.mejs-speed-selector { |
||||
visibility: visible; |
||||
} |
||||
|
||||
.mejs__speed-selector-list, |
||||
.mejs-speed-selector-list { |
||||
display: block; |
||||
list-style-type: none !important; |
||||
margin: 0; |
||||
overflow: hidden; |
||||
padding: 0; |
||||
} |
||||
|
||||
.mejs__speed-selector-list-item, |
||||
.mejs-speed-selector-list-item { |
||||
color: #fff; |
||||
display: block; |
||||
list-style-type: none !important; |
||||
margin: 0 0 6px; |
||||
overflow: hidden; |
||||
padding: 0 10px; |
||||
} |
||||
|
||||
.mejs__speed-selector-list-item:hover, |
||||
.mejs-speed-selector-list-item:hover { |
||||
background-color: rgb(200, 200, 200) !important; |
||||
background-color: rgba(255, 255, 255, 0.4) !important; |
||||
} |
||||
|
||||
.mejs__speed-selector-input, |
||||
.mejs-speed-selector-input { |
||||
clear: both; |
||||
float: left; |
||||
left: -1000px; |
||||
margin: 3px 3px 0 5px; |
||||
position: absolute; |
||||
} |
||||
|
||||
.mejs__speed-selector-label, |
||||
.mejs-speed-selector-label { |
||||
color: white; |
||||
cursor: pointer; |
||||
float: left; |
||||
font-size: 11px; |
||||
line-height: 15px; |
||||
margin-left: 5px; |
||||
padding: 4px 0 0; |
||||
width: 60px; |
||||
} |
||||
|
||||
.mejs__speed-selected, |
||||
.mejs-speed-selected { |
||||
color: rgba(33, 248, 248, 1); |
||||
} |
||||
|
||||
.mejs__speed-selector, |
||||
.mejs-speed-selector { |
||||
visibility: hidden; |
||||
} |
||||
.mejs__speed-button:hover .mejs__speed-selector, |
||||
.mejs-speed-button:hover .mejs-speed-selector { |
||||
visibility: visible; |
||||
} |
||||
@ -0,0 +1,200 @@ |
||||
/*! |
||||
* MediaElement.js |
||||
* http://www.mediaelementjs.com/
|
||||
* |
||||
* Wrapper that mimics native HTML5 MediaElement (audio and video) |
||||
* using a variety of technologies (pure JavaScript, Flash, iframe) |
||||
* |
||||
* Copyright 2010-2017, John Dyer (http://j.hn/)
|
||||
* License: MIT |
||||
* |
||||
*/(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(_dereq_,module,exports){ |
||||
'use strict'; |
||||
|
||||
mejs.i18n.en['mejs.speed-rate'] = 'Speed Rate'; |
||||
|
||||
Object.assign(mejs.MepDefaults, { |
||||
speeds: ['2.00', '1.50', '1.25', '1.00', '0.75'], |
||||
|
||||
defaultSpeed: '1.00', |
||||
|
||||
speedChar: 'x', |
||||
|
||||
speedText: null |
||||
}); |
||||
|
||||
Object.assign(MediaElementPlayer.prototype, { |
||||
buildspeed: function buildspeed(player, controls, layers, media) { |
||||
var t = this, |
||||
isNative = t.media.rendererName !== null && /(native|html5)/i.test(t.media.rendererName); |
||||
|
||||
if (!isNative) { |
||||
return; |
||||
} |
||||
|
||||
var speeds = [], |
||||
speedTitle = mejs.Utils.isString(t.options.speedText) ? t.options.speedText : mejs.i18n.t('mejs.speed-rate'), |
||||
getSpeedNameFromValue = function getSpeedNameFromValue(value) { |
||||
for (var i = 0, total = speeds.length; i < total; i++) { |
||||
if (speeds[i].value === value) { |
||||
return speeds[i].name; |
||||
} |
||||
} |
||||
}; |
||||
|
||||
var playbackSpeed = void 0, |
||||
defaultInArray = false; |
||||
|
||||
for (var i = 0, total = t.options.speeds.length; i < total; i++) { |
||||
var s = t.options.speeds[i]; |
||||
|
||||
if (typeof s === 'string') { |
||||
speeds.push({ |
||||
name: '' + s + t.options.speedChar, |
||||
value: s |
||||
}); |
||||
|
||||
if (s === t.options.defaultSpeed) { |
||||
defaultInArray = true; |
||||
} |
||||
} else { |
||||
speeds.push(s); |
||||
if (s.value === t.options.defaultSpeed) { |
||||
defaultInArray = true; |
||||
} |
||||
} |
||||
} |
||||
|
||||
if (!defaultInArray) { |
||||
speeds.push({ |
||||
name: t.options.defaultSpeed + t.options.speedChar, |
||||
value: t.options.defaultSpeed |
||||
}); |
||||
} |
||||
|
||||
speeds.sort(function (a, b) { |
||||
return parseFloat(b.value) - parseFloat(a.value); |
||||
}); |
||||
|
||||
t.cleanspeed(player); |
||||
|
||||
player.speedButton = document.createElement('div'); |
||||
player.speedButton.className = t.options.classPrefix + 'button ' + t.options.classPrefix + 'speed-button'; |
||||
player.speedButton.innerHTML = '<button type="button" aria-controls="' + t.id + '" title="' + speedTitle + '" ' + ('aria-label="' + speedTitle + '" tabindex="0">' + getSpeedNameFromValue(t.options.defaultSpeed) + '</button>') + ('<div class="' + t.options.classPrefix + 'speed-selector ' + t.options.classPrefix + 'offscreen">') + ('<ul class="' + t.options.classPrefix + 'speed-selector-list"></ul>') + '</div>'; |
||||
|
||||
t.addControlElement(player.speedButton, 'speed'); |
||||
|
||||
for (var _i = 0, _total = speeds.length; _i < _total; _i++) { |
||||
|
||||
var inputId = t.id + '-speed-' + speeds[_i].value; |
||||
|
||||
player.speedButton.querySelector('ul').innerHTML += '<li class="' + t.options.classPrefix + 'speed-selector-list-item">' + ('<input class="' + t.options.classPrefix + 'speed-selector-input" type="radio" name="' + t.id + '_speed"') + ('disabled="disabled" value="' + speeds[_i].value + '" id="' + inputId + '" ') + ((speeds[_i].value === t.options.defaultSpeed ? ' checked="checked"' : '') + '/>') + ('<label for="' + inputId + '" class="' + t.options.classPrefix + 'speed-selector-label') + ((speeds[_i].value === t.options.defaultSpeed ? ' ' + t.options.classPrefix + 'speed-selected' : '') + '">') + (speeds[_i].name + '</label>') + '</li>'; |
||||
} |
||||
|
||||
playbackSpeed = t.options.defaultSpeed; |
||||
|
||||
player.speedSelector = player.speedButton.querySelector('.' + t.options.classPrefix + 'speed-selector'); |
||||
|
||||
var inEvents = ['mouseenter', 'focusin'], |
||||
outEvents = ['mouseleave', 'focusout'], |
||||
radios = player.speedButton.querySelectorAll('input[type="radio"]'), |
||||
labels = player.speedButton.querySelectorAll('.' + t.options.classPrefix + 'speed-selector-label'); |
||||
|
||||
for (var _i2 = 0, _total2 = inEvents.length; _i2 < _total2; _i2++) { |
||||
player.speedButton.addEventListener(inEvents[_i2], function () { |
||||
mejs.Utils.removeClass(player.speedSelector, t.options.classPrefix + 'offscreen'); |
||||
player.speedSelector.style.height = player.speedSelector.querySelector('ul').offsetHeight; |
||||
player.speedSelector.style.top = -1 * parseFloat(player.speedSelector.offsetHeight) + 'px'; |
||||
}); |
||||
} |
||||
|
||||
for (var _i3 = 0, _total3 = outEvents.length; _i3 < _total3; _i3++) { |
||||
player.speedSelector.addEventListener(outEvents[_i3], function () { |
||||
mejs.Utils.addClass(this, t.options.classPrefix + 'offscreen'); |
||||
}); |
||||
} |
||||
|
||||
for (var _i4 = 0, _total4 = radios.length; _i4 < _total4; _i4++) { |
||||
var radio = radios[_i4]; |
||||
radio.disabled = false; |
||||
radio.addEventListener('click', function () { |
||||
var self = this, |
||||
newSpeed = self.value; |
||||
|
||||
playbackSpeed = newSpeed; |
||||
media.playbackRate = parseFloat(newSpeed); |
||||
player.speedButton.querySelector('button').innerHTML = getSpeedNameFromValue(newSpeed); |
||||
var selected = player.speedButton.querySelectorAll('.' + t.options.classPrefix + 'speed-selected'); |
||||
for (var _i5 = 0, _total5 = selected.length; _i5 < _total5; _i5++) { |
||||
mejs.Utils.removeClass(selected[_i5], t.options.classPrefix + 'speed-selected'); |
||||
} |
||||
|
||||
self.checked = true; |
||||
var siblings = mejs.Utils.siblings(self, function (el) { |
||||
return mejs.Utils.hasClass(el, t.options.classPrefix + 'speed-selector-label'); |
||||
}); |
||||
for (var j = 0, _total6 = siblings.length; j < _total6; j++) { |
||||
mejs.Utils.addClass(siblings[j], t.options.classPrefix + 'speed-selected'); |
||||
} |
||||
}); |
||||
} |
||||
|
||||
for (var _i6 = 0, _total7 = labels.length; _i6 < _total7; _i6++) { |
||||
labels[_i6].addEventListener('click', function () { |
||||
var radio = mejs.Utils.siblings(this, function (el) { |
||||
return el.tagName === 'INPUT'; |
||||
})[0], |
||||
event = mejs.Utils.createEvent('click', radio); |
||||
radio.dispatchEvent(event); |
||||
}); |
||||
} |
||||
|
||||
t.options.keyActions.push({ |
||||
keys: [60, 188], |
||||
action: function action(player, media, key, event) { |
||||
if (event.key != '<') return; |
||||
|
||||
for (var _i7 = 0; _i7 < radios.length - 1; _i7++) { |
||||
if (radios[_i7].checked) { |
||||
var nextRadio = radios[_i7 + 1]; |
||||
nextRadio.dispatchEvent(mejs.Utils.createEvent('click', nextRadio)); |
||||
} |
||||
} |
||||
} |
||||
}, { |
||||
keys: [62, 190], |
||||
action: function action(player, media, key, event) { |
||||
if (event.key != '>') return; |
||||
|
||||
for (var _i8 = 1; _i8 < radios.length; _i8++) { |
||||
if (radios[_i8].checked) { |
||||
var prevRadio = radios[_i8 - 1]; |
||||
prevRadio.dispatchEvent(mejs.Utils.createEvent('click', prevRadio)); |
||||
} |
||||
} |
||||
} |
||||
}); |
||||
|
||||
player.speedSelector.addEventListener('keydown', function (e) { |
||||
e.stopPropagation(); |
||||
}); |
||||
|
||||
media.addEventListener('loadedmetadata', function () { |
||||
if (playbackSpeed) { |
||||
media.playbackRate = parseFloat(playbackSpeed); |
||||
} |
||||
}); |
||||
}, |
||||
cleanspeed: function cleanspeed(player) { |
||||
if (player) { |
||||
if (player.speedButton) { |
||||
player.speedButton.parentNode.removeChild(player.speedButton); |
||||
} |
||||
if (player.speedSelector) { |
||||
player.speedSelector.parentNode.removeChild(player.speedSelector); |
||||
} |
||||
} |
||||
} |
||||
}); |
||||
|
||||
},{}]},{},[1]); |
||||
@ -0,0 +1 @@ |
||||
.mejs-speed-button,.mejs__speed-button{position:relative}.mejs-speed-button>button,.mejs__speed-button>button{background:transparent;color:#fff;font-size:11px;line-height:normal;margin:11px 0 0;width:36px}.mejs-speed-selector,.mejs__speed-selector{background:rgba(50,50,50,.7);border:1px solid transparent;border-radius:0;height:150px;left:-10px;overflow:hidden;padding:0;position:absolute;top:-100px;width:60px;visibility:visible}.mejs-speed-selector-list,.mejs__speed-selector-list{display:block;list-style-type:none!important;margin:0;overflow:hidden;padding:0}.mejs-speed-selector-list-item,.mejs__speed-selector-list-item{color:#fff;display:block;list-style-type:none!important;margin:0 0 6px;overflow:hidden;padding:0 10px}.mejs-speed-selector-list-item:hover,.mejs__speed-selector-list-item:hover{background-color:#c8c8c8!important;background-color:hsla(0,0%,100%,.4)!important}.mejs-speed-selector-input,.mejs__speed-selector-input{clear:both;float:left;left:-1000px;margin:3px 3px 0 5px;position:absolute}.mejs-speed-selector-label,.mejs__speed-selector-label{color:#fff;cursor:pointer;float:left;font-size:11px;line-height:15px;margin-left:5px;padding:4px 0 0;width:60px}.mejs-speed-selected,.mejs__speed-selected{color:#21f8f8}.mejs-speed-selector,.mejs__speed-selector{visibility:hidden}.mejs-speed-button:hover .mejs-speed-selector,.mejs__speed-button:hover .mejs__speed-selector{visibility:visible} |
||||
@ -0,0 +1,12 @@ |
||||
/*! |
||||
* MediaElement.js |
||||
* http://www.mediaelementjs.com/
|
||||
* |
||||
* Wrapper that mimics native HTML5 MediaElement (audio and video) |
||||
* using a variety of technologies (pure JavaScript, Flash, iframe) |
||||
* |
||||
* Copyright 2010-2017, John Dyer (http://j.hn/)
|
||||
* License: MIT |
||||
* |
||||
*/ |
||||
!function r(i,l,a){function d(t,e){if(!l[t]){if(!i[t]){var s="function"==typeof require&&require;if(!e&&s)return s(t,!0);if(p)return p(t,!0);var o=new Error("Cannot find module '"+t+"'");throw o.code="MODULE_NOT_FOUND",o}var n=l[t]={exports:{}};i[t][0].call(n.exports,function(e){return d(i[t][1][e]||e)},n,n.exports,r,i,l,a)}return l[t].exports}for(var p="function"==typeof require&&require,e=0;e<a.length;e++)d(a[e]);return d}({1:[function(e,t,s){"use strict";mejs.i18n.en["mejs.speed-rate"]="Speed Rate",Object.assign(mejs.MepDefaults,{speeds:["2.00","1.50","1.25","1.00","0.75"],defaultSpeed:"1.00",speedChar:"x",speedText:null}),Object.assign(MediaElementPlayer.prototype,{buildspeed:function(l,e,t,a){var d=this;if(null!==d.media.rendererName&&/(native|html5)/i.test(d.media.rendererName)){for(var o=[],s=mejs.Utils.isString(d.options.speedText)?d.options.speedText:mejs.i18n.t("mejs.speed-rate"),p=function(e){for(var t=0,s=o.length;t<s;t++)if(o[t].value===e)return o[t].name},c=void 0,n=!1,r=0,i=d.options.speeds.length;r<i;r++){var u=d.options.speeds[r];"string"==typeof u?(o.push({name:""+u+d.options.speedChar,value:u}),u===d.options.defaultSpeed&&(n=!0)):(o.push(u),u.value===d.options.defaultSpeed&&(n=!0))}n||o.push({name:d.options.defaultSpeed+d.options.speedChar,value:d.options.defaultSpeed}),o.sort(function(e,t){return parseFloat(t.value)-parseFloat(e.value)}),d.cleanspeed(l),l.speedButton=document.createElement("div"),l.speedButton.className=d.options.classPrefix+"button "+d.options.classPrefix+"speed-button",l.speedButton.innerHTML='<button type="button" aria-controls="'+d.id+'" title="'+s+'" aria-label="'+s+'" tabindex="0">'+p(d.options.defaultSpeed)+'</button><div class="'+d.options.classPrefix+"speed-selector "+d.options.classPrefix+'offscreen"><ul class="'+d.options.classPrefix+'speed-selector-list"></ul></div>',d.addControlElement(l.speedButton,"speed");for(var f=0,v=o.length;f<v;f++){var h=d.id+"-speed-"+o[f].value;l.speedButton.querySelector("ul").innerHTML+='<li class="'+d.options.classPrefix+'speed-selector-list-item"><input class="'+d.options.classPrefix+'speed-selector-input" type="radio" name="'+d.id+'_speed"disabled="disabled" value="'+o[f].value+'" id="'+h+'" '+(o[f].value===d.options.defaultSpeed?' checked="checked"':"")+'/><label for="'+h+'" class="'+d.options.classPrefix+"speed-selector-label"+(o[f].value===d.options.defaultSpeed?" "+d.options.classPrefix+"speed-selected":"")+'">'+o[f].name+"</label></li>"}c=d.options.defaultSpeed,l.speedSelector=l.speedButton.querySelector("."+d.options.classPrefix+"speed-selector");for(var m=["mouseenter","focusin"],S=["mouseleave","focusout"],x=l.speedButton.querySelectorAll('input[type="radio"]'),y=l.speedButton.querySelectorAll("."+d.options.classPrefix+"speed-selector-label"),b=0,g=m.length;b<g;b++)l.speedButton.addEventListener(m[b],function(){mejs.Utils.removeClass(l.speedSelector,d.options.classPrefix+"offscreen"),l.speedSelector.style.height=l.speedSelector.querySelector("ul").offsetHeight,l.speedSelector.style.top=-1*parseFloat(l.speedSelector.offsetHeight)+"px"});for(var P=0,j=S.length;P<j;P++)l.speedSelector.addEventListener(S[P],function(){mejs.Utils.addClass(this,d.options.classPrefix+"offscreen")});for(var k=0,E=x.length;k<E;k++){var B=x[k];B.disabled=!1,B.addEventListener("click",function(){var e=this.value;c=e,a.playbackRate=parseFloat(e),l.speedButton.querySelector("button").innerHTML=p(e);for(var t=l.speedButton.querySelectorAll("."+d.options.classPrefix+"speed-selected"),s=0,o=t.length;s<o;s++)mejs.Utils.removeClass(t[s],d.options.classPrefix+"speed-selected");this.checked=!0;for(var n=mejs.Utils.siblings(this,function(e){return mejs.Utils.hasClass(e,d.options.classPrefix+"speed-selector-label")}),r=0,i=n.length;r<i;r++)mejs.Utils.addClass(n[r],d.options.classPrefix+"speed-selected")})}for(var U=0,C=y.length;U<C;U++)y[U].addEventListener("click",function(){var e=mejs.Utils.siblings(this,function(e){return"INPUT"===e.tagName})[0],t=mejs.Utils.createEvent("click",e);e.dispatchEvent(t)});d.options.keyActions.push({keys:[60,188],action:function(e,t,s,o){if("<"==o.key)for(var n=0;n<x.length-1;n++)if(x[n].checked){var r=x[n+1];r.dispatchEvent(mejs.Utils.createEvent("click",r))}}},{keys:[62,190],action:function(e,t,s,o){if(">"==o.key)for(var n=1;n<x.length;n++)if(x[n].checked){var r=x[n-1];r.dispatchEvent(mejs.Utils.createEvent("click",r))}}}),l.speedSelector.addEventListener("keydown",function(e){e.stopPropagation()}),a.addEventListener("loadedmetadata",function(){c&&(a.playbackRate=parseFloat(c))})}},cleanspeed:function(e){e&&(e.speedButton&&e.speedButton.parentNode.removeChild(e.speedButton),e.speedSelector&&e.speedSelector.parentNode.removeChild(e.speedSelector))}})},{}]},{},[1]); |
||||
|
After Width: | Height: | Size: 668 B |
|
After Width: | Height: | Size: 557 B |
@ -0,0 +1,4 @@ |
||||
.mejs__vrview-button > button, |
||||
.mejs-vrview-button > button { |
||||
background: url('cardboard.svg') no-repeat 0 4px; |
||||
} |
||||
@ -0,0 +1,375 @@ |
||||
/*! |
||||
* MediaElement.js |
||||
* http://www.mediaelementjs.com/
|
||||
* |
||||
* Wrapper that mimics native HTML5 MediaElement (audio and video) |
||||
* using a variety of technologies (pure JavaScript, Flash, iframe) |
||||
* |
||||
* Copyright 2010-2017, John Dyer (http://j.hn/)
|
||||
* License: MIT |
||||
* |
||||
*/(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(_dereq_,module,exports){ |
||||
'use strict'; |
||||
|
||||
var VrAPI = { |
||||
isMediaStarted: false, |
||||
|
||||
isMediaLoaded: false, |
||||
|
||||
creationQueue: [], |
||||
|
||||
prepareSettings: function prepareSettings(settings) { |
||||
if (VrAPI.isLoaded) { |
||||
VrAPI.createInstance(settings); |
||||
} else { |
||||
VrAPI.loadScript(settings); |
||||
VrAPI.creationQueue.push(settings); |
||||
} |
||||
}, |
||||
|
||||
loadScript: function loadScript(settings) { |
||||
if (!VrAPI.isMediaStarted) { |
||||
|
||||
if (typeof VRView !== 'undefined') { |
||||
VrAPI.createInstance(settings); |
||||
} else { |
||||
var script = document.createElement('script'), |
||||
firstScriptTag = document.getElementsByTagName('script')[0]; |
||||
|
||||
var done = false; |
||||
|
||||
settings.options.path = typeof settings.options.path === 'string' ? settings.options.path : 'https://googlevr.github.io/vrview/build/vrview.min.js'; |
||||
|
||||
script.src = settings.options.path; |
||||
|
||||
script.onload = script.onreadystatechange = function () { |
||||
if (!done && (!this.readyState || this.readyState === undefined || this.readyState === 'loaded' || this.readyState === 'complete')) { |
||||
done = true; |
||||
VrAPI.mediaReady(); |
||||
script.onload = script.onreadystatechange = null; |
||||
} |
||||
}; |
||||
|
||||
firstScriptTag.parentNode.insertBefore(script, firstScriptTag); |
||||
} |
||||
VrAPI.isMediaStarted = true; |
||||
} |
||||
}, |
||||
|
||||
mediaReady: function mediaReady() { |
||||
VrAPI.isLoaded = true; |
||||
VrAPI.isMediaLoaded = true; |
||||
|
||||
while (VrAPI.creationQueue.length > 0) { |
||||
var settings = VrAPI.creationQueue.pop(); |
||||
VrAPI.createInstance(settings); |
||||
} |
||||
}, |
||||
|
||||
createInstance: function createInstance(settings) { |
||||
var player = new VRView.Player('#' + settings.id, settings.options); |
||||
window['__ready__' + settings.id](player); |
||||
} |
||||
}; |
||||
|
||||
var VrRenderer = { |
||||
name: 'vrview', |
||||
|
||||
options: { |
||||
prefix: 'vrview' |
||||
}, |
||||
|
||||
canPlayType: function canPlayType(type) { |
||||
return ~['video/mp4', 'application/x-mpegurl', 'vnd.apple.mpegurl', 'application/dash+xml'].indexOf(type.toLowerCase()); |
||||
}, |
||||
|
||||
create: function create(mediaElement, options, mediaFiles) { |
||||
var stack = [], |
||||
vr = {}, |
||||
readyState = 4; |
||||
|
||||
var vrPlayer = null, |
||||
paused = true, |
||||
volume = 1, |
||||
oldVolume = volume, |
||||
bufferedTime = 0, |
||||
ended = false, |
||||
duration = 0, |
||||
url = ''; |
||||
|
||||
vr.options = options; |
||||
vr.id = mediaElement.id + '_' + options.prefix; |
||||
vr.mediaElement = mediaElement; |
||||
|
||||
var props = mejs.html5media.properties, |
||||
assignGettersSetters = function assignGettersSetters(propName) { |
||||
|
||||
var capName = propName.substring(0, 1).toUpperCase() + propName.substring(1); |
||||
|
||||
vr['get' + capName] = function () { |
||||
if (vrPlayer !== null) { |
||||
var value = null; |
||||
|
||||
switch (propName) { |
||||
case 'currentTime': |
||||
return vrPlayer.getCurrentTime(); |
||||
case 'duration': |
||||
return vrPlayer.getDuration(); |
||||
case 'volume': |
||||
volume = vrPlayer.getVolume(); |
||||
return volume; |
||||
case 'muted': |
||||
return volume === 0; |
||||
case 'paused': |
||||
paused = vrPlayer.isPaused; |
||||
return paused; |
||||
case 'ended': |
||||
return ended; |
||||
case 'src': |
||||
return url; |
||||
case 'buffered': |
||||
return { |
||||
start: function start() { |
||||
return 0; |
||||
}, |
||||
end: function end() { |
||||
return bufferedTime * duration; |
||||
}, |
||||
length: 1 |
||||
}; |
||||
case 'readyState': |
||||
return readyState; |
||||
} |
||||
|
||||
return value; |
||||
} else { |
||||
return null; |
||||
} |
||||
}; |
||||
|
||||
vr['set' + capName] = function (value) { |
||||
|
||||
if (vrPlayer !== null) { |
||||
switch (propName) { |
||||
|
||||
case 'src': |
||||
var _url = typeof value === 'string' ? value : value[0].src; |
||||
vrPlayer.setContentInfo({ video: _url }); |
||||
break; |
||||
|
||||
case 'currentTime': |
||||
vrPlayer.setCurrentTime(value); |
||||
setTimeout(function () { |
||||
var event = mejs.Utils.createEvent('timeupdate', vr); |
||||
mediaElement.dispatchEvent(event); |
||||
}, 50); |
||||
break; |
||||
|
||||
case 'volume': |
||||
vrPlayer.setVolume(value); |
||||
setTimeout(function () { |
||||
var event = mejs.Utils.createEvent('volumechange', vr); |
||||
mediaElement.dispatchEvent(event); |
||||
}, 50); |
||||
break; |
||||
case 'muted': |
||||
volume = value ? 0 : oldVolume; |
||||
vrPlayer.setVolume(volume); |
||||
setTimeout(function () { |
||||
var event = mejs.Utils.createEvent('volumechange', vr); |
||||
mediaElement.dispatchEvent(event); |
||||
}, 50); |
||||
break; |
||||
case 'readyState': |
||||
var event = mejs.Utils.createEvent('canplay', vr); |
||||
mediaElement.dispatchEvent(event); |
||||
break; |
||||
default: |
||||
console.log('VRView ' + vr.id, propName, 'UNSUPPORTED property'); |
||||
break; |
||||
} |
||||
} else { |
||||
stack.push({ type: 'set', propName: propName, value: value }); |
||||
} |
||||
}; |
||||
}; |
||||
for (var i = 0, il = props.length; i < il; i++) { |
||||
assignGettersSetters(props[i]); |
||||
} |
||||
|
||||
var methods = mejs.html5media.methods, |
||||
assignMethods = function assignMethods(methodName) { |
||||
vr[methodName] = function () { |
||||
|
||||
if (vrPlayer !== null) { |
||||
switch (methodName) { |
||||
case 'play': |
||||
return vrPlayer.play(); |
||||
case 'pause': |
||||
return vrPlayer.pause(); |
||||
case 'load': |
||||
return null; |
||||
|
||||
} |
||||
} else { |
||||
stack.push({ type: 'call', methodName: methodName }); |
||||
} |
||||
}; |
||||
}; |
||||
for (var _i = 0, _il = methods.length; _i < _il; _i++) { |
||||
assignMethods(methods[_i]); |
||||
} |
||||
|
||||
var vrContainer = document.createElement('div'); |
||||
vrContainer.setAttribute('id', vr.id); |
||||
vrContainer.style.width = '100%'; |
||||
vrContainer.style.height = '100%'; |
||||
|
||||
window['__ready__' + vr.id] = function (_vrPlayer) { |
||||
|
||||
mediaElement.vrPlayer = vrPlayer = _vrPlayer; |
||||
|
||||
var iframe = vrContainer.querySelector('iframe'); |
||||
iframe.style.width = '100%'; |
||||
iframe.style.height = '100%'; |
||||
|
||||
if (stack.length) { |
||||
for (var _i2 = 0, _il2 = stack.length; _i2 < _il2; _i2++) { |
||||
|
||||
var stackItem = stack[_i2]; |
||||
|
||||
if (stackItem.type === 'set') { |
||||
var propName = stackItem.propName, |
||||
capName = '' + propName.substring(0, 1).toUpperCase() + propName.substring(1); |
||||
|
||||
vr['set' + capName](stackItem.value); |
||||
} else if (stackItem.type === 'call') { |
||||
vr[stackItem.methodName](); |
||||
} |
||||
} |
||||
} |
||||
|
||||
vrPlayer.on('ready', function () { |
||||
|
||||
var events = mejs.html5media.events.concat(['mouseover', 'mouseout']); |
||||
|
||||
var _loop = function _loop(_i3, _il3) { |
||||
vrPlayer.on(events[_i3], function () { |
||||
var event = mejs.Utils.createEvent(events[_i3], vr); |
||||
mediaElement.dispatchEvent(event); |
||||
}); |
||||
}; |
||||
|
||||
for (var _i3 = 0, _il3 = events.length; _i3 < _il3; _i3++) { |
||||
_loop(_i3, _il3); |
||||
} |
||||
}); |
||||
}; |
||||
|
||||
mediaElement.originalNode.parentNode.insertBefore(vrContainer, mediaElement.originalNode); |
||||
mediaElement.originalNode.style.display = 'none'; |
||||
|
||||
var vrSettings = { |
||||
path: options.vrPath, |
||||
is_stereo: options.vrIsStereo, |
||||
is_autopan_off: options.vrIsAutopanOff, |
||||
is_debug: options.vrDebug, |
||||
default_yaw: options.vrDefaultYaw, |
||||
is_yaw_only: options.vrIsYawOnly, |
||||
loop: options.loop |
||||
}; |
||||
|
||||
if (mediaFiles && mediaFiles.length > 0) { |
||||
for (var _i4 = 0, _il4 = mediaFiles.length; _i4 < _il4; _i4++) { |
||||
if (mejs.Renderers.renderers[options.prefix].canPlayType(mediaFiles[_i4].type)) { |
||||
vrSettings.video = mediaFiles[_i4].src; |
||||
vrSettings.width = '100%'; |
||||
vrSettings.height = '100%'; |
||||
break; |
||||
} |
||||
} |
||||
} |
||||
|
||||
VrAPI.prepareSettings({ |
||||
options: vrSettings, |
||||
id: vr.id |
||||
}); |
||||
|
||||
vr.hide = function () { |
||||
vr.pause(); |
||||
if (vrPlayer) { |
||||
vrContainer.style.display = 'none'; |
||||
} |
||||
}; |
||||
|
||||
vr.setSize = function () {}; |
||||
|
||||
vr.show = function () { |
||||
if (vrPlayer) { |
||||
vrContainer.style.display = ''; |
||||
} |
||||
}; |
||||
|
||||
return vr; |
||||
} |
||||
}; |
||||
|
||||
mejs.Renderers.add(VrRenderer); |
||||
|
||||
Object.assign(mejs.MepDefaults, { |
||||
vrPath: null, |
||||
|
||||
vrIsStereo: true, |
||||
|
||||
vrIsAutopanOff: true, |
||||
|
||||
vrDebug: false, |
||||
|
||||
vrDefaultYaw: 0, |
||||
|
||||
vrIsYawOnly: false |
||||
}); |
||||
|
||||
Object.assign(MediaElementPlayer.prototype, { |
||||
buildvrview: function buildvrview(player, controls, layers, media) { |
||||
|
||||
var t = this; |
||||
|
||||
if (!t.isVideo || t.isVideo && t.media.rendererName !== null && !t.media.rendererName.match(/(native\_(dash|hls)|html5)/)) { |
||||
return; |
||||
} |
||||
|
||||
var button = document.createElement('div'); |
||||
|
||||
player.detectFullscreenMode(); |
||||
|
||||
button.className = t.options.classPrefix + 'button ' + t.options.classPrefix + 'vrview-button'; |
||||
button.innerHTML = '<button type="button" aria-controls="' + t.id + '" title="VR" aria-label="VR" tabindex="0"></button>'; |
||||
button.addEventListener('click', function () { |
||||
var isFullScreen = mejs.Features.HAS_TRUE_NATIVE_FULLSCREEN && mejs.Features.IS_FULLSCREEN || player.isFullScreen; |
||||
|
||||
if (isFullScreen) { |
||||
player.exitFullScreen(); |
||||
} else { |
||||
player.enterFullScreen(); |
||||
} |
||||
}); |
||||
|
||||
t.globalBind('keydown', function (e) { |
||||
var key = e.which || e.keyCode || 0; |
||||
if (key === 27 && (mejs.Features.HAS_TRUE_NATIVE_FULLSCREEN && mejs.Features.IS_FULLSCREEN || player.isFullScreen)) { |
||||
player.exitFullScreen(); |
||||
} |
||||
}); |
||||
|
||||
t.addControlElement(button, 'vrview'); |
||||
|
||||
var url = media.getSrc(), |
||||
mediaFiles = [{ src: url, type: mejs.Utils.getTypeFromFile(url) }], |
||||
renderInfo = mejs.Renderers.select(mediaFiles, ['vrview']); |
||||
|
||||
media.changeRenderer(renderInfo.rendererName, mediaFiles); |
||||
} |
||||
}); |
||||
|
||||
},{}]},{},[1]); |
||||
@ -0,0 +1 @@ |
||||
.mejs-vrview-button>button,.mejs__vrview-button>button{background:url(cardboard.svg) no-repeat 0 4px} |
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue