To play with dynamic Themes install <a href="http://jqueryui.com/themeroller/developertool/">Themeroller</a><p><p>
<div style="width:450px;float:left">
-<video src="http://upload.wikimedia.org/wikipedia/commons/d/d3/Okapia_johnstoni5.ogg"
- poster="http://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Okapia_johnstoni5.ogg/mid-Okapia_johnstoni5.ogg.jpg" durationHint="15"></video>
+<video src="http://upload.wikimedia.org/wikipedia/commons/2/29/Charles_Lindbergh_flight_to_Brussels.ogg"
+ poster="http://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Charles_Lindbergh_flight_to_Brussels.ogg/mid-Charles_Lindbergh_flight_to_Brussels.ogg.jpg" durationHint="15"></video>
<b>Source Code used:</b><br>
-<textarea cols="50" rows="7"><video style="width:400px;height:288px" poster="http://metavid.org/w/index.php?action=ajax&rs=mv_frame_server&stream_id=71&t=1:23:16&size=400x300"
-src="http://metavidstorage01.ucsc.edu/media/house_proceeding_07-18-06_00.ogg?t=1:23:16/1:23:44"></video></textarea>
+<textarea cols="50" rows="7"><video style="width:400px;height:288px" poster="http://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Charles_Lindbergh_flight_to_Brussels.ogg/mid-Charles_Lindbergh_flight_to_Brussels.ogg.jpg"
+src="http://upload.wikimedia.org/wikipedia/commons/2/29/Charles_Lindbergh_flight_to_Brussels.ogg"></video></textarea>
</div>
-
<div style="width:450px;float:left">
-<video skin_name="kskin" src="http://upload.wikimedia.org/wikipedia/commons/d/d3/Okapia_johnstoni5.ogg"
- poster="http://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Okapia_johnstoni5.ogg/mid-Okapia_johnstoni5.ogg.jpg" durationHint="15"></video>
-<b>(ksin) Embed Code used:</b><br>
-<textarea cols="50" rows="7"><video skin_name="kskin" src="http://upload.wikimedia.org/wikipedia/commons/d/d3/Okapia_johnstoni5.ogg" poster="http://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Okapia_johnstoni5.ogg/mid-Okapia_johnstoni5.ogg.jpg" durationHint="15"></video></textarea>
+<video skin_name="kskin" src="http://upload.wikimedia.org/wikipedia/commons/2/29/Charles_Lindbergh_flight_to_Brussels.ogg"
+ poster="http://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Charles_Lindbergh_flight_to_Brussels.ogg/mid-Charles_Lindbergh_flight_to_Brussels.ogg.jpg" durationHint="15"></video>
+<b>(ksin) Source Code used:</b><br>
+<textarea cols="50" rows="7"><video style="width:400px;height:288px" poster="http://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Charles_Lindbergh_flight_to_Brussels.ogg/mid-Charles_Lindbergh_flight_to_Brussels.ogg.jpg"
+src="http://upload.wikimedia.org/wikipedia/commons/2/29/Charles_Lindbergh_flight_to_Brussels.ogg"></video></textarea>
</div>
-
</body>
</html>
},
getImageObj:function( rObj, size, callback ){
if( rObj.mime=='application/ogg' )
- return callback( {'url':rObj.src, 'poster' : rObj.url } );
-
- //we can just use direct request urls
- //@@todo thumb.php has some issues (cant serve the full image size, has poor erro handling etc)
- /*var baseImgUrl = this.cp.api_url.replace('api.php', 'thumb.php');
- if ( rObj.mime=='image/jpeg' || rObj.mime=='image/png' ){
- //if requested size is greater than org size return reduced size obj:
- if( size.width > rObj.orgwidth){
- callback({
- 'url' : baseImgUrl + '?f=' + rObj.titleKey.replace(/\s/g, '_') + '&w='+ rObj.orgwidth,
- 'width' : rObj.orgwidth,
- 'height': rObj.orgheight
- });
- return false;
- }
- }
- //assuming svg or size is in range: give them requested size
- callback({
- 'url' : baseImgUrl + '?f=' + rObj.titleKey + '&w='+ size.width,
- 'width' : size.width,
- 'height': Math.round( ( rObj.orgheight / rObj.orgwidth)*size.width )
- });
- return false;
- */
+ return callback( {'url':rObj.src, 'poster' : rObj.url } );
//his could be depreciated if thumb.php improves
var reqObj = {
"mwe-next_clip_msg" : "Play next clip",
"mwe-prev_clip_msg" : "Play previous clip",
"mwe-current_clip_msg" : "Continue playing this clip",
- "mwe-seek_to" : "Seek to $1",
+ "mwe-seek_to" : "Seek $1",
"mwe-paused" : "paused",
"mwe-download_segment" : "Download selection:",
"mwe-download_full" : "Download full video file:",
- "mwe-download_right_click" : "To download, right click and select <i>Save target as...<\/i>",
+ "mwe-download_right_click" : "To download, right click and select <i>Save link as...<\/i>",
"mwe-download_clip" : "Download video",
"mwe-download_text" : "Download text (<a style=\"color:white\" title=\"cmml\" href=\"http:\/\/wiki.xiph.org\/index.php\/CMML\">CMML<\/a> xml):",
"mwe-download" : "Download",
"mwe-read_before_embed" : "<a href=\"http:\/\/mediawiki.org\/wiki\/Security_Notes_on_Remote_Embedding\" target=\"_new\">Read this<\/a> before embedding.",
"mwe-embed_site_or_blog" : "Embed on your site or blog",
"mwe-related_videos" : "Related videos",
- "mwe-seeking" : "seeking"
+ "mwe-seeking" : "seeking",
+ "mwe-copy-code" : "Copy code"
});
//set the globals:
mvEmbed.flist.push( swap_done_callback );
//get mv_embed location if it has not been set
- js_log('mv_video_embed:: ' + MV_EMBED_VERSION);
+ js_log('mv_video_embed:: ' + $mw.version);
var loadPlaylistLib=false;
js_log( "Do SWAP: " + $j(this_elm).attr("id") + ' tag: '+ this_elm.tagName.toLowerCase() );
if( $j(this_elm).attr("id") == '' ){
- $j(this_elm).attr("id", 'v'+ global_player_list.length);
+ $j(this_elm).attr("id", 'v'+ $mw.player_list.length);
}
//store a global reference to the id
- global_player_list.push( $j(this_elm).attr("id") );
+ $mw.player_list.push( $j(this_elm).attr("id") );
//if video doSwap
switch( this_elm.tagName.toLowerCase()){
$j('#'+embed_video.id).get(0).init_with_sources_loaded();
}
- js_log('done with child: ' + embed_video.id + ' len:' + global_player_list.length);
+ js_log('done with child: ' + embed_video.id + ' len:' + $mw.player_list.length);
return true;
},
//this should not be needed.
checkClipsReady : function(){
//js_log('checkClipsReady');
var is_ready=true;
- for(var i=0; i < global_player_list.length; i++){
- if( $j('#'+global_player_list[i]).length !=0){
- var cur_vid = $j('#'+global_player_list[i]).get(0);
+ for(var i=0; i < $mw.player_list.length; i++){
+ if( $j('#'+$mw.player_list[i]).length !=0){
+ var cur_vid = $j('#'+$mw.player_list[i]).get(0);
is_ready = ( cur_vid.ready_to_play ) ? is_ready : false;
if( !is_ready && cur_vid.load_error ){
is_ready=true;
}
}
},
- //display the code to remotely embed this video:
- showEmbedCode : function(embed_code){
- if(!embed_code)
- embed_code = this.getEmbeddingHTML();
- var o='';
- if(this.linkback){
- o+='<a class="email" href="'+this.linkback+'">Share Clip via Link</a> '+
- '<p>or</p> ';
- }
- o+='<div>' +
- '<span style="color:#FFF;font-size:14px;">Embed Clip in Blog or Site</span><br>'+
- '<span class="readthis" style="color:#FFF;font-size:12px;">' + gM('mwe-read_before_embed') +
- '<div class="embed_code"> '+
- '<textarea onClick="this.select();" id="embedding_user_html_'+this.id+'" name="embed">' +
- embed_code+
- '</textarea> '+
- '<button onClick="$j(\'#'+this.id+'\').get(0).copyText(); return false;" class="copy_to_clipboard">Copy to Clipboard</button> '+
- '</div> '+
- '</div>';
- this.displayHTML(o);
- $j('#'+ this.id + ' .readthis a').css('font-color', 'red');
- },
- copyText:function(){
- $j('#embedding_user_html_'+this.id).focus().select();
- if(document.selection){
- CopiedTxt = document.selection.createRange();
- CopiedTxt.execCommand("Copy");
- }
+ showShare:function($target){
+ var embed_code = this.getEmbeddingHTML();
+ var o = '';
+ var _this = this;
+ //@todo: hook events to two a's for swapping in and out code for link vs. embed;
+ // hook events for changing active class of li based on a.
+ o+= '<h2>' + gM('mwe-share_this_video') + '</h2>\n' +
+ ' <ul>\n' +
+ ' <li><a href="#" class="active">'+gM('mwe-embed_site_or_blog')+'</a></li>\n';
+ if(this.linkback) {
+ o+= ' <li><a href="#" id="k-share-link">' + this.linkback + '</a></li>\n';
+ }
+ o+= '</ul>' +
+ '<div class="source_wrap"><textarea>' + embed_code + '</textarea></div>' +
+ '<button class="ui-state-default ui-corner-all copycode">' + gM('mwe-copy-code') + '</button>' +
+ '<div class="ui-state-highlight ui-corner-all">' + gM('mwe-read_before_embed') + '</div>' +
+ '</div>'
+ $target.html(o);
+ $cpBtn = $j( '#' + this.id + ' .copycode');
+ $cpTxt = $j( '#' + this.id + ' .source_wrap textarea');
+
+ $cpTxt.click(function(){
+ $j(this).get(0).select();
+ });
+ //add copy binding:
+ $cpBtn.click(function(){
+ $cpTxt.focus().get(0).select();
+ if(document.selection){
+ CopiedTxt = document.selection.createRange();
+ CopiedTxt.execCommand("Copy");
+ }
+ });
},
showTextInterface:function(){
var _this = this;
},
//do common monitor code like update the playhead and play status
//plugin objects are responsible for updating currentTime
- monitor:function(){
- //js_log(' us: ' + this.userSlide + ' is seek: ' + this.seeking );
+ monitor:function(){
+ js_log(' ct: ' + this.currentTime + ' dur: ' + ( parseInt( this.duration ) + 1 ) + ' is seek: ' + this.seeking );
if( this.currentTime && this.currentTime > 0 && this.duration){
if( !this.userSlide && !this.seeking ){
if( this.start_offset ){
}else{
this.setSliderValue( this.currentTime / this.duration );
var et = (this.ctrlBuilder.long_time_disp)? '/' + seconds2npt( this.duration ):'';
- this.setStatus( seconds2npt( this.currentTime ) + et);
+ this.setStatus( seconds2npt( this.currentTime ) + et);
}
}
+ //check if we are "done"
+ if( this.currentTime > ( parseInt(this.duration) + 1 ) ){
+ js_log("should run clip done");
+ this.onClipDone();
+ }
}else{
//media lacks duration just show end time
//js_log(' ct:' + this.currentTime + ' dur: ' + this.duration);
}
if( selected_player )
{
- for(var i=0; i < global_player_list.length; i++)
+ for(var i=0; i < $mw.player_list.length; i++)
{
- var embed = $j('#'+global_player_list[i]).get(0);
+ var embed = $j('#'+$mw.player_list[i]).get(0);
if(embed.media_element.selected_source && (embed.media_element.selected_source.mime_type == mime_type))
{
embed.selectPlayer(selected_player);
* (in cases where media will be hosted in a different place than the embedding page)
*
*/
-// Fix multiple instances of mv_embed (i.e. include twice from two different servers)
-var MV_DO_INIT=true;
-if( MV_EMBED_VERSION ){
- MV_DO_INIT=false;
-}
-// Used to grab fresh copies of scripts.
-var MV_EMBED_VERSION = '1.0r20';
-
/**
// For use when mv_embed with script-loader is in the root MediaWiki path
var mediaWiki_mvEmbed_path = 'js2/mwEmbed/';
-var _global = this; // Global obj (depreciate use window)
+//The global scope: will be depreciated once we get everything into $mw
+var _global = this;
/*
* setup the empty global $mw object
}
//@@todo move these into $mw
-var mv_init_done = false;
-var global_cb_count = 0;
-var global_player_list = new Array(); // The global player list per page
var global_req_cb = new Array(); // The global request callback array
// Get the mv_embed location if it has not been set
'jui_skin' : 'redmond',
'video_size' : '400x300'
}
+ // the version of mwEmbed
+ $.version = '1.0r21';
/*
- * global flags
+ * some global containers flags
*/
- $.g = {
- 'skin_list' : new Array(),
- 'mv_init_done' : false,
- 'global_cb_count' : 0,
- 'global_player_list' : new Array(), // The global player list per page
- 'global_req_cb' : new Array() // The global request callback array
- }
+ $.skin_list = new Array();
+ $.init_done = false;
+ $.cb_count = 0;
+ $.player_list = new Array(), // The global player list per page
+ $.req_cb = new Array() // The global request callback array
/*
* Language classes $mw.lang
];
//add any requested skins (suports multiple skins per single page)
- if( $mw.g['skin_list'] ){
- for(var i in $mw.g['skin_list'] ){
- depReq[0].push( $mw.g['skin_list'][i] + 'Config' );
+ if( $mw.skin_list ){
+ for(var i in $mw.skin_list ){
+ depReq[0].push( $mw.skin_list[i] + 'Config' );
}
}
* $j(document).ready( function(){ */
function mwdomReady( force ) {
js_log( 'f:mwdomReady:' );
- if( !force && mv_init_done ) {
- js_log( "mv_init_done already done, do nothing..." );
+ if( !force && $mw.init_done ) {
+ js_log( "mw done, do nothing..." );
return false;
}
- mv_init_done = true;
+ $mw.init_done = true;
// Handle the execution of queued functions with jQuery "ready"
- // Check if this page has a video or playlist
+ // Check if this page has a video, audio or playlist tag
var e = [
document.getElementsByTagName( "video" ),
document.getElementsByTagName( "audio" ),
if(e[j][k] && typeof( e[j][k]) == 'object'){
var sn = e[j][k].getAttribute('skin_name')
if( sn && sn != ''){
- $mw.g.skin_list.push( sn );
+ $mw.skin_list.push( sn );
}
}
}
window.onload = function () {
if( temp_f )
temp_f();
- mwdomReady();
+ mwdomReady();
}
/*
});
});
}
+ /*
+ * Sequencer loader
+ */
$.fn.sequencer = function( iObj, callback ) {
// Debugger
iObj['target_sequence_container'] = this.selector;
options.data['format'] = 'json';
// If action is not set, assume query
- if( !options.data['action'] )
+ if( ! options.data['action'] )
options.data['action'] = 'query';
// js_log('do api req: ' + options.url +'?' + jQuery.param(options.data) );
req_url += paramAnd + encodeURIComponent( i ) + '=' + encodeURIComponent( options.data[i] );
paramAnd = '&';
}
- var fname = 'mycpfn_' + ( global_cb_count++ );
+ var fname = 'mycpfn_' + ( $mw.cb_count++ );
_global[ fname ] = callback;
req_url += '&' + options.jsonCB + '=' + fname;
loadExternalJs( req_url );
return urid;
}
// Otherwise, just return the mv_embed version
- return MV_EMBED_VERSION;
+ return $mw.version;
}
/*
* Set the global mv_embed path based on the script's location
* Utility functions
*/
function js_log( string ) {
- ///add any prepend debug strings if nessesary
+ ///add any prepend debug strings if nessesary (used for cross browser)
if( $mw.conf['debug_pre'] )
string = $mw.conf['debug_pre']+ string;
'mwe-embed_site_or_blog' => 'Embed on your site or blog',
'mwe-related_videos' => 'Related videos',
'mwe-seeking' => 'seeking',
+ "mwe-copy-code" => "Copy code",
);
/** Message documentation (Message documentation)
pClass : 'mv-player',
long_time_disp: true,
body_options : true,
+ //default volume layout is "vertical"
+ volume_layout : 'vertical',
height:29,
supports:{
'options':true,
var perc = ui.value/1000;
embedObj.jump_time = seconds2npt( parseFloat( parseFloat(embedObj.getDuration()) * perc ) + embedObj.start_time_sec);
//js_log('perc:' + perc + ' * ' + embedObj.getDuration() + ' jt:'+ this.jump_time);
- embedObj.setStatus( gM('mwe-seek_to', embedObj.jump_time ) );
+ if( _this.long_time_disp ){
+ embedObj.setStatus( gM('mwe-seek_to', embedObj.jump_time ) );
+ }else{
+ embedObj.setStatus( embedObj.jump_time );
+ }
//update the thumbnail / frame
if(embedObj.isPlaying==false){
embedObj.updateThumbPerc( perc );
$opt.hide();
return false;
})
- $opt.find('.vo_showcode').click(function(){
- embedObj.showEmbedCode();
+ $opt.find('.vo_showcode').click(function(){
+ embedObj.displayHTML();
+ embedObj.showShare( $tp.find('.videoOptionsComplete') );
$opt.hide();
return false;
});
-
- //volume binding:
+ this.doVolumeBinding();
+
+ //check if we have any custom skin hooks to run (only one per skin)
+ if( this.addSkinControlHooks && typeof( this.addSkinControlHooks) == 'function')
+ this.addSkinControlHooks();
+ },
+ doVolumeBinding:function(){
+ var embedObj = this.embedObj;
+ var _this = this;
+ var $tp=$j('#' + embedObj.id);
+ //default volume binding:
var hoverOverDelay=false;
$tp.find('.volume_control').unbind().btnBind().click(function(){
$j('#' +embedObj.id).get(0).toggleMute();
}
}
});
-
- //check if we have any custom skin hooks to run (only one per skin)
- if( this.addSkinControlHooks && typeof( this.addSkinControlHooks) == 'function')
- this.addSkinControlHooks();
},
getMvBufferHtml:function(){
return '<div class="ui-slider-range ui-slider-range-min ui-widget-header ' +
},
'volume_control':{
'w':23,
- 'o':function( ctrlObj ){
- return '<div title="' + gM('mwe-volume_control') + '" class="ui-state-default ui-corner-all ui-icon_link rButton volume_control">' +
- '<span class="ui-icon ui-icon-volume-on"></span>' +
- '<div style="position:absolute;display:none;" id="vol_container_'+ctrlObj.id+'" class="vol_container ui-corner-all">' +
- '<div class="volume_bar" id="volume_bar_' + ctrlObj.id + '"></div>' +
- '</div>'+
- '</div>';
+ 'o':function( ctrlObj ){
+ var o='';
+ if ( ctrlObj.volume_layout == 'horizontal' )
+ o+='<div class="ui-slider ui-slider-horizontal rButton volume-slider"></div>';
+
+ o+= '<div title="' + gM('mwe-volume_control') + '" class="ui-state-default ui-corner-all ui-icon_link rButton volume_control">' +
+ '<span class="ui-icon ui-icon-volume-on"></span>';
+
+ if( ctrlObj.volume_layout == 'vertical'){
+ o+='<div style="position:absolute;display:none;" id="vol_container_'+ctrlObj.id+'" class="vol_container ui-corner-all">' +
+ '<div class="volume_bar" id="volume_bar_' + ctrlObj.id + '"></div>' +
+ '</div>';
+ }
+ o+= '</div>';
+ return o;
}
},
'time_display':{
//display time progres
long_time_disp: false,
body_options: false,
+ volume_layout: 'horizontal',
components:{
'play-btn-large' : {
'h' : 55
'<span>' + gM('mwe-menu_btn') + '</span>' +
'</div>'
}
+ },
+ 'time_display':{
+ 'w':70
},
'mv_embedded_options':{
'w':0,
$tp.find('.play-btn-large').fadeOut('fast');
}
});
+
+ //slider:
+ $tp.find('.volume-slider').slider({
+ range: "min",
+ value: 80,
+ min: 0,
+ max: 100,
+ slide: function(event, ui) {
+ embedObj.updateVolumen(ui.value/100);
+ },
+ change: function(event, ui){
+ var level = ui.value/100;
+ if (level==0) {
+ $tp.find('.k-volume span').addClass('ui-icon-volume-off');
+ }else{
+ $tp.find('.k-volume span').removeClass('ui-icon-volume-off');
+ }
+ //only run the onChange event if done by a user slide:
+ if(embedObj.userSlide){
+ embedObj.userSlide=false;
+ embedObj.seeking=true;
+// var perc = ui.value/100;
+ embedObj.updateVolumen(level);
+ }
+ }
+ });
}
}
\ No newline at end of file
.k-menu-screens li a.active, .k-menu-screens li a:hover.active { background-position: -85px -247px;}
.k-menu-screens li a:hover { background-position: -85px -260px;}
.k-menu-screens a { color:#BBBBBB; }
+
+
+.k-menu textarea {
+ background:none repeat scroll 0 0 transparent;
+ border-color:#000000 -moz-use-text-color -moz-use-text-color #000000;
+ border-style:solid none none solid;
+ border-width:2px medium medium 2px;
+ color:#CCCCCC;
+ font:11px arial,sans-serif;
+ height:15px;
+ overflow:hidden;
+ padding-left:2px;
+ width:100%;
+}
+.menu-screen.menu-share button {
+ background:url("images/ksprite.png") no-repeat scroll 0 -81px #D4D4D4;
+ border:1px solid #000000;
+ color:#000000;
+ float:right;
+ height:24px;
+ padding:0 5px 3px;
+ width:84px;
+ font-size:1em;
+}
+.k-player .menu-screen.menu-share div.ui-state-highlight {
+ background:none repeat scroll 0 0 transparent;
+ border-color:#554926;
+ color:#FFE96E;
+ float:left;
+ padding:2px 5px;
+}
+.k-player .menu-screen.menu-share div.ui-state-highlight a {
+ color:#FFE96E;
+ font-weight:bold;
+}
+
+.k-player .volume-slide {
+ width:38px !important;
+}
+.k-player .volume-slider .ui-slider-range {
+ -moz-border-radius:0 0 0 0;
+ background:url("images/ksprite.png") repeat-x scroll -66px -306px transparent;
+ height:17px;
+ position:absolute;
+}
+.k-player .volume-slider a.ui-slider-handle {
+ background:none repeat scroll 0 0 transparent;
+ border:medium none;
+ display:block;
+ height:18px;
+ margin:-3px 5px 0 -1px;
+ position:absolute;
+ width:8px;
+}
\ No newline at end of file
.inOutSlider .ui-slider-handle{
width:8px;
cusror: move;
-}
\ No newline at end of file
+}
+
+
+.videoOptionsComplete textarea {
+ background:none repeat scroll 0 0 transparent;
+ border-color:#333 -moz-use-text-color -moz-use-text-color #333;
+ border-style:solid none none solid;
+ border-width:2px medium medium 2px;
+ color:#CCCCCC;
+ font:11px arial,sans-serif;
+ height:15px;
+ overflow:hidden;
+ padding-left:2px;
+ width:100%;
+}
+.videoOptionsComplete .copycode {
+ background:url("images/ksprite.png") no-repeat scroll 0 -81px #D4D4D4;
+ border:1px solid #000000;
+ color:#000000;
+ float:right;
+ height:24px;
+ padding:0 5px 3px;
+ width:84px;
+ font-size:1em;
+}
+.videoOptionsComplete div.ui-state-highlight {
+ background:none repeat scroll 0 0 transparent;
+ border-color:#554926;
+ color:#FFE96E;
+ float:left;
+ padding:2px 5px;
+}
+.videoOptionsComplete div.ui-state-highlight a {
+ color:#FFE96E;
+ font-weight:bold;
+}
dépôts / lhc / web / wiklou.git / commitdiff