Simple Video Tag Usage

From e37ab6ec88d3cf39a6c337fc1509e51a1286a4f0 Mon Sep 17 00:00:00 2001 From: Michael Dale Date: Wed, 19 Aug 2009 18:48:12 +0000 Subject: [PATCH] * minor updates --- .../kPlayer_Simple_Video_Tag.html | 35 +++++ js2/mwEmbed/libEmbedVideo/embedVideo.js | 45 +++--- js2/mwEmbed/mv_embed.js | 7 +- js2/mwEmbed/skins/ctrlBuilder.js | 8 +- js2/mwEmbed/skins/mvpcf/styles.css | 143 ++---------------- 5 files changed, 89 insertions(+), 149 deletions(-) create mode 100644 js2/mwEmbed/example_usage/kPlayer_Simple_Video_Tag.html diff --git a/js2/mwEmbed/example_usage/kPlayer_Simple_Video_Tag.html b/js2/mwEmbed/example_usage/kPlayer_Simple_Video_Tag.html new file mode 100644 index 0000000000..4dca7a6322 --- /dev/null +++ b/js2/mwEmbed/example_usage/kPlayer_Simple_Video_Tag.html @@ -0,0 +1,35 @@ + + + + Simple Video Tag Usage + + + + +

Simple Video Tag Usage

+once you include: mv_embed.js on any remote page you can then use the video tag like so: + +
+
+ + + + +

Sample Embed
+ Simple video Embed: +

<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>

+

+ + + diff --git a/js2/mwEmbed/libEmbedVideo/embedVideo.js b/js2/mwEmbed/libEmbedVideo/embedVideo.js index 6dd6f6bb0c..38d4879c11 100644 --- a/js2/mwEmbed/libEmbedVideo/embedVideo.js +++ b/js2/mwEmbed/libEmbedVideo/embedVideo.js @@ -1336,15 +1336,15 @@ embedVideo.prototype = { if(this.controls){ js_log("f:getHTML:AddControls"); - html_code +='

'; + html_code += '

'; html_code += this.getControlsHTML(); - html_code +='

'; + html_code += '

'; //block out some space by encapulating the top level div if($j(this).parents('.k-player').length==0){ $j(this).wrap('

' - ); + ); } } @@ -1548,8 +1548,8 @@ embedVideo.prototype = { getPlayButton:function(id){ if(!id)id=this.id; return '

'+ + 'style="left:'+((this.playerPixelWidth()-120)/2)+'px;'+ + 'top:' + ((this.playerPixelHeight()-56)/2) + 'px;">'+ '

'; }, doLinkBack:function(){ @@ -1576,19 +1576,26 @@ embedVideo.prototype = { showShare:function($target){ var embed_code = this.getEmbeddingHTML(); var o = ''; - if(this.linkback){ - o+='Share Clip via Link '+ - '

'; - } - o+='Embed Clip in Blog or Site
'+ - ''+ - 'Read This before embeding.'+ - '

'+ - ' '+ - ' '+ - '

'; + //@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+= '

Share This Video

\n' + + '

Embed on your site or blog
' + this.linkback + '

\n' + + '

\n' + + ' \n' + + '

' + + 'Read This before embeding!

\n' + + '' + +// ' '+ +// ' '+ + js_log("should set share: " + o); $target.html(o); }, @@ -2122,6 +2129,8 @@ embedVideo.prototype = { setStatus:function(value){ var id = (this.pc)?this.pc.pp.id:this.id; //update status: + //check if short or long time desc: + //$j('#mv_time_'+id).html(value); $j('#'+this.id + ' .k-timer').html(value); } diff --git a/js2/mwEmbed/mv_embed.js b/js2/mwEmbed/mv_embed.js index 3fa4710090..179bb51d37 100644 --- a/js2/mwEmbed/mv_embed.js +++ b/js2/mwEmbed/mv_embed.js @@ -28,7 +28,8 @@ var MV_EMBED_VERSION = '1.0r19'; * @@ more config valuse on the way ;) */ var defaultMwConfig = { - 'skin_name': 'mvpcf', + 'skin_name': 'kskin', + 'jui_skin': 'redmond', 'video_size':'400x300' } @@ -49,7 +50,7 @@ var mediaWiki_mvEmbed_path = 'js2/mwEmbed/'; var global_player_list = new Array(); //the global player list per page var global_req_cb = new Array(); //the global request callback array var _global = this; //global obj -var mv_init_done=false; +var mv_init_done = false; var global_cb_count =0; /*parseUri class parses URIs:*/ @@ -62,7 +63,7 @@ if( !mv_embed_path ){ } //setup the skin path: -var mv_jquery_skin_path = mv_embed_path + 'jquery/jquery.ui/themes/redmond/'; +var mv_jquery_skin_path = mv_embed_path + 'jquery/jquery.ui/themes/' +mwConfig['jui_skin'] + '/'; var mv_skin_img_path = mv_embed_path + 'skins/' + mwConfig['skin_name'] + '/images/'; var mv_default_thumb_url = mv_skin_img_path + 'vid_default_thumb.jpg'; diff --git a/js2/mwEmbed/skins/ctrlBuilder.js b/js2/mwEmbed/skins/ctrlBuilder.js index 1045474241..5fa20316ad 100644 --- a/js2/mwEmbed/skins/ctrlBuilder.js +++ b/js2/mwEmbed/skins/ctrlBuilder.js @@ -1,6 +1,10 @@ //set the dismissNativeWarn flag: _global['dismissNativeWarn'] = false; +var baseSkin = function(){ + return this.init(); +} + var ctrlBuilder = { height:29, supports:{ @@ -14,6 +18,8 @@ var ctrlBuilder = { 'credits', ], default_menu_item:'download', + //define skin path + getControls:function( embedObj ){ js_log('f:controlsBuilder:: opt:'); this.id = (embedObj.pc)?embedObj.pc.pp.id:embedObj.id; @@ -410,7 +416,7 @@ var ctrlBuilder = { 'w':50, 'o':function(){ return '' } } diff --git a/js2/mwEmbed/skins/mvpcf/styles.css b/js2/mwEmbed/skins/mvpcf/styles.css index f0f979a4cd..8f98781875 100644 --- a/js2/mwEmbed/skins/mvpcf/styles.css +++ b/js2/mwEmbed/skins/mvpcf/styles.css @@ -130,7 +130,8 @@ div.floatleft, table.floatleft { */ -.videoPlayer .lButton { +/*.videoPlayer .lButton {*/ +.k-player button{ cursor:pointer; float:left; list-style:none outside none; @@ -138,7 +139,7 @@ div.floatleft, table.floatleft { padding:4px 0; width: 24px; height:16px; - position:relative; + /*position:relative;*/ } .videoPlayer .rButton { cursor:pointer; @@ -156,13 +157,13 @@ div.floatleft, table.floatleft { height: 100%; width: 100%; } -.videoPlayer .volume_icon { - float: right; +/*.videoPlayer .volume_icon {*/ +.k-volume{ + float: left; display: inline; width: 22px; height: 29px; - padding: 0 0 0 0; - + padding: 0 0 0 0; } .volume_on { background: url(images/player_volume_tag.png) 0 8px no-repeat; @@ -189,8 +190,8 @@ div.floatleft, table.floatleft { cursor: pointer; } - -.videoPlayer .time { +.k-timer{ +/*.videoPlayer .time {*/ line-height: 32px; height: 29px; overflow: visible; @@ -201,7 +202,8 @@ div.floatleft, table.floatleft { border:none; } -.videoPlayer .play_head{ +/*.videoPlayer .play_head{*/ +.j-scrubber{ float: left; display: inline; height: 10px; @@ -209,7 +211,8 @@ div.floatleft, table.floatleft { margin-top:10px; } -.play_head .ui-slider-handle{ +/*.play_head .ui-slider-handle{*/ +.j-scrubber .ui-slider-handle{ width:10px; height:15px; margin-left:-5px; @@ -741,120 +744,6 @@ ui-widget-overlay{ left:-1px; } - -/*** player styles ***/ - -.k-player { width:400px; height:340px; position:relative;} /* inline via jq */ -.k-player * { padding:0; margin:0;} /* inline via jq */ - .k-edit-bar { } - .k-edit-bar a { width:33px; padding: 1px 0 0; display:block; text-align:center; font-weight:bold; color:#888; text-decoration:none; background:#F2F2F2;} - - .k-video { width:400px; height:300px; background:#000; margin-bottom:1px;} /* h & w inline via jq */ - .k-control-bar { height:21px; padding: 2px 0 0 6px; border:none; margin-top:1px; background: url(images/ksprite.png) repeat-x 0 -81px; font: normal 11px arial,sans-serif; color:#555;} - .k-control-bar button, .k-control-bar div.ui-slider, .k-control-bar div.k-timer { float:left;} - .k-timer { width:36px; margin-top:2px; overflow:hidden;} - .k-volume-slider { width:26px;} - .k-control-bar .k-options { width:50px; height:22px; margin-top:-2px; border: solid 1px #aaa !important; border-top:none; float:right; font: bold 11px arial,sans-serif; color:#555;} - .k-player span.ui-icon.ui-icon-k-menu { width:auto; padding-left:2px; text-indent:0; background:none; outline:none; cursor:default;} - - .k-menu { width:400px; height:300px; border:none; background:#181818; position:absolute; top:0; left:0; z-index:999; display:none} /* h, w, top inline via jq top:15px*/ - ul.k-menu-bar{ height:128px; padding: 0 0 5px;position:absolute; bottom:5px;right:0px; list-style: none outside none; background: url(images/ksprite.png) -99px -104px no-repeat;} /* eventually: mtop inline via jq */ - .k-menu-bar li a { display:block; width:49px; height:32px; margin-left:1px; text-indent:99999px; background: url(images/ksprite.png) -51px -110px no-repeat; overflow:hidden;} - .k-menu-bar li a:hover { background-position: -1px -110px;} - .k-menu-bar li.k-download-btn a { background-position: -51px -141px;} - .k-menu-bar li.k-download-btn a:hover { background-position: -1px -141px;} - .k-menu-bar li.k-share-btn a { background-position: -51px -172px;} - .k-menu-bar li.k-share-btn a:hover { background-position: -1px -172px;} - .k-menu-bar li.k-credits-btn a { background-position: -51px -203px;} - .k-menu-bar li.k-credits-btn a:hover { background-position: -1px -203px;} - -.k-menu-screens { width:320px; padding: 13px 10px 15px 15px; float:left;} /* w & h inline via jq */ - .k-menu-screens h2 { padding: 0 0 5px 1px; clear:both; font-size:12px; color:#666;} - .k-menu-screens p { margin: 6px 0;} - .k-menu-screens a { ;} - .k-menu-screens a img { border:none;} - .k-menu-screens ul { padding:0; margin: 6px 0 0; list-style: none outside none;} - -.k-edit-screen { width:370px; height:223px; padding-top:77px; text-align:center; background:#181818; color:#fff;} - .k-edit-screen div { } - .k-edit-screen a { color:#7BB8FC;} - .k-edit-screen a img { border:none;} - -/* end player */ - -.k-slide-window { overflow:hidden;} -.k-screen.k-credits ul { float:left;} -.k-screen.k-credits li { height:39px; padding: 11px 11px 11px 11px; margin-bottom:12px; display:block; background:#333;} - .k-screen.k-credits li a { padding:0; background:none;} - .k-screen.k-credits li img { float:left; background:blue;} - .k-screen.k-credits li div { height:39px; padding-left:11px; floats:left; overflow:hidden;} - - a.k-prev-credit, a.k-next-credit { width:65px; height:28px; margin: -13px auto -6px; display:block; background: url(images/ksprite.png) 0px -320px no-repeat;} - a.k-next-credit { margin: 0 0 1px; position:absolute; bottom:0; background-position: -0px -290px;} - a:hover.k-prev-credit { background-position: 0px -238px;} - a:hover.k-next-credit { background-position: 0px -260px;} - - .k-logo { margin:8px 0 0 1px; display:block;} - - .k_field_wrap { border: solid 1px #444; margin-bottom:7px;} - .k-screen.k-share button { width:70px; padding:2px 5px 3px; border:1px solid #000; float:right; background: #D4D4D4 url(images/ksprite.png) no-repeat -32px 0; color:#000; float:right;} - .k-menu textarea { width:100%; height:15px; border: solid 2px #000; border-bottom:none; border-right:none; background:transparent; color:#ccc; overflow:hidden;} - - .k-screen.k-share div.ui-state-highlight { width:90px; padding:2px 5px; border-color:#554926; float:left; background:none; color:#FFE96E;} - .k-screen.k-share div.ui-state-highlight a { color:#FFE96E; font-weight:bold;} - .k-screen.k-share div.ui-state-highlight a:hover { } - -.k-menu-screens li { height:14px; margin-bottom:6px;} -.k-menu-screens li a { padding-left:22px; background:url(images/ksprite.png) no-repeat -85px -274px; text-decoration:none;} -.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-options.ui-state-hover { color:blue;} - -.k-players { display:none} -.k-credits { display:nones} - -.k-player .ui-state-default .ui-icon, .k-player .ui-state-hover .ui-icon { background: url(images/ksprite.png) no-repeat 0 -48px;} -.k-player .ui-state-default .ui-icon-play { background:url(images/ksprite.png) no-repeat 0 0;} -.k-player .ui-state-hover .ui-icon-play { background-position: -16px 0;} - -.k-player .ui-state-default .ui-icon-pause { background:url(images/ksprite.png) no-repeat 0 -17px;} -.k-player .ui-state-hover .ui-icon-pause { background-position: -16px -17px;} - - .k-player .ui-state-default .ui-icon-arrow-4-diag { background-position: 0 -32px;} /* fullscreen */ - .k-player .ui-state-hover .ui-icon-arrow-4-diag { background-position: -16px -32px;} - .k-player .ui-state-default .ui-icon-volume-on, .k-player .ui-state-hover .ui-icon-volume-off, { margin-left:-6px; background-position: -16px -48px;} - .k-player .ui-state-hover .ui-icon-volume-on, .k-player .ui-state-default .ui-icon-volume-off { margin-left:-6px; background-position: 0 -48px;} - - .k-control-bar .ui-slider { height:8px; border: solid 1px #eee; margin: 4px 10px 0 7px; position:relative; background:url(images/ksprite.png) repeat-x 0 -350px;} - .k-control-bar .ui-slider-handle { width:8px; height:8px; border: solid 1px #888; margin: -1px 0 0 -5px; display:block; position:relative; top:0; background: url(images/ksprite.png) no-repeat -67px -341px; position:absolute;} - .k-control-bar .ui-slider-range { height:8px; position:absolute; background: url(images/ksprite.png) repeat-x 0 -368px; -moz-border-radius:5px; -webkit-border-radius:5px;} - .k-control-bar .ui-slider-buffer { height:8px; position:absolute; background: url(images/ksprite.png) repeat-x 0 -359px; -moz-border-radius:5px; -webkit-border-radius:5px;} - - .k-control-bar .ui-slider.k-volume-slider { height:15px; margin: 2px 3px 0 -4px; /* ie = m: 3 3 0 -2 */ border:none; background-position: -66px -323px; -moz-border-radius:0px; -webkit-border-radius:0px;} - .k-control-bar .k-volume-slider a.ui-slider-handle { width:8px; height:18px; margin: -3px 5px 0 -1px; border:none; display:block; position:absolute; background:none;} - .k-control-bar .k-volume-slider a:hover.ui-slider-handle { border: solid 1px #999;} - .k-control-bar .k-volume-slider .ui-slider-range { height:17px; position:absolute; background: url(images/ksprite.png) repeat-x -66px -306px; -moz-border-radius:0; -webkit-border-radius:0;} - - .play-btn-large { width:120px; height:55px; border:none; background: url(images/ksprite.png) no-repeat 28px -433px; position:absolute; cursor:pointer;} /*.ui-state-default */ - .play-btn-large.ui-state-hover { background: url(images/ksprite.png) no-repeat 28px -377px; } - - .k-volume.ui-state-hover { margin-left:6px; } - - - /* redmond overrides */ - .k-player button.ui-state-default, button.ui-state-hover { background:none; border:none;} - - /* end redmond overrides*/ - - - /* move to ie css */ - .k-volume-slider span, span.ui-icon-play, span.ui-icon-volume-on, button.k-fullscreen { *margin-top:-1px;} - span.ui-icon-volume-on { *margin-left:0 !important;} - .ui-state-hover.k-volume { *margin-left:0 !important;} - span.ui-icon-k-menu { *margin-top:3px;} - .k-control-bar .ui-slider.k-volume-slider { *margin-left:-2px;} - /* end css */ - - -/*** end player ***/ \ No newline at end of file +.play-btn{ + width: 24px; +} \ No newline at end of file -- 2.20.1