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