MDL-26697 multiple media filtering fixes and improvements

Bug fixes:
    * fixed broken flash resizing via URL
    * upgraded Flowplayer
    * fixed invalid context in format_text()
    * all media related CSS moved from themes to filter and resources
    * fixed automatic pdf resizing in resources

Changes:
    * reworked filter_mediaplugin system settings - grouped by player type instead of individual extensions, added more information
    * improved regex url matching
    * removed old unused players, Eolas fix and UFO embedding
    * image embedding moved to filter_urltolink
    * new Flowplayer embedding API
    * accessibility and compatibility tweaks in Flowplayer
    * SWF embedding now works only in trusted texts, it is now enabled by default (works everywhere if "Allow EMBED and OBJECT tags" enabled)
    * new default video width and height

New features:
    * automatic Flash video resizing using information from video metadata
    * Flash HD video support (*.f4v)
    * Flash video embedding with HTML5 fallback - compatible with iOS and other mobile devices
    * Vimeo embedding
    * no-cookie YouTube site supported
    * HTML 5 audio and video with multiple source URLs and QuickTime fallback
    * more video and audio extensions in filelib.php
    * MP3 player colours customisable via CSS in themes
    * nomediaplugin class in a tag prevents media embedding
This commit is contained in:
Petr Skoda
2011-03-12 17:42:52 +01:00
parent c09604234a
commit fcd2cbaf1f
58 changed files with 3160 additions and 1268 deletions

View File

@@ -46,10 +46,6 @@ M.util.image_url = function(imagename, component) {
return url;
};
M.util.create_UFO_object = function (eid, FO) {
UFO.create(FO, eid);
};
M.util.in_array = function(item, array){
for( var i = 0; i<array.length; i++){
if(item==array[i]){
@@ -296,7 +292,6 @@ M.util.init_maximised_embed = function(Y, id) {
return;
}
var get_htmlelement_size = function(el, prop) {
if (Y.Lang.isString(el)) {
el = Y.one('#' + el);
@@ -311,17 +306,17 @@ M.util.init_maximised_embed = function(Y, id) {
var resize_object = function() {
obj.setStyle('width', '0px');
obj.setStyle('height', '0px');
var newwidth = get_htmlelement_size('maincontent', 'width') - 15;
var newwidth = get_htmlelement_size('maincontent', 'width') - 35;
if (newwidth > 600) {
if (newwidth > 500) {
obj.setStyle('width', newwidth + 'px');
} else {
obj.setStyle('width', '600px');
obj.setStyle('width', '500px');
}
var headerheight = get_htmlelement_size('page-header', 'height');
var footerheight = get_htmlelement_size('page-footer', 'height');
var newheight = parseInt(YAHOO.util.Dom.getViewportHeight()) - footerheight - headerheight - 20;
var newheight = parseInt(YAHOO.util.Dom.getViewportHeight()) - footerheight - headerheight - 100;
if (newheight < 400) {
newheight = 400;
}
@@ -1534,71 +1529,163 @@ M.form.init_smartselect = function(Y, id, options) {
});
};
M.util.init_flvflowplayer = function (id, playerpath, fileurl) {
$f(id, playerpath, {
plugins: {
controls: {
autoHide: true
/** List of flv players to be loaded */
M.util.video_players = [];
/** List of mp3 players to be loaded */
M.util.audio_players = [];
/**
* Add video player
* @param id element id
* @param fileurl media url
* @param width
* @param height
* @param autosize true means detect size from media
*/
M.util.add_video_player = function (id, fileurl, width, height, autosize) {
M.util.video_players.push({id: id, fileurl: fileurl, width: width, height: height, autosize: autosize, resized: false});
};
/**
* Add audio player.
* @param id
* @param fileurl
* @param small
*/
M.util.add_audio_player = function (id, fileurl, small) {
M.util.audio_players.push({id: id, fileurl: fileurl, small: small});
};
/**
* Initialise all audio and video player, must be called from page footer.
*/
M.util.load_flowplayer = function() {
if (M.util.video_players.length == 0 && M.util.audio_players.length == 0) {
return;
}
if (typeof(flowplayer) == 'undefined') {
var loaded = false;
var embed_function = function() {
if (loaded || typeof(flowplayer) == 'undefined') {
return;
}
loaded = true;
var controls = {
autoHide: true
}
/* TODO: add CSS color overrides for the flv flow player */
for(var i=0; i<M.util.video_players.length; i++) {
var video = M.util.video_players[i];
if (video.width > 0 && video.height > 0) {
var src = {src: M.cfg.wwwroot + '/lib/flowplayer/flowplayer-3.2.7.swf', width: video.width, height: video.height};
} else {
var src = M.cfg.wwwroot + '/lib/flowplayer/flowplayer-3.2.7.swf';
}
},
clip: {
url: fileurl,
autoPlay: false,
autoBuffering: true
flowplayer(video.id, src, {
plugins: {controls: controls},
clip: {
url: video.fileurl, autoPlay: false, autoBuffering: true, scaling: 'fit', mvideo: video,
onMetaData: function(clip) {
if (clip.mvideo.autosize && !clip.mvideo.resized) {
clip.mvideo.resized = true;
//alert("metadata!!! "+clip.width+' '+clip.height+' '+JSON.stringify(clip.metaData));
if (typeof(clip.metaData.width) == 'undefined' || typeof(clip.metaData.height) == 'undefined') {
// bad luck, we have to guess - we may not get metadata at all
var width = clip.width;
var height = clip.height;
} else {
var width = clip.metaData.width;
var height = clip.metaData.height;
}
var minwidth = 300; // controls are messed up in smaller objects
if (width < minwidth) {
height = (height * minwidth) / width;
width = minwidth;
}
var object = this._api();
object.width = width;
object.height = height;
}
}
}
});
}
if (M.util.audio_players.length == 0) {
return;
}
var controls = {
autoHide: false,
fullscreen: false,
next: false,
previous: false,
scrubber: true,
play: true,
pause: true,
volume: true,
mute: false,
backgroundGradient: [0.5,0,0.3]
};
var rule;
for (var j=0; j < document.styleSheets.length; j++) {
if (typeof (document.styleSheets[j].rules) != 'undefined') {
var allrules = document.styleSheets[j].rules;
} else if (typeof (document.styleSheets[j].cssRules) != 'undefined') {
var allrules = document.styleSheets[j].cssRules;
} else {
// why??
continue;
}
for(var i=0; i<allrules.length; i++) {
rule = '';
if (/^\.mp3flowplayer_.*Color$/.test(allrules[i].selectorText)) {
if (typeof(allrules[i].cssText) != 'undefined') {
rule = allrules[i].style.cssText;
} else if (typeof(allrules[i].style.cssText) != 'undefined') {
rule = allrules[i].style.cssText;
}
if (rule != '' && /.*color\s*:\s*([^;]+).*/gi.test(rule)) {
rule = rule.replace(/.*color\s*:\s*([^;]+).*/gi, '$1');
var colprop = allrules[i].selectorText.replace(/^\.mp3flowplayer_/, '');
controls[colprop] = rule;
}
}
}
allrules = false;
}
for(i=0; i<M.util.audio_players.length; i++) {
var audio = M.util.audio_players[i];
if (audio.small) {
controls.controlall = false;
controls.height = 15;
controls.time = false;
} else {
controls.controlall = true;
controls.height = 25;
controls.time = true;
}
flowplayer(audio.id, M.cfg.wwwroot + '/lib/flowplayer/flowplayer-3.2.7.swf', {
plugins: {controls: controls, audio: {url: M.cfg.wwwroot + '/lib/flowplayer/flowplayer.audio-3.2.2.swf'}},
clip: {url: audio.fileurl, provider: "audio", autoPlay: false}
});
}
}
});
};
M.util.init_mp3flowplayer = function (id, playerpath, audioplayerpath, fileurl, color) {
$f(id, playerpath, {
plugins: {
controls: {
fullscreen: false,
height: 25,
autoHide: false,
background: '#'+color['bgColour'],
buttonColor: '#'+color['btnColour'],
sliderColor: '#'+color['handleColour'],
volumeSliderColor: '#'+color['handleColour'],
volumeColor: '#'+color['trackColour'],
durationColor: '#'+color['fontColour'],
buttonOverColor: '#'+color['iconOverColour'],
progressColor: '#'+color['handleColour']
},
audio: {url: audioplayerpath}
},
clip: {url: fileurl,
provider: "audio",
autoPlay: false
}
});
};
M.util.init_mp3flowplayerplugin = function (id, playerpath, audioplayerpath, fileurl, color) {
$f(id, playerpath, {
plugins: {
controls: {
all: false,
play: true,
pause: true,
scrubber: true,
autoHide: false,
height: 15,
background: '#'+color['bgColour'],
buttonColor: '#'+color['btnColour'],
sliderColor: '#'+color['handleColour'],
volumeSliderColor: '#'+color['handleColour'],
progressColor: '#'+color['handleColour'],
volumeColor: '#'+color['trackColour'],
buttonOverColor: '#'+color['iconOverColour']
},
audio: {url: audioplayerpath}
},
clip: {url: fileurl,
provider: "audio",
autoPlay: false
}
});
};
if (M.cfg.jsrev == -10) {
var jsurl = M.cfg.wwwroot + '/lib/flowplayer/flowplayer-3.2.6.js';
} else {
var jsurl = M.cfg.wwwroot + '/lib/javascript.php?file=/lib/flowplayer/flowplayer-3.2.6.js&rev=' + M.cfg.jsrev;
}
var fileref = document.createElement('script');
fileref.setAttribute('type','text/javascript');
fileref.setAttribute('src', jsurl);
fileref.onload = embed_function;
fileref.onreadystatechange = embed_function;
document.getElementsByTagName('head')[0].appendChild(fileref);
}
}