308 } |
310 } |
309 var videoid = "video_" + media.id, |
311 var videoid = "video_" + media.id, |
310 videoEl = $('<video>'), |
312 videoEl = $('<video>'), |
311 width = $(".video").width(), |
313 width = $(".video").width(), |
312 height = $(".video").height(), |
314 height = $(".video").height(), |
313 /* |
|
314 mp4_file = videourl.replace(/\.webm$/i,'.mp4'), |
315 mp4_file = videourl.replace(/\.webm$/i,'.mp4'), |
315 webm_file = videourl.replace(/\.mp4$/i,'.webm'), |
316 webm_file = videourl.replace(/\.mp4$/i,'.webm'), |
316 */ |
317 videourl = (can_play_mp4 ? mp4_file : webm_file); |
317 mp4_src = $('<source>'); |
|
318 /* |
|
319 webm_src = $('<source>'), |
|
320 */ |
|
321 mp4_src.attr({ |
|
322 src: videourl, //mp4_file, |
|
323 type: "video/mp4" |
|
324 }); |
|
325 /* |
|
326 webm_src.attr({ |
|
327 src: webm_file, |
|
328 type: "video/webm" |
|
329 }); |
|
330 */ |
|
331 videoEl.attr({ |
|
332 id : videoid, |
|
333 width : width, |
|
334 height : height |
|
335 }).css({ |
|
336 position : "absolute", |
|
337 left: 0, |
|
338 top: 0, |
|
339 width : width, |
|
340 height : height |
|
341 }); |
|
342 videoEl.append(mp4_src); //.append(webm_src); |
|
343 $(".video").append(videoEl); |
|
344 |
318 |
345 media.show = function() { |
319 media.show = function() { |
346 videoEl.show(); |
320 |
347 } |
321 if (document.getElementById(videoid)) { |
|
322 return; |
|
323 } |
|
324 |
|
325 media.loaded = false; |
|
326 media.paused = true; |
|
327 var videoSelector = $('<video>'); |
|
328 |
|
329 videoSelector.attr({ |
|
330 id : videoid, |
|
331 src : videourl, |
|
332 width : width, |
|
333 height : height |
|
334 }).css({ |
|
335 position : "absolute", |
|
336 left: 0, |
|
337 top: 0, |
|
338 width : "100%", |
|
339 height : "100%" |
|
340 }); |
|
341 |
|
342 $(".video").append(videoSelector); |
|
343 |
|
344 var videoElement = document.getElementById(videoid); |
|
345 |
|
346 // Binding DOM events to media |
|
347 |
|
348 function getVolume() { |
|
349 media.muted = videoElement.muted; |
|
350 media.volume = videoElement.volume; |
|
351 } |
|
352 |
|
353 videoSelector.on("loadedmetadata", function() { |
|
354 getVolume(); |
|
355 media.loaded = true; |
|
356 media.trigger("loadedmetadata"); |
|
357 media.trigger("volumechange"); |
|
358 }) |
|
359 |
|
360 videoSelector.on("timeupdate", function() { |
|
361 media.trigger("timeupdate", new IriSP.Model.Time(1000*videoElement.currentTime)); |
|
362 }); |
|
363 |
|
364 videoSelector.on("volumechange", function() { |
|
365 getVolume(); |
|
366 media.trigger("volumechange"); |
|
367 }) |
|
368 |
|
369 videoSelector.on("play", function() { |
|
370 media.trigger("play"); |
|
371 }); |
|
372 |
|
373 videoSelector.on("pause", function() { |
|
374 media.trigger("pause"); |
|
375 }); |
|
376 |
|
377 videoSelector.on("seeking", function() { |
|
378 media.trigger("seeking"); |
|
379 }); |
|
380 |
|
381 videoSelector.on("seeked", function() { |
|
382 media.trigger("seeked"); |
|
383 }); |
|
384 } |
|
385 |
348 media.hide = function() { |
386 media.hide = function() { |
349 videoEl.hide(); |
387 $("#" + videoid).remove(); |
350 } |
388 } |
351 |
389 |
352 var popcorn = Popcorn("#" + videoid); |
390 // Binding functions to Media Element Functions |
353 |
391 |
354 // Binding functions to Popcorn |
392 var deferredTime = undefined, |
|
393 deferredPlayPause = undefined; |
355 |
394 |
356 media.on("setcurrenttime", function(_milliseconds) { |
395 media.on("setcurrenttime", function(_milliseconds) { |
357 if (media.loaded) { |
396 var mediaEl = document.getElementById(videoid); |
358 popcorn.currentTime(_milliseconds / 1000); |
397 if (mediaEl && mediaEl.readyState >= mediaEl.HAVE_METADATA) { |
359 media.seeking = true; |
398 try { |
360 setTimeout(showSeek,200); |
399 mediaEl.currentTime = (_milliseconds / 1000); |
|
400 deferredTime = undefined; |
|
401 } catch(err) { |
|
402 deferredTime = _milliseconds; |
|
403 } |
|
404 } else { |
|
405 deferredTime = _milliseconds; |
361 } |
406 } |
362 }); |
407 }); |
363 |
408 |
364 media.on("setvolume", function(_vol) { |
409 media.on("setvolume", function(_vol) { |
365 media.volume = _vol; |
410 var mediaEl = document.getElementById(videoid); |
366 if (media.loaded) { |
411 if (mediaEl && mediaEl.readyState >= mediaEl.HAVE_METADATA) { |
367 popcorn.volume(_vol); |
412 media.volume = _vol; |
|
413 mediaEl.volume = _vol; |
368 } |
414 } |
369 }); |
415 }); |
370 |
416 |
371 media.on("setmuted", function(_muted) { |
417 media.on("setmuted", function(_muted) { |
372 media.muted = _muted; |
418 var mediaEl = document.getElementById(videoid); |
373 if (media.loaded) { |
419 if (mediaEl && mediaEl.readyState >= mediaEl.HAVE_METADATA) { |
374 popcorn.muted(_muted); |
420 media.muted = _muted; |
|
421 mediaEl.muted = _muted; |
375 } |
422 } |
376 }); |
423 }); |
377 |
424 |
378 media.on("setplay", function() { |
425 media.on("setplay", function() { |
379 if (media.loaded) { |
426 var mediaEl = document.getElementById(videoid); |
380 popcorn.play(); |
427 if (mediaEl && mediaEl.readyState >= mediaEl.HAVE_METADATA) { |
381 } |
428 try { |
382 }); |
429 mediaEl.play(); |
383 |
430 deferredPlayPause = undefined; |
|
431 } catch(err) { |
|
432 deferredPlayPause = true; |
|
433 } |
|
434 } else { |
|
435 deferredPlayPause = true; |
|
436 } |
|
437 }); |
|
438 |
384 media.on("setpause", function() { |
439 media.on("setpause", function() { |
385 if (media.loaded) { |
440 var mediaEl = document.getElementById(videoid); |
386 popcorn.pause(); |
441 if (mediaEl && mediaEl.readyState >= mediaEl.HAVE_METADATA) { |
387 } |
442 try { |
388 }); |
443 mediaEl.pause(); |
389 |
444 deferredPlayPause = undefined; |
390 // Binding Popcorn events to media |
445 } catch(err) { |
391 |
446 deferredPlayPause = false; |
392 function getVolume() { |
447 } |
393 media.muted = popcorn.muted(); |
448 } else { |
394 media.volume = popcorn.volume(); |
449 deferredPlayPause = false; |
395 } |
450 } |
396 |
451 }); |
397 popcorn.on("loadedmetadata", function() { |
452 |
398 getVolume(); |
453 media.on("loadedmetadata", function() { |
399 media.loaded = true; |
454 if (typeof deferredTime !== "undefined") { |
400 media.trigger("loadedmetadata"); |
455 media.setCurrentTime(deferredTime); |
401 media.trigger("volumechange"); |
456 } |
402 }) |
457 if (typeof deferredPlayPause !== "undefined") { |
403 |
458 if (deferredPlayPause) { |
404 popcorn.on("timeupdate", function() { |
459 media.play(); |
405 media.trigger("timeupdate", new IriSP.Model.Time(1000*popcorn.currentTime())); |
460 } else { |
406 }); |
461 media.pause(); |
407 |
462 } |
408 popcorn.on("volumechange", function() { |
463 } |
409 getVolume(); |
|
410 media.trigger("volumechange"); |
|
411 }) |
|
412 |
|
413 popcorn.on("play", function() { |
|
414 media.trigger("play"); |
|
415 }); |
|
416 |
|
417 popcorn.on("pause", function() { |
|
418 media.trigger("pause"); |
|
419 }); |
|
420 |
|
421 popcorn.on("seeked", function() { |
|
422 media.trigger("seeked"); |
|
423 }); |
464 }); |
424 |
465 |
425 // Binding UI Events and Mashup Playing to Media |
466 // Binding UI Events and Mashup Playing to Media |
426 |
467 |
427 media.on("loadedmetadata", function() { |
468 media.on("loadedmetadata", function() { |