1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2<html xmlns="http://www.w3.org/1999/xhtml"> 3<head> 4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5<meta http-equiv="X-UA-Compatible" content="IE=edge"> 6<title></title> 7<style> 8html{ 9 margin:0 0; 10 padding:0px; 11} 12body{ 13 display: block; 14 overflow:hidden; 15} 16#playerRegion{ 17 width:100%; 18 height:350px; 19 left:0px; 20 top:0px; 21 position:absolute; 22} 23#video_area{ 24 width:100%; 25 height:350px; 26} 27 28video:-webkit-full-screen { max-height: 100%; } 29video:-moz-full-screen { max-height: 100%; } 30</style> 31<script type="text/javascript" src="/smb/js/tools.js"></script> 32<script type="text/javascript" src="/smb/js/jplayer/jquery.jplayer.min.js"></script> 33<link rel="stylesheet" href="/smb/css/jplayer.blue.monday.css" type="text/css"> 34<script type="text/javascript"> 35 36var m = new lang(); 37var g_storage = new myStorage(); 38var g_is_fullscreen = false; 39 40function getUrlVars() 41{ 42 var vars = [], hash; 43 var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); 44 for(var i = 0; i < hashes.length; i++) 45 { 46 hash = hashes[i].split('='); 47 vars.push(hash[0]); 48 vars[hash[0]] = hash[1]; 49 } 50 return vars; 51} 52 53$("document").ready(function() { 54 var loc_lan = String(window.navigator.userLanguage || window.navigator.language).toLowerCase(); 55 var lan = ( g_storage.get('lan') == undefined ) ? loc_lan : g_storage.get('lan'); 56 m.setLanguage(lan); 57 58 $('button#cancel').text(m.getString('btn_close')); 59 60 var this_video = getUrlVars()["v"]; 61 62 $("#jquery_jplayer_1").jPlayer({ 63 64 ready: function () { 65 $(this).jPlayer("setMedia", { 66 m4v: this_video 67 }); 68 }, 69 swfPath: "/smb/js/jplayer/", 70 supplied: "m4v, mp4, m4a", 71 //solution: "flash, html", 72 solution: "html, flash", 73 size: { 74 width: "640px", 75 height: "360px", 76 cssClass: "jp-video-360p" 77 }, 78 errorAlerts: false, 79 warningAlerts: false 80 }); 81 82 $("a.jp-full-screen").click(function(){ 83 84 if($(this).attr("title")=="full screen"){ 85 $(".hover, ul#navigation").hide() 86 } 87 88 /* 89 //parent.fullscreenJqmWindow(); 90 var video = $("video"); 91 92 // Mozilla 93 video.mozRequestFullScreen(); 94 95 // Webkit for video elements only 96 video.webkitEnterFullScreen(); 97 */ 98 99 //doFullScreen(); 100 }); 101 102 103 $("a.jp-restore-screen").click(function(){ 104 if($(this).attr("title")=="restore screen"){ 105 $(".hover, ul#navigation").show() 106 } 107 }); 108}); 109 110function doClose(e) { 111 $("#jquery_jplayer_1").jPlayer("stop"); 112 $("#jquery_jplayer_1").jPlayer("clearMedia"); 113 parent.closeJqmWindow(0); 114}; 115 116function fullscreen(elem) { 117 var domPrefixes = 'Webkit Moz O ms Khtml'.split(' '); 118 119 var prefix; 120 // Mozilla and webkit intialise fullscreen slightly differently 121 for ( var i = -1, len = domPrefixes.length; ++i < len; ) { 122 prefix = domPrefixes[i].toLowerCase(); 123 124 if ( elem[prefix + 'EnterFullScreen'] ) { 125 // Webkit uses EnterFullScreen for video 126 return prefix + 'EnterFullScreen'; 127 break; 128 } 129 else if( elem[prefix + 'RequestFullScreen'] ) { 130 // Mozilla uses RequestFullScreen for all elements and webkit uses it for non video elements 131 return prefix + 'RequestFullScreen'; 132 break; 133 } 134 } 135 136 return false; 137}; 138 139function doFullScreen(e){ 140 141 var user_agent = navigator.userAgent.toLowerCase(); 142 143 if( user_agent.indexOf("msie") > -1 || 144 user_agent.indexOf("firefox") > -1/* || 145 user_agent.indexOf("chrome") > -1*/ ){ 146 alert(user_agent); 147 //var fullScreen = $("#jquery_jplayer_1").jPlayer({fullScreen: "true"}); 148 $("#jquery_jplayer_1").jPlayer("option", "fullScreen", "true"); 149 150 //var playSelector = $("#jquery_jplayer_1").jPlayer("option", "fullScreen", "true"); 151 alert(fullScreen); 152 } 153 else{ 154 155 var $ = function(selector,context){return(context||document).querySelector(selector)}; 156 var video = $("video"); 157 158 if(video){ 159 var fullscreenvideo = fullscreen(document.createElement("video")); 160 161 // Should add prefixed events for potential ms/o or unprefixed support too 162 video.addEventListener("webkitfullscreenchange",function(){ 163 g_is_fullscreen = document.webkitIsFullScreen; 164 }, false); 165 166 video.addEventListener("mozfullscreenchange",function(){ 167 g_is_fullscreen = document.mozFullScreen; 168 }, false); 169 170 video[fullscreenvideo](); 171 } 172 } 173} 174</script> 175</head> 176<body> 177 178<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0"> 179 <tr style='height:350px'> 180 <td> 181 <div id="jp_container_1" class="jp-video jp-video-360p"> 182 <div class="jp-type-single"> 183 <div id="jquery_jplayer_1" class="jp-jplayer" style="width: 640px; height: 360px; "> 184 <video id="jp_video_0" preload="metadata" style="width: 0px; height: 0px; "></video> 185 </div> 186 <div class="jp-gui"> 187 <div class="jp-video-play" style="display: block; "> 188 <a href="javascript:;" class="jp-video-play-icon" tabindex="1">play</a> 189 </div> 190 <div class="jp-interface"> 191 <div class="jp-progress"> 192 <div class="jp-seek-bar" style="width: 100%; "> 193 <div class="jp-play-bar" style="width: 0%; "></div> 194 </div> 195 </div> 196 <div class="jp-duration">00:00</div> 197 <div class="jp-split">/</div> 198 <div class="jp-current-time">00:00</div> 199 <div class="jp-controls-holder"> 200 <ul class="jp-controls"> 201 <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li> 202 <li><a href="javascript:;" class="jp-pause" tabindex="1" style="display: block; ">pause</a></li> 203 <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li> 204 <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li> 205 <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute" style="display: none; ">unmute</a></li> 206 <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li> 207 </ul> 208 <div class="jp-volume-bar"> 209 <div class="jp-volume-bar-value" style="width: 80%; "></div> 210 </div> 211 212 <ul class="jp-toggles"> 213 <li><a href="javascript:;" class="jp-full-screen" tabindex="1" title="full screen">full screen</a></li> 214 <li><a href="javascript:;" class="jp-restore-screen" tabindex="1" title="restore screen" style="display: block; ">restore screen</a></li> 215 </ul> 216 217 </div> 218 </div> 219 </div> 220 </div> 221 </div> 222 </td> 223 </tr> 224 <tr style='height:10px'></tr> 225 <tr> 226 <td> 227 <div class="table_block_footer" style="text-align:right"> 228 <button id="fullscreen" class="btnStyle" onClick="doFullScreen();">fullscreen</button> 229 <button id="cancel" class="btnStyle" onClick="doClose();">Close</button> 230 </div> 231 </td> 232 </tr> 233</table> 234 235</body> 236</html> 237