Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Merge pull request #9 from nbibler/me2.9.1

Update to MediaElement.js version 2.9.1
  • Loading branch information...
commit d2c5d3f82d6dfbfebb91a7ecc4b771bd9c4bb64e 2 parents 533a400 + 7b27006
@petebrowne petebrowne authored
View
BIN  app/assets/images/mediaelement_rails/controls.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
49 app/assets/javascripts/mediaelement_rails/mediaelement.js
@@ -7,7 +7,7 @@
* for browsers that don't understand HTML5 or can't play the provided codec
* Can play MP4 (H.264), Ogg, WebM, FLV, WMV, WMA, ACC, and MP3
*
-* Copyright 2010-2011, John Dyer (http://j.hn)
+* Copyright 2010-2012, John Dyer (http://j.hn)
* Dual licensed under the MIT or GPL Version 2 licenses.
*
*/
@@ -15,7 +15,7 @@
var mejs = mejs || {};
// version number
-mejs.version = '2.6.5';
+mejs.version = '2.9.1';
// player number (for missing, same id attr)
mejs.meIndex = 0;
@@ -26,11 +26,11 @@ mejs.plugins = {
{version: [3,0], types: ['video/mp4','video/m4v','video/mov','video/wmv','audio/wma','audio/m4a','audio/mp3','audio/wav','audio/mpeg']}
],
flash: [
- {version: [9,0,124], types: ['video/mp4','video/m4v','video/mov','video/flv','video/x-flv','audio/flv','audio/x-flv','audio/mp3','audio/m4a','audio/mpeg']}
+ {version: [9,0,124], types: ['video/mp4','video/m4v','video/mov','video/flv','video/x-flv','audio/flv','audio/x-flv','audio/mp3','audio/m4a','audio/mpeg', 'video/youtube', 'video/x-youtube']}
//,{version: [12,0], types: ['video/webm']} // for future reference (hopefully!)
],
youtube: [
- {version: null, types: ['video/youtube']}
+ {version: null, types: ['video/youtube', 'video/x-youtube']}
],
vimeo: [
{version: null, types: ['video/vimeo']}
@@ -59,11 +59,13 @@ mejs.Utility = {
path = '',
name = '',
script,
- scripts = document.getElementsByTagName('script');
+ scripts = document.getElementsByTagName('script'),
+ il = scripts.length,
+ jl = scriptNames.length;
- for (; i < scripts.length; i++) {
+ for (; i < il; i++) {
script = scripts[i].src;
- for (j = 0; j < scriptNames.length; j++) {
+ for (j = 0; j < jl; j++) {
name = scriptNames[j];
if (script.indexOf(name) > -1) {
path = script.substring(0, script.indexOf(name));
@@ -436,6 +438,7 @@ mejs.PluginMediaElement.prototype = {
seeking: false,
duration: 0,
error: null,
+ tagName: '',
// HTML5 get/set properties, but only set (updated by event handlers)
muted: false,
@@ -650,6 +653,24 @@ mejs.PluginMediaElement.prototype = {
},
// end: fake events
+ // fake DOM attribute methods
+ attributes: {},
+ hasAttribute: function(name){
+ return (name in this.attributes);
+ },
+ removeAttribute: function(name){
+ delete this.attributes[name];
+ },
+ getAttribute: function(name){
+ if (this.hasAttribute(name)) {
+ return this.attributes[name];
+ }
+ return '';
+ },
+ setAttribute: function(name, value){
+ this.attributes[name] = value;
+ },
+
remove: function() {
mejs.Utility.removeSwf(this.pluginElement.id);
}
@@ -1021,7 +1042,7 @@ mejs.HtmlMediaElementShim = {
} catch (e) {}
errorContainer.innerHTML = (poster !== '') ?
- '<a href="' + playback.url + '"><img src="' + poster + '" /></a>' :
+ '<a href="' + playback.url + '"><img src="' + poster + '" width="100%" height="100%" /></a>' :
'<a href="' + playback.url + '"><span>Download File</span></a>';
htmlMediaElement.parentNode.insertBefore(errorContainer, htmlMediaElement);
@@ -1042,6 +1063,17 @@ mejs.HtmlMediaElementShim = {
node,
initVars;
+ // copy tagName from html media element
+ pluginMediaElement.tagName = htmlMediaElement.tagName
+
+ // copy attributes from html media element to plugin media element
+ for (var i = 0; i < htmlMediaElement.attributes.length; i++) {
+ var attribute = htmlMediaElement.attributes[i];
+ if (attribute.specified == true) {
+ pluginMediaElement.setAttribute(attribute.name, attribute.value);
+ }
+ }
+
// check for placement inside a <p> tag (sometimes WYSIWYG editors do this)
node = htmlMediaElement.parentNode;
while (node !== null && node.tagName.toLowerCase() != 'body') {
@@ -1361,6 +1393,7 @@ mejs.YouTubeApi = {
iFrameReady: function() {
+ this.isLoaded = true;
this.isIframeLoaded = true;
while (this.iframeQueue.length > 0) {
View
346 app/assets/javascripts/mediaelement_rails/mediaelementplayer.js
@@ -5,7 +5,7 @@
* Creates a controller bar for HTML5 <video> add <audio> tags
* using jQuery and MediaElement.js (HTML5 Flash/Silverlight wrapper)
*
- * Copyright 2010-2011, John Dyer (http://j.hn/)
+ * Copyright 2010-2012, John Dyer (http://j.hn/)
* Dual licensed under the MIT or GPL Version 2 licenses.
*
*/
@@ -56,9 +56,9 @@ if (typeof jQuery != 'undefined') {
alwaysShowControls: false,
// force iPad's native controls
iPadUseNativeControls: false,
- // force iPad's native controls
+ // force iPhone's native controls
iPhoneUseNativeControls: false,
- // force iPad's native controls
+ // force Android's native controls
AndroidUseNativeControls: false,
// features to show
features: ['playpause','current','progress','duration','tracks','volume','fullscreen'],
@@ -113,7 +113,7 @@ if (typeof jQuery != 'undefined') {
}
// 5%
- var newTime = Math.min(media.currentTime - (media.duration * 0.05), media.duration);
+ var newTime = Math.max(media.currentTime - (media.duration * 0.05), 0);
media.setCurrentTime(newTime);
}
}
@@ -131,7 +131,7 @@ if (typeof jQuery != 'undefined') {
}
// 5%
- var newTime = Math.max(media.currentTime + (media.duration * 0.05), 0);
+ var newTime = Math.min(media.currentTime + (media.duration * 0.05), media.duration);
media.setCurrentTime(newTime);
}
}
@@ -229,7 +229,8 @@ if (typeof jQuery != 'undefined') {
t.$media.attr('controls', 'controls');
// attempt to fix iOS 3 bug
- t.$media.removeAttr('poster');
+ //t.$media.removeAttr('poster');
+ // no Issue found on iOS3 -ttroxell
// override Apple's autoplay override for iPads
if (mf.isiPad && t.media.getAttribute('autoplay') !== null) {
@@ -709,8 +710,14 @@ if (typeof jQuery != 'undefined') {
setPlayerSize: function(width,height) {
var t = this;
-
- // testing for 100% code
+
+ if (typeof width != 'undefined')
+ t.width = width;
+
+ if (typeof height != 'undefined')
+ t.height = height;
+
+ // detect 100% mode
if (t.height.toString().indexOf('%') > 0) {
// do we have the native dimensions yet?
@@ -771,7 +778,7 @@ if (typeof jQuery != 'undefined') {
rail = t.controls.find('.mejs-time-rail'),
total = t.controls.find('.mejs-time-total'),
current = t.controls.find('.mejs-time-current'),
- loaded = t.controls.find('.mejs-time-loaded');
+ loaded = t.controls.find('.mejs-time-loaded'),
others = rail.siblings();
@@ -793,7 +800,7 @@ if (typeof jQuery != 'undefined') {
});
// fit the rail into the remaining space
- railWidth = t.controls.width() - usedWidth - (rail.outerWidth(true) - rail.outerWidth(false));
+ railWidth = t.controls.width() - usedWidth - (rail.outerWidth(true) - rail.width());
}
// outer area
@@ -861,8 +868,7 @@ if (typeof jQuery != 'undefined') {
'<div class="mejs-overlay-error"></div>'+
'</div>')
.hide() // start out hidden
- .appendTo(layers),
-
+ .appendTo(layers),
// this needs to come last so it's on top
bigPlay =
$('<div class="mejs-overlay mejs-layer mejs-overlay-play">'+
@@ -889,14 +895,26 @@ if (typeof jQuery != 'undefined') {
media.addEventListener('play',function() {
bigPlay.hide();
loading.hide();
+ controls.find('.mejs-time-buffering').hide();
error.hide();
}, false);
media.addEventListener('playing', function() {
bigPlay.hide();
loading.hide();
+ controls.find('.mejs-time-buffering').hide();
error.hide();
}, false);
+
+ media.addEventListener('seeking', function() {
+ loading.show();
+ controls.find('.mejs-time-buffering').show();
+ }, false);
+
+ media.addEventListener('seeked', function() {
+ loading.hide();
+ controls.find('.mejs-time-buffering').hide();
+ }, false);
media.addEventListener('pause',function() {
if (!mejs.MediaFeatures.isiPhone) {
@@ -906,6 +924,7 @@ if (typeof jQuery != 'undefined') {
media.addEventListener('waiting', function() {
loading.show();
+ controls.find('.mejs-time-buffering').show();
}, false);
@@ -916,14 +935,17 @@ if (typeof jQuery != 'undefined') {
// return;
loading.show();
+ controls.find('.mejs-time-buffering').show();
}, false);
media.addEventListener('canplay',function() {
loading.hide();
+ controls.find('.mejs-time-buffering').hide();
}, false);
// error handling
media.addEventListener('error',function() {
loading.hide();
+ controls.find('.mejs-time-buffering').hide();
error.show();
error.find('mejs-overlay-error').html("Error loading this resource");
}, false);
@@ -986,7 +1008,7 @@ if (typeof jQuery != 'undefined') {
},
changeSkin: function(className) {
this.container[0].className = 'mejs-container ' + className;
- this.setPlayerSize();
+ this.setPlayerSize(this.width, this.height);
this.setControlsSize();
},
play: function() {
@@ -1021,7 +1043,7 @@ if (typeof jQuery != 'undefined') {
if (t.media.pluginType == 'flash') {
t.media.remove();
- } else if (t.media.pluginTyp == 'native') {
+ } else if (t.media.pluginType == 'native') {
t.media.prop('controls', true);
}
@@ -1051,7 +1073,8 @@ if (typeof jQuery != 'undefined') {
// push out to window
window.MediaElementPlayer = mejs.MediaElementPlayer;
-})(mejs.$);
+})(mejs.$);
+
(function($) {
$.extend(mejs.MepDefaults, {
@@ -1110,7 +1133,7 @@ if (typeof jQuery != 'undefined') {
var t = this,
stop =
$('<div class="mejs-button mejs-stop-button mejs-stop">' +
- '<button type="button" aria-controls="' + t.id + '" title="' + t.options.stopText + '></button>' +
+ '<button type="button" aria-controls="' + t.id + '" title="' + t.options.stopText + '"></button>' +
'</div>')
.appendTo(controls)
.click(function() {
@@ -1137,6 +1160,7 @@ if (typeof jQuery != 'undefined') {
$('<div class="mejs-time-rail">'+
'<span class="mejs-time-total">'+
+ '<span class="mejs-time-buffering"></span>'+
'<span class="mejs-time-loaded"></span>'+
'<span class="mejs-time-current"></span>'+
'<span class="mejs-time-handle"></span>'+
@@ -1147,6 +1171,7 @@ if (typeof jQuery != 'undefined') {
'</span>'+
'</div>')
.appendTo(controls);
+ controls.find('.mejs-time-buffering').hide();
var
t = this,
@@ -1194,31 +1219,32 @@ if (typeof jQuery != 'undefined') {
if (e.which === 1) {
mouseIsDown = true;
handleMouseMove(e);
+ $(document)
+ .bind('mousemove.dur', function(e) {
+ handleMouseMove(e);
+ })
+ .bind('mouseup.dur', function (e) {
+ mouseIsDown = false;
+ timefloat.hide();
+ $(document).unbind('.dur');
+ });
return false;
- }
- });
-
- controls.find('.mejs-time-total')
+ }
+ })
.bind('mouseenter', function(e) {
mouseIsOver = true;
+ $(document).bind('mousemove.dur', function(e) {
+ handleMouseMove(e);
+ });
if (!mejs.MediaFeatures.hasTouch) {
timefloat.show();
}
})
.bind('mouseleave',function(e) {
mouseIsOver = false;
- timefloat.hide();
- });
-
- $(document)
- .bind('mouseup', function (e) {
- mouseIsDown = false;
- timefloat.hide();
- //handleMouseMove(e);
- })
- .bind('mousemove', function (e) {
- if (mouseIsDown || mouseIsOver) {
- handleMouseMove(e);
+ if (!mouseIsDown) {
+ $(document).unbind('.dur');
+ timefloat.hide();
}
});
@@ -1379,18 +1405,36 @@ if (typeof jQuery != 'undefined') {
$.extend(mejs.MepDefaults, {
muteText: 'Mute Toggle',
- hideVolumeOnTouchDevices: true
+ hideVolumeOnTouchDevices: true,
+
+ audioVolume: 'horizontal',
+ videoVolume: 'vertical'
});
$.extend(MediaElementPlayer.prototype, {
buildvolume: function(player, controls, layers, media) {
-
+
// Android and iOS don't support volume controls
if (mejs.MediaFeatures.hasTouch && this.options.hideVolumeOnTouchDevices)
return;
var t = this,
- mute =
+ mode = (t.isVideo) ? t.options.videoVolume : t.options.audioVolume,
+ mute = (mode == 'horizontal') ?
+
+ // horizontal version
+ $('<div class="mejs-button mejs-volume-button mejs-mute">'+
+ '<button type="button" aria-controls="' + t.id + '" title="' + t.options.muteText + '"></button>'+
+ '</div>' +
+ '<div class="mejs-horizontal-volume-slider">'+ // outer background
+ '<div class="mejs-horizontal-volume-total"></div>'+ // line background
+ '<div class="mejs-horizontal-volume-current"></div>'+ // current volume
+ '<div class="mejs-horizontal-volume-handle"></div>'+ // handle
+ '</div>'
+ )
+ .appendTo(controls) :
+
+ // vertical version
$('<div class="mejs-button mejs-volume-button mejs-mute">'+
'<button type="button" aria-controls="' + t.id + '" title="' + t.options.muteText + '"></button>'+
'<div class="mejs-volume-slider">'+ // outer background
@@ -1399,89 +1443,118 @@ if (typeof jQuery != 'undefined') {
'<div class="mejs-volume-handle"></div>'+ // handle
'</div>'+
'</div>')
- .appendTo(controls),
- volumeSlider = mute.find('.mejs-volume-slider'),
- volumeTotal = mute.find('.mejs-volume-total'),
- volumeCurrent = mute.find('.mejs-volume-current'),
- volumeHandle = mute.find('.mejs-volume-handle'),
+ .appendTo(controls),
+ volumeSlider = t.container.find('.mejs-volume-slider, .mejs-horizontal-volume-slider'),
+ volumeTotal = t.container.find('.mejs-volume-total, .mejs-horizontal-volume-total'),
+ volumeCurrent = t.container.find('.mejs-volume-current, .mejs-horizontal-volume-current'),
+ volumeHandle = t.container.find('.mejs-volume-handle, .mejs-horizontal-volume-handle'),
- positionVolumeHandle = function(volume) {
+ positionVolumeHandle = function(volume, secondTry) {
- if (!volumeSlider.is(':visible')) {
+ if (!volumeSlider.is(':visible') && typeof secondTry != 'undefined') {
volumeSlider.show();
- positionVolumeHandle(volume);
+ positionVolumeHandle(volume, true);
volumeSlider.hide()
return;
}
-
- var
+
+ // correct to 0-1
+ volume = Math.max(0,volume);
+ volume = Math.min(volume,1);
- // height of the full size volume slider background
- totalHeight = volumeTotal.height(),
+ // ajust mute button style
+ if (volume == 0) {
+ mute.removeClass('mejs-mute').addClass('mejs-unmute');
+ } else {
+ mute.removeClass('mejs-unmute').addClass('mejs-mute');
+ }
+
+ // position slider
+ if (mode == 'vertical') {
+ var
- // top/left of full size volume slider background
- totalPosition = volumeTotal.position(),
+ // height of the full size volume slider background
+ totalHeight = volumeTotal.height(),
+
+ // top/left of full size volume slider background
+ totalPosition = volumeTotal.position(),
+
+ // the new top position based on the current volume
+ // 70% volume on 100px height == top:30px
+ newTop = totalHeight - (totalHeight * volume);
+
+ // handle
+ volumeHandle.css('top', totalPosition.top + newTop - (volumeHandle.height() / 2));
+
+ // show the current visibility
+ volumeCurrent.height(totalHeight - newTop );
+ volumeCurrent.css('top', totalPosition.top + newTop);
+ } else {
+ var
- // the new top position based on the current volume
- // 70% volume on 100px height == top:30px
- newTop = totalHeight - (totalHeight * volume);
-
- // handle
- volumeHandle.css('top', totalPosition.top + newTop - (volumeHandle.height() / 2));
-
- // show the current visibility
- volumeCurrent.height(totalHeight - newTop );
- volumeCurrent.css('top', totalPosition.top + newTop);
+ // height of the full size volume slider background
+ totalWidth = volumeTotal.width(),
+
+ // top/left of full size volume slider background
+ totalPosition = volumeTotal.position(),
+
+ // the new left position based on the current volume
+ newLeft = totalWidth * volume;
+
+ // handle
+ volumeHandle.css('left', totalPosition.left + newLeft - (volumeHandle.width() / 2));
+
+ // rezize the current part of the volume bar
+ volumeCurrent.width( newLeft );
+ }
},
handleVolumeMove = function(e) {
- var
- railHeight = volumeTotal.height(),
- totalOffset = volumeTotal.offset(),
- totalTop = parseInt(volumeTotal.css('top').replace(/px/,''),10),
- newY = e.pageY - totalOffset.top,
- volume = (railHeight - newY) / railHeight
-
- // the controls just hide themselves (usually when mouse moves too far up)
- if (totalOffset.top == 0 || totalOffset.left == 0)
- return;
+
+ var volume = null,
+ totalOffset = volumeTotal.offset();
+
+ // calculate the new volume based on the moust position
+ if (mode == 'vertical') {
+
+ var
+ railHeight = volumeTotal.height(),
+ totalTop = parseInt(volumeTotal.css('top').replace(/px/,''),10),
+ newY = e.pageY - totalOffset.top;
+
+ volume = (railHeight - newY) / railHeight;
+
+ // the controls just hide themselves (usually when mouse moves too far up)
+ if (totalOffset.top == 0 || totalOffset.left == 0)
+ return;
- // 0-1
+ } else {
+ var
+ railWidth = volumeTotal.width(),
+ newX = e.pageX - totalOffset.left;
+
+ volume = newX / railWidth;
+ }
+
+ // ensure the volume isn't outside 0-1
volume = Math.max(0,volume);
- volume = Math.min(volume,1);
-
- // TODO: handle vertical and horizontal CSS
- // only allow it to move within the rail
- if (newY < 0)
- newY = 0;
- else if (newY > railHeight)
- newY = railHeight;
-
- // move the handle to match the mouse
- volumeHandle.css('top', newY - (volumeHandle.height() / 2) + totalTop );
-
- // show the current visibility
- volumeCurrent.height(railHeight-newY);
- volumeCurrent.css('top',newY+totalTop);
-
- // set mute status
+ volume = Math.min(volume,1);
+
+ // position the slider and handle
+ positionVolumeHandle(volume);
+
+ // set the media object (this will trigger the volumechanged event)
if (volume == 0) {
media.setMuted(true);
- mute.removeClass('mejs-mute').addClass('mejs-unmute');
} else {
media.setMuted(false);
- mute.removeClass('mejs-unmute').addClass('mejs-mute');
}
-
- volume = Math.max(0,volume);
- volume = Math.min(volume,1);
-
- // set the volume
- media.setVolume(volume);
+ media.setVolume(volume);
},
mouseIsDown = false,
mouseIsOver = false;
// SLIDER
+
mute
.hover(function() {
volumeSlider.show();
@@ -1489,7 +1562,7 @@ if (typeof jQuery != 'undefined') {
}, function() {
mouseIsOver = false;
- if (!mouseIsDown) {
+ if (!mouseIsDown && mode == 'vertical') {
volumeSlider.hide();
}
});
@@ -1500,31 +1573,27 @@ if (typeof jQuery != 'undefined') {
})
.bind('mousedown', function (e) {
handleVolumeMove(e);
+ $(document)
+ .bind('mousemove.vol', function(e) {
+ handleVolumeMove(e);
+ })
+ .bind('mouseup.vol', function () {
+ mouseIsDown = false;
+ $(document).unbind('.vol');
+
+ if (!mouseIsOver && mode == 'vertical') {
+ volumeSlider.hide();
+ }
+ });
mouseIsDown = true;
return false;
});
-
- $(document)
- .bind('mouseup', function (e) {
- mouseIsDown = false;
-
- if (!mouseIsOver) {
- volumeSlider.hide();
- }
- })
- .bind('mousemove', function (e) {
- if (mouseIsDown) {
- handleVolumeMove(e);
- }
- });
// MUTE button
mute.find('button').click(function() {
-
media.setMuted( !media.muted );
-
});
// listen for volume change events from other sources
@@ -1540,13 +1609,14 @@ if (typeof jQuery != 'undefined') {
}
}, false);
- // set initial volume
- //console.log('init volume',player.options.startVolume);
- positionVolumeHandle(player.options.startVolume);
-
- // shim gets the startvolume as a parameter, but we have to set it on the native <video> and <audio> elements
- if (media.pluginType === 'native') {
- media.setVolume(player.options.startVolume);
+ if (t.container.is(':visible')) {
+ // set initial volume
+ positionVolumeHandle(player.options.startVolume);
+
+ // shim gets the startvolume as a parameter, but we have to set it on the native <video> and <audio> elements
+ if (media.pluginType === 'native') {
+ media.setVolume(player.options.startVolume);
+ }
}
}
});
@@ -1582,7 +1652,15 @@ if (typeof jQuery != 'undefined') {
if (mejs.MediaFeatures.hasTrueNativeFullScreen) {
// chrome doesn't alays fire this in an iframe
- player.container.bind(mejs.MediaFeatures.fullScreenEventName, function(e) {
+ var target = null;
+
+ if (mejs.MediaFeatures.hasMozNativeFullScreen) {
+ target = $(document);
+ } else {
+ target = player.container;
+ }
+
+ target.bind(mejs.MediaFeatures.fullScreenEventName, function(e) {
//player.container.bind('webkitfullscreenchange', function(e) {
@@ -1624,7 +1702,25 @@ if (typeof jQuery != 'undefined') {
} else {
var hideTimeout = null,
- supportsPointerEvents = (document.documentElement.style.pointerEvents === '');
+ supportsPointerEvents = (function() {
+ // TAKEN FROM MODERNIZR
+ var element = document.createElement('x'),
+ documentElement = document.documentElement,
+ getComputedStyle = window.getComputedStyle,
+ supports;
+ if(!('pointerEvents' in element.style)){
+ return false;
+ }
+ element.style.pointerEvents = 'auto';
+ element.style.pointerEvents = 'x';
+ documentElement.appendChild(element);
+ supports = getComputedStyle &&
+ getComputedStyle(element, '').pointerEvents === 'auto';
+ documentElement.removeChild(element);
+ return !!supports;
+ })();
+
+ console.log('supportsPointerEvents', supportsPointerEvents);
if (supportsPointerEvents && !mejs.MediaFeatures.isOpera) { // opera doesn't allow this :(
@@ -2086,7 +2182,7 @@ if (typeof jQuery != 'undefined') {
// chapters
if (player.hasChapters) {
player.chapters.css('visibility','visible');
- player.chapters.fadeIn(200);
+ player.chapters.fadeIn(200).height(player.chapters.find('.mejs-chapter').outerHeight());
}
},
function () {
@@ -2227,7 +2323,7 @@ if (typeof jQuery != 'undefined') {
for (i=0; i<track.entries.times.length; i++) {
if (t.media.currentTime >= track.entries.times[i].start && t.media.currentTime <= track.entries.times[i].stop){
t.captionsText.html(track.entries.text[i]);
- t.captions.show();
+ t.captions.show().height(0);
return; // exit out if one is visible;
}
}
@@ -2461,7 +2557,7 @@ if (typeof jQuery != 'undefined') {
(function($) {
$.extend(mejs.MepDefaults,
- contextMenuItems = [
+ { 'contextMenuItems': [
// demo of a fullscreen option
{
render: function(player) {
@@ -2516,7 +2612,7 @@ $.extend(mejs.MepDefaults,
window.location.href = player.media.currentSrc;
}
}
- ]
+ ]}
);
View
BIN  app/assets/plugins/mediaelement_rails/flashmediaelement.swf
Binary file not shown
View
BIN  app/assets/plugins/mediaelement_rails/silverlightmediaelement.xap
Binary file not shown
View
172 app/assets/stylesheets/mediaelement_rails/mediaelementplayer.css.erb
@@ -2,10 +2,12 @@
position: relative;
background: #000;
font-family: Helvetica, Arial;
+ text-align: left;
+ vertical-align: top;
}
.me-plugin {
- position: absolute;
+ position: absolute;
}
.mejs-embed, .mejs-embed body {
@@ -43,7 +45,7 @@
top: 0;
left: 0;
width: 100%;
- height: 100%;
+ height: 100%;
}
.mejs-poster {
position: absolute;
@@ -86,11 +88,11 @@
background: #333;
background: url(<%= asset_path "mediaelement_rails/background.png" %>);
background: rgba(0, 0, 0, 0.9);
- background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(50,50,50,0.9)), to(rgba(0,0,0,0.9)));
+ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(50,50,50,0.9)), to(rgba(0,0,0,0.9)));
background: -webkit-linear-gradient(top, rgba(50,50,50,0.9), rgba(0,0,0,0.9));
background: -moz-linear-gradient(top, rgba(50,50,50,0.9), rgba(0,0,0,0.9));
background: -o-linear-gradient(top, rgba(50,50,50,0.9), rgba(0,0,0,0.9));
- background: -ms-linear-gradient(top, rgba(50,50,50,0.9), rgba(0,0,0,0.9));
+ background: -ms-linear-gradient(top, rgba(50,50,50,0.9), rgba(0,0,0,0.9));
background: linear-gradient(rgba(50,50,50,0.9), rgba(0,0,0,0.9));
}
.mejs-overlay-loading span {
@@ -118,7 +120,7 @@
background: -moz-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7));
background: -o-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7));
background: -ms-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7));
- background: linear-gradient(rgba(50,50,50,0.7), rgba(0,0,0,0.7));
+ background: linear-gradient(rgba(50,50,50,0.7), rgba(0,0,0,0.7));
height: 30px;
width: 100%;
}
@@ -170,6 +172,9 @@
overflow: hidden;
text-align: center;
padding: auto 4px;
+ box-sizing: content-box;
+ -moz-box-sizing: content-box;
+ -webkit-box-sizing: content-box;
}
.mejs-container .mejs-controls .mejs-time span {
font-size: 11px;
@@ -223,9 +228,33 @@
background: -moz-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8));
background: -o-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8));
background: -ms-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8));
- background: linear-gradient(rgba(30,30,30,0.8), rgba(60,60,60,0.8));
- filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#1E1E1E,endColorstr=#3C3C3C);
-}
+ background: linear-gradient(rgba(30,30,30,0.8), rgba(60,60,60,0.8));
+}
+.mejs-controls .mejs-time-rail .mejs-time-buffering {
+ width:100%;
+ background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+ background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
+ background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+ background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+ background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+ background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+ -webkit-background-size: 15px 15px;
+ -moz-background-size: 15px 15px;
+ -o-background-size: 15px 15px;
+ background-size: 15px 15px;
+ -webkit-animation: buffering-stripes 2s linear infinite;
+ -moz-animation: buffering-stripes 2s linear infinite;
+ -ms-animation: buffering-stripes 2s linear infinite;
+ -o-animation: buffering-stripes 2s linear infinite;
+ animation: buffering-stripes 2s linear infinite;
+}
+
+@-webkit-keyframes buffering-stripes { from {background-position: 0 0;} to {background-position: 30px 0;} }
+@-moz-keyframes buffering-stripes { from {background-position: 0 0;} to {background-position: 30px 0;} }
+@-ms-keyframes buffering-stripes { from {background-position: 0 0;} to {background-position: 30px 0;} }
+@-o-keyframes buffering-stripes { from {background-position: 0 0;} to {background-position: 30px 0;} }
+@keyframes buffering-stripes { from {background-position: 0 0;} to {background-position: 30px 0;} }
+
.mejs-controls .mejs-time-rail .mejs-time-loaded {
background: #3caac8;
background: rgba(60,170,200,0.8);
@@ -234,8 +263,7 @@
background: -moz-linear-gradient(top, rgba(44,124,145,0.8), rgba(78,183,212,0.8));
background: -o-linear-gradient(top, rgba(44,124,145,0.8), rgba(78,183,212,0.8));
background: -ms-linear-gradient(top, rgba(44,124,145,0.8), rgba(78,183,212,0.8));
- background: linear-gradient(rgba(44,124,145,0.8), rgba(78,183,212,0.8));
- filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#2C7C91,endColorstr=#4EB7D4);
+ background: linear-gradient(rgba(44,124,145,0.8), rgba(78,183,212,0.8));
width: 0;
}
.mejs-controls .mejs-time-rail .mejs-time-current {
@@ -248,7 +276,6 @@
background: -o-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8));
background: -ms-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8));
background: linear-gradient(rgba(255,255,255,0.9), rgba(200,200,200,0.8));
- filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#FFFFFF,endColorstr=#C8C8C8);
}
.mejs-controls .mejs-time-rail .mejs-time-handle {
@@ -401,6 +428,70 @@
margin: 0;
}
+
+/* horizontal version */
+
+.mejs-controls div.mejs-horizontal-volume-slider {
+ height: 26px;
+ width: 60px;
+ position: relative;
+}
+
+.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
+ position: absolute;
+ left: 0;
+ top: 11px;
+ width: 50px;
+ height: 8px;
+ margin: 0;
+ padding: 0;
+ font-size: 1px;
+
+ -webkit-border-radius: 2px;
+ -moz-border-radius: 2px;
+ border-radius: 2px;
+
+ background: #333;
+ background: rgba(50,50,50,0.8);
+ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(30,30,30,0.8)), to(rgba(60,60,60,0.8)));
+ background: -webkit-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8));
+ background: -moz-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8));
+ background: -o-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8));
+ background: -ms-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8));
+ background: linear-gradient(rgba(30,30,30,0.8), rgba(60,60,60,0.8));
+
+}
+
+.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
+ position: absolute;
+ left: 0;
+ top: 11px;
+ width: 50px;
+ height: 8px;
+ margin: 0;
+ padding: 0;
+ font-size: 1px;
+
+ -webkit-border-radius: 2px;
+ -moz-border-radius: 2px;
+ border-radius: 2px;
+
+ background: #fff;
+ background: rgba(255,255,255,0.8);
+ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.9)), to(rgba(200,200,200,0.8)));
+ background: -webkit-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8));
+ background: -moz-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8));
+ background: -o-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8));
+ background: -ms-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8));
+ background: linear-gradient(rgba(255,255,255,0.9), rgba(200,200,200,0.8));
+
+}
+
+
+.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle {
+ display: none;
+}
+
/* End: Mute/Volume */
@@ -477,6 +568,7 @@
left: 0;
-xborder-right: solid 1px #fff;
width: 10000px;
+ z-index: 1;
}
.mejs-chapters .mejs-chapter {
position: absolute;
@@ -650,4 +742,60 @@
.mejs-contextmenu .mejs-contextmenu-item:hover {
background: #2C7C91;
color: #fff;
-}
+}
+
+
+/* Start: SourceChooser */
+.mejs-controls .mejs-sourcechooser-button {
+ position: relative;
+}
+
+.mejs-controls .mejs-sourcechooser-button button {
+ background-position: -128px 0;
+}
+.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector {
+ visibility: hidden;
+ position: absolute;
+ bottom: 26px;
+ right: -10px;
+ width: 130px;
+ height: 100px;
+ background: url(<%= asset_path "mediaelement_rails/background.png" %>);
+ background: rgba(50,50,50,0.7);
+ border: solid 1px transparent;
+ padding: 10px;
+ overflow: hidden;
+ -webkit-border-radius: 0;
+ -moz-border-radius: 0;
+ border-radius: 0;
+}
+
+.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul {
+ margin: 0;
+ padding: 0;
+ display: block;
+ list-style-type: none !important;
+ overflow: hidden;
+}
+.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li{
+ margin: 0 0 6px 0;
+ padding: 0;
+ list-style-type: none !important;
+ display:block;
+ color: #fff;
+ overflow: hidden;
+}
+.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li input{
+ clear: both;
+ float: left;
+ margin: 3px 3px 0 5px;
+}
+.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li label{
+ width: 100px;
+ float: left;
+ padding: 4px 0 0 0;
+ line-height: 15px;
+ font-family: helvetica, arial;
+ font-size: 10px;
+}
+/* End: SourceChooser */
Please sign in to comment.
Something went wrong with that request. Please try again.