mirror of
https://github.com/moodle/moodle.git
synced 2025-07-28 01:41:03 +02:00
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:
@@ -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);
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user