[23295] | 1 | /*!
|
---|
| 2 | * Replayme Player v1.0.1
|
---|
| 3 | * Based on JQueryUI v1.8.4
|
---|
| 4 | *
|
---|
| 5 | *
|
---|
| 6 | * Copyright 2010, Maxime Rouast
|
---|
| 7 | * Released under the GPL 2 License.
|
---|
| 8 | *
|
---|
| 9 | */
|
---|
| 10 |
|
---|
| 11 |
|
---|
| 12 | var relPosTimer_is_on=0;
|
---|
| 13 | var relpos;
|
---|
| 14 | var user_is_dragging=0;
|
---|
| 15 | var checkStatusTimer;
|
---|
| 16 | var checkVideoSizeTimer;
|
---|
| 17 | var previousHeight=0;
|
---|
| 18 | var previousWidth=0;
|
---|
| 19 | var vlc;
|
---|
| 20 |
|
---|
| 21 |
|
---|
| 22 | //Used for the look and feel of the player
|
---|
| 23 | function checkStatus()
|
---|
| 24 | {
|
---|
| 25 |
|
---|
| 26 | if(vlc.subtitle.count < 1)
|
---|
| 27 | {
|
---|
| 28 | $( "#subtitles" ).button( "option", "disabled", true );
|
---|
| 29 | }
|
---|
| 30 | else if (vlc.subtitle.count > 0)
|
---|
| 31 | {
|
---|
| 32 | $( "#subtitles" ).button( "option", "disabled", false );
|
---|
| 33 | }
|
---|
| 34 |
|
---|
| 35 | if (vlc.input.state == 0) {
|
---|
| 36 | // current media has stopped
|
---|
| 37 | //onStop();
|
---|
| 38 | }
|
---|
| 39 | else if (vlc.input.state == 1) {
|
---|
| 40 | // current media is connecting
|
---|
| 41 | onOpening();
|
---|
| 42 | }
|
---|
| 43 | else if (vlc.input.state == 2) {
|
---|
| 44 | // current media is buffering data
|
---|
| 45 | onBuffering();
|
---|
| 46 | }
|
---|
| 47 | else if (vlc.input.state == 3) {
|
---|
| 48 | // current media is now playing
|
---|
| 49 | onPlaying();
|
---|
| 50 | }
|
---|
| 51 | else if (vlc.input.state == 4) {
|
---|
| 52 | // current media is now paused
|
---|
| 53 | //onPaused();
|
---|
| 54 | }
|
---|
| 55 | else if (vlc.input.state == 5) {
|
---|
| 56 | // current media is stopping
|
---|
| 57 | //onStopping();
|
---|
| 58 | }
|
---|
| 59 | else if (vlc.input.state == 6) {
|
---|
| 60 | // current media has finished playback
|
---|
| 61 | onEnd();
|
---|
| 62 | }
|
---|
| 63 |
|
---|
| 64 | checkStatusTimer=setTimeout(function(){checkStatus()},1000);
|
---|
| 65 | };
|
---|
| 66 |
|
---|
| 67 | function onOpening()
|
---|
| 68 | {
|
---|
| 69 | $('#play').button('option', {
|
---|
| 70 | label: 'pause',
|
---|
| 71 | icons: {
|
---|
| 72 | primary: 'ui-icon-pause'
|
---|
| 73 | }
|
---|
| 74 | });
|
---|
| 75 | document.getElementById("status").innerHTML = " <img src='" + bufferImgURL + "'> Connecting...";
|
---|
| 76 | }
|
---|
| 77 |
|
---|
| 78 | function onBuffering()
|
---|
| 79 | {
|
---|
| 80 | $('#play').button('option', {
|
---|
| 81 | label: 'pause',
|
---|
| 82 | icons: {
|
---|
| 83 | primary: 'ui-icon-pause'
|
---|
| 84 | }
|
---|
| 85 | });
|
---|
| 86 | document.getElementById("status").innerHTML = " <img src='" + bufferImgURL + "'> Buffering...";
|
---|
| 87 | }
|
---|
| 88 |
|
---|
| 89 | function onPlaying()
|
---|
| 90 | {
|
---|
| 91 | $('#play').button('option', {
|
---|
| 92 | label: 'pause',
|
---|
| 93 | icons: {
|
---|
| 94 | primary: 'ui-icon-pause'
|
---|
| 95 | }
|
---|
| 96 | });
|
---|
| 97 | document.getElementById("status").innerHTML = "";
|
---|
| 98 | }
|
---|
| 99 |
|
---|
| 100 | function onEnd()
|
---|
| 101 | {
|
---|
| 102 | stop();
|
---|
| 103 | $('#play').button('option', {
|
---|
| 104 | label: 'play',
|
---|
| 105 | icons: {
|
---|
| 106 | primary: 'ui-icon-play'
|
---|
| 107 | }
|
---|
| 108 | });
|
---|
| 109 | $( "#subtitles" ).button( "option", "disabled", true );
|
---|
| 110 | }
|
---|
| 111 |
|
---|
| 112 | function prepare(mrl)
|
---|
| 113 | {
|
---|
| 114 | //Wait for the player to be initialized before doing anything
|
---|
| 115 | vlc = document.getElementById("vlc");
|
---|
| 116 | var safeMRL = encodeURI(mrl);
|
---|
| 117 | setTimeout(function(){vlc.playlist.add(safeMRL)},350);
|
---|
| 118 | setTimeout(function(){play()},500);
|
---|
| 119 | setTimeout(function(){checkStatus()},500);
|
---|
| 120 | };
|
---|
| 121 |
|
---|
| 122 | function play()
|
---|
| 123 | {
|
---|
| 124 | vlc.playlist.play();
|
---|
| 125 | vlc.video.deinterlace.enable("blend");
|
---|
| 126 | //if (relPosTimer_is_on!=1)
|
---|
| 127 | //{
|
---|
| 128 | relPosTimer_is_on=1;
|
---|
| 129 | showRelPos();
|
---|
| 130 | //}
|
---|
| 131 | };
|
---|
| 132 |
|
---|
| 133 | function showRelPos()
|
---|
| 134 | {
|
---|
| 135 | if (relPosTimer_is_on=1)
|
---|
| 136 | {
|
---|
| 137 | if (vlc.input.position>=0 && vlc.input.position<=1 && user_is_dragging==0)
|
---|
| 138 | {
|
---|
| 139 | $('#slider').slider( "option", "value", vlc.input.position );
|
---|
| 140 | }
|
---|
| 141 | relpos=setTimeout(function(){showRelPos()},250);
|
---|
| 142 | }
|
---|
| 143 | };
|
---|
| 144 |
|
---|
| 145 | function stop()
|
---|
| 146 | {
|
---|
| 147 | clearTimeout(relpos);
|
---|
| 148 | clearTimeout(checkStatusTimer);
|
---|
| 149 | relPosTimer_is_on=0;
|
---|
| 150 | vlc.playlist.stop();
|
---|
| 151 | vlc.subtitle.track = 0;
|
---|
| 152 | $('#slider').slider( "option", "value", 0 );
|
---|
| 153 | $( "#subtitles" ).button( "option", "label", "Subtitles");
|
---|
| 154 | };
|
---|
| 155 |
|
---|
| 156 | function togglePause()
|
---|
| 157 | {
|
---|
| 158 | vlc.playlist.togglePause();
|
---|
| 159 | };
|
---|
| 160 |
|
---|
| 161 | function toggleMute()
|
---|
| 162 | {
|
---|
| 163 | vlc.audio.toggleMute();
|
---|
| 164 | };
|
---|
| 165 |
|
---|
| 166 | function getBrowserWidth()
|
---|
| 167 | {
|
---|
| 168 | xWidth = null;
|
---|
| 169 | if(window.screen != null)
|
---|
| 170 | xWidth = window.screen.availWidth;
|
---|
| 171 |
|
---|
| 172 | if(window.innerWidth != null)
|
---|
| 173 | xWidth = window.innerWidth;
|
---|
| 174 |
|
---|
| 175 | if(document.body != null) {
|
---|
| 176 | if ((typeof document.compatMode != "undefined")
|
---|
| 177 | && (document.compatMode == "CSS1Compat")) {
|
---|
| 178 | // in Strict mode
|
---|
| 179 | xWidth = document.documentElement.clientWidth;
|
---|
| 180 | }
|
---|
| 181 | else {
|
---|
| 182 | // Quirks mode
|
---|
| 183 | xWidth = document.body.clientWidth;
|
---|
| 184 | }
|
---|
| 185 | }
|
---|
| 186 |
|
---|
| 187 | return xWidth;
|
---|
| 188 | };
|
---|
| 189 |
|
---|
| 190 | function getBrowserHeight() {
|
---|
| 191 | xHeight = null;
|
---|
| 192 | if(window.screen != null)
|
---|
| 193 | xHeight = window.screen.availHeight;
|
---|
| 194 |
|
---|
| 195 | if(window.innerHeight != null)
|
---|
| 196 | xHeight = window.innerHeight;
|
---|
| 197 |
|
---|
| 198 | if(document.body != null){
|
---|
| 199 | if ((typeof document.compatMode != "undefined")
|
---|
| 200 | && (document.compatMode == "CSS1Compat")) {
|
---|
| 201 | // in Strict mode
|
---|
| 202 | xHeight = document.documentElement.clientHeight;
|
---|
| 203 | }
|
---|
| 204 | else {
|
---|
| 205 | // Quirks mode
|
---|
| 206 | xHeight = document.body.clientHeight;
|
---|
| 207 | }
|
---|
| 208 | }
|
---|
| 209 | return xHeight;
|
---|
| 210 | };
|
---|
| 211 |
|
---|
| 212 | function setFullscreenSize()
|
---|
| 213 | {
|
---|
| 214 | var height = getBrowserHeight() - 8;
|
---|
| 215 | var width = getBrowserWidth() - 8;
|
---|
| 216 | $( "#replaymePlayer" ).dialog( "option", "position", ['left','top'] );
|
---|
| 217 | $( "#replaymePlayer" ).dialog( "option", "height", height );
|
---|
| 218 | $( "#replaymePlayer" ).dialog( "option", "width", width );
|
---|
| 219 | setPlayerSize();
|
---|
| 220 | checkVideoSizeTimer=setTimeout(function(){setFullscreenSize()},1000);
|
---|
| 221 | }
|
---|
| 222 |
|
---|
| 223 | function toggleFullscreen()
|
---|
| 224 | {
|
---|
| 225 | vlc.video.toggleFullscreen();
|
---|
| 226 |
|
---|
| 227 | if (vlc.video.fullscreen == true)
|
---|
| 228 | {
|
---|
| 229 | previousHeight = $( "#replaymePlayer" ).dialog( "option", "height" );
|
---|
| 230 | previousWidth = $( "#replaymePlayer" ).dialog( "option", "width" );
|
---|
| 231 | setFullscreenSize();
|
---|
| 232 | }
|
---|
| 233 | else if (vlc.video.fullscreen == false)
|
---|
| 234 | {
|
---|
| 235 | clearTimeout(checkVideoSizeTimer);
|
---|
| 236 | $( "#replaymePlayer" ).dialog( "option", "height", previousHeight );
|
---|
| 237 | $( "#replaymePlayer" ).dialog( "option", "width", previousWidth );
|
---|
| 238 | setPlayerSize();
|
---|
| 239 | $( "#replaymePlayer" ).dialog( "option", "position", 'center' );
|
---|
| 240 | }
|
---|
| 241 | };
|
---|
| 242 |
|
---|
| 243 | function changeSubtitles()
|
---|
| 244 | {
|
---|
| 245 | if (vlc.subtitle.track == vlc.subtitle.count - 1)
|
---|
| 246 | {
|
---|
| 247 | vlc.subtitle.track = 0;
|
---|
| 248 | }
|
---|
| 249 | else
|
---|
| 250 | {
|
---|
| 251 | vlc.subtitle.track = vlc.subtitle.track + 1;
|
---|
| 252 | }
|
---|
| 253 | $( "#subtitles" ).button( "option", "label", "Subtitles: " + vlc.subtitle.description(vlc.subtitle.track) );
|
---|
| 254 | };
|
---|
| 255 |
|
---|
| 256 | function seek()
|
---|
| 257 | {
|
---|
| 258 | vlc.input.position = $('#slider').slider( "option", "value" );
|
---|
| 259 | user_is_dragging=0;
|
---|
| 260 | };
|
---|
| 261 |
|
---|
| 262 | function setPlayerSize()
|
---|
| 263 | {
|
---|
| 264 | var width = 0, height = 0;
|
---|
| 265 |
|
---|
| 266 | width = $( "#replaymePlayer" ).dialog( "option", "width" );
|
---|
| 267 | height = $( "#replaymePlayer" ).dialog( "option", "height" );
|
---|
| 268 | width = width - 25;
|
---|
| 269 | height = height - 130;
|
---|
| 270 |
|
---|
| 271 | if (document.getElementById("vlc") != null)
|
---|
| 272 | {
|
---|
| 273 | document.getElementById("vlc").style.height = height + "px";
|
---|
| 274 | document.getElementById("vlc").style.width = width + "px";
|
---|
| 275 | }
|
---|
| 276 | };
|
---|
| 277 |
|
---|
| 278 | //JQuery Stuff
|
---|
| 279 | $(function() {
|
---|
| 280 |
|
---|
| 281 | // Open Video Player link
|
---|
| 282 | $('#open_player_link').click(function(){
|
---|
| 283 | $('#replaymePlayer').dialog('open');
|
---|
| 284 | return false;
|
---|
| 285 | });
|
---|
| 286 |
|
---|
| 287 |
|
---|
| 288 | //Video Player window
|
---|
| 289 | $("#replaymePlayer").dialog({
|
---|
| 290 | autoOpen: false,
|
---|
| 291 | height: 620,
|
---|
| 292 | width: 645,
|
---|
| 293 | modal: true,
|
---|
| 294 | beforeclose: function(event, ui) {
|
---|
| 295 | onEnd();
|
---|
| 296 | $('#mute').button({
|
---|
| 297 | label: 'mute',
|
---|
| 298 | icons: {
|
---|
| 299 | primary: 'ui-icon-volume-on'
|
---|
| 300 | }
|
---|
| 301 | });
|
---|
| 302 | $( "#subtitles" ).button( "option", "label", "Subtitles");
|
---|
| 303 | },
|
---|
| 304 | resizeStart: function(event, ui) {
|
---|
| 305 | document.getElementById("vlc").style.height = "70%";
|
---|
| 306 | document.getElementById("vlc").style.width = "100%";},
|
---|
| 307 | resizeStop: function(event, ui) { setPlayerSize(); }
|
---|
| 308 | });
|
---|
| 309 |
|
---|
| 310 | //Hover states on the Video Player link
|
---|
| 311 | $('#open_player_link, ul#icons li').hover(
|
---|
| 312 | function() { $(this).addClass('ui-state-hover'); },
|
---|
| 313 | function() { $(this).removeClass('ui-state-hover'); }
|
---|
| 314 | );
|
---|
| 315 |
|
---|
| 316 |
|
---|
| 317 | //Player toolbar:
|
---|
| 318 | $('#play').button({
|
---|
| 319 | text: false,
|
---|
| 320 | icons: {
|
---|
| 321 | primary: 'ui-icon-play'
|
---|
| 322 | }
|
---|
| 323 | })
|
---|
| 324 | .click(function() {
|
---|
| 325 | var options;
|
---|
| 326 | if ($(this).text() == 'play') {
|
---|
| 327 | play();
|
---|
| 328 | options = {
|
---|
| 329 | label: 'pause',
|
---|
| 330 | icons: {
|
---|
| 331 | primary: 'ui-icon-pause'
|
---|
| 332 | }
|
---|
| 333 | };
|
---|
| 334 | } else {
|
---|
| 335 | togglePause();
|
---|
| 336 | options = {
|
---|
| 337 | label: 'play',
|
---|
| 338 | icons: {
|
---|
| 339 | primary: 'ui-icon-play'
|
---|
| 340 | }
|
---|
| 341 | };
|
---|
| 342 | }
|
---|
| 343 | $(this).button('option', options);
|
---|
| 344 | });
|
---|
| 345 |
|
---|
| 346 | $('#stop').button({
|
---|
| 347 | text: false,
|
---|
| 348 | icons: {
|
---|
| 349 | primary: 'ui-icon-stop'
|
---|
| 350 | }
|
---|
| 351 | })
|
---|
| 352 | .click(function() {
|
---|
| 353 | stop();
|
---|
| 354 | $('#play').button('option', {
|
---|
| 355 | label: 'play',
|
---|
| 356 | icons: {
|
---|
| 357 | primary: 'ui-icon-play'
|
---|
| 358 | }
|
---|
| 359 | });
|
---|
| 360 | });
|
---|
| 361 |
|
---|
| 362 | $('#mute').button({
|
---|
| 363 | text: false,
|
---|
| 364 | icons: {
|
---|
| 365 | primary: 'ui-icon-volume-on'
|
---|
| 366 | }
|
---|
| 367 | })
|
---|
| 368 | .click(function() {
|
---|
| 369 | var options;
|
---|
| 370 | if ($(this).text() == 'mute on') {
|
---|
| 371 | toggleMute();
|
---|
| 372 | options = {
|
---|
| 373 | label: 'mute off',
|
---|
| 374 | icons: {
|
---|
| 375 | primary: 'ui-icon-volume-on'
|
---|
| 376 | }
|
---|
| 377 | };
|
---|
| 378 | } else {
|
---|
| 379 | toggleMute();
|
---|
| 380 | options = {
|
---|
| 381 | label: 'mute on',
|
---|
| 382 | icons: {
|
---|
| 383 | primary: 'ui-icon-volume-off'
|
---|
| 384 | }
|
---|
| 385 | };
|
---|
| 386 | }
|
---|
| 387 | $(this).button('option', options);
|
---|
| 388 | });
|
---|
| 389 |
|
---|
| 390 | $('#fullscreen').button({
|
---|
| 391 | text: false,
|
---|
| 392 | icons: {
|
---|
| 393 | primary: 'ui-icon-arrow-4-diag'
|
---|
| 394 | }
|
---|
| 395 | })
|
---|
| 396 | .click(function() {
|
---|
| 397 | toggleFullscreen();
|
---|
| 398 | });
|
---|
| 399 |
|
---|
| 400 | $('#subtitles').button({
|
---|
| 401 | icons: {primary: 'ui-icon-grip-dotted-horizontal'},
|
---|
| 402 | disabled: true
|
---|
| 403 | })
|
---|
| 404 | .click(function() {
|
---|
| 405 | changeSubtitles();
|
---|
| 406 | });
|
---|
| 407 |
|
---|
| 408 | //Seeking bar
|
---|
| 409 | $('#slider').slider({
|
---|
| 410 | start: function(event, ui) {user_is_dragging=1;},
|
---|
| 411 | stop: function(event, ui) {seek();},
|
---|
| 412 | animate: true,
|
---|
| 413 | min: 0,
|
---|
| 414 | max: 1,
|
---|
| 415 | step: 0.000125
|
---|
| 416 | });
|
---|
| 417 |
|
---|
| 418 | }); |
---|