283 currentMedia.pause(); |
284 currentMedia.pause(); |
284 } |
285 } |
285 currentIndex = n; |
286 currentIndex = n; |
286 currentSegment = mashup.segments[n].annotation; |
287 currentSegment = mashup.segments[n].annotation; |
287 currentMedia = currentSegment.getMedia(); |
288 currentMedia = currentSegment.getMedia(); |
|
289 var followingMedias = []; |
|
290 for (var i = n; i < mashup.segments.length; i++) { |
|
291 followingMedias.push(mashup.segments[i].getMedia()); |
|
292 } |
|
293 followingMedias = _(followingMedias).uniq().slice(0, MAX_LOADED_VIDEOS); |
|
294 var mediasToRemove = _(mediasInDom).difference(followingMedias); |
|
295 _(mediasToRemove).each(function(m) { |
|
296 m.removeFromDom(); |
|
297 }); |
|
298 followingMedias = _(followingMedias).difference(mediasInDom); |
|
299 _(followingMedias).each(function(m) { |
|
300 m.addToDom(); |
|
301 }); |
288 mashup.getMedias().forEach(function(m) { |
302 mashup.getMedias().forEach(function(m) { |
289 if (m === currentMedia) { |
303 if (m === currentMedia) { |
290 m.show(); |
304 m.show(); |
291 } else { |
305 } else { |
292 m.hide(); |
306 m.hide(); |
293 } |
307 } |
294 }); |
308 }); |
|
309 console.log("There are now",mediasInDom.length,'~',$("video").length,"<video>s in DOM"); |
295 $("#title_sequence li").removeClass("here"); |
310 $("#title_sequence li").removeClass("here"); |
296 $("#title_sequence li[data-segment-index='" + n + "']").addClass("here"); |
311 $("#title_sequence li[data-segment-index='" + n + "']").addClass("here"); |
297 resizeSegmentDrag(); |
312 resizeSegmentDrag(); |
298 $("#duration").text(currentSegment.getDuration().toString()); |
313 $("#duration").text(currentSegment.getDuration().toString()); |
299 |
314 |
344 ""); |
359 ""); |
345 tagsdragin.html(html); |
360 tagsdragin.html(html); |
346 resizeTagsDrag(!!tagToShow); |
361 resizeTagsDrag(!!tagToShow); |
347 } |
362 } |
348 |
363 |
|
364 var can_play_mp4 = !!document.createElement('video').canPlayType('video/mp4'); |
|
365 |
349 function addMedia(media) { |
366 function addMedia(media) { |
350 if (media.has_player) { |
367 if (media.is_added) { |
351 return; |
368 return; |
352 } |
369 } |
353 media.has_player = true; |
370 media.is_added = true; |
354 media.loaded = false; |
371 |
355 media.paused = true; |
|
356 var videourl = video_url_transform(media.video), |
372 var videourl = video_url_transform(media.video), |
357 videoid = "video_" + media.id, |
373 videoid = "video_" + media.id, |
358 videoEl = $('<video>'), |
|
359 mp4_file = videourl.replace(/\.webm$/i,'.mp4'), |
374 mp4_file = videourl.replace(/\.webm$/i,'.mp4'), |
360 webm_file = videourl.replace(/\.mp4$/i,'.webm'), |
375 webm_file = videourl.replace(/\.mp4$/i,'.webm'), |
361 mediaEl = videoEl[0], |
376 video_file = can_play_mp4 ? mp4_file : webm_file, |
362 can_play_mp4 = !!mediaEl.canPlayType('video/mp4'), |
377 videoEl = undefined, |
363 can_play_webm = !!mediaEl.canPlayType('video/webm'); |
378 mediaEl = undefined; |
364 |
379 |
365 videoEl.attr({ |
380 media.addToDom = function() { |
366 id : videoid |
381 if (videoEl) { |
367 }).css({ |
382 return; |
368 position : "absolute", |
383 } |
369 left: 0, |
384 console.log("Adding to DOM",media.title); |
370 top: 0, |
385 mediasInDom.push(media); |
371 width : "100%", |
386 mediasInDom = _(mediasInDom).uniq(); |
372 height : "100%" |
387 media.loaded = false; |
373 }); |
388 media.paused = true; |
374 |
389 videoEl = $('<video>'); |
375 if (can_play_mp4 && can_play_webm) { |
390 mediaEl = videoEl[0]; |
376 var mp4_src = $('<source>'), |
391 |
377 webm_src = $('<source>'); |
392 videoEl.attr({ |
378 mp4_src.attr({ |
393 src : video_file, |
379 src: mp4_file, |
394 id : videoid |
380 type: "video/mp4" |
395 }).css({ |
381 }); |
396 position : "absolute", |
382 webm_src.attr({ |
397 left: 0, |
383 src: webm_file, |
398 top: 0, |
384 type: "video/webm" |
399 width : "100%", |
385 }); |
400 height : "100%", |
386 |
401 display: "none" |
387 videoEl.append(mp4_src).append(webm_src); |
402 }); |
388 } else { |
403 |
389 videoEl.attr("src", can_play_mp4 ? mp4_file : webm_file); |
404 $("#video_sequence").append(videoEl); |
390 } |
405 |
391 |
406 // Binding DOM events to media |
392 $("#video_sequence").append(videoEl); |
407 |
393 |
408 function getVolume() { |
|
409 media.muted = mediaEl.muted; |
|
410 media.volume = mediaEl.volume; |
|
411 } |
|
412 |
|
413 videoEl.on("loadedmetadata", function() { |
|
414 getVolume(); |
|
415 media.loaded = true; |
|
416 media.trigger("loadedmetadata"); |
|
417 media.trigger("volumechange"); |
|
418 }) |
|
419 |
|
420 videoEl.on("timeupdate", function() { |
|
421 media.trigger("timeupdate", new IriSP.Model.Time(1000*mediaEl.currentTime)); |
|
422 }); |
|
423 |
|
424 videoEl.on("volumechange", function() { |
|
425 getVolume(); |
|
426 media.trigger("volumechange"); |
|
427 }) |
|
428 |
|
429 videoEl.on("play", function() { |
|
430 media.trigger("play"); |
|
431 }); |
|
432 |
|
433 videoEl.on("pause", function() { |
|
434 media.trigger("pause"); |
|
435 }); |
|
436 |
|
437 videoEl.on("seeking", function() { |
|
438 media.trigger("seeking"); |
|
439 }); |
|
440 |
|
441 videoEl.on("seeked", function() { |
|
442 media.trigger("seeked"); |
|
443 }); |
|
444 } |
|
445 |
|
446 media.removeFromDom = function() { |
|
447 console.log("Removing from DOM",media.title); |
|
448 videoEl.remove(); |
|
449 videoEl = undefined; |
|
450 mediaEl = undefined; |
|
451 mediasInDom = _(mediasInDom).without(media); |
|
452 } |
394 media.show = function() { |
453 media.show = function() { |
|
454 if (!videoEl) { |
|
455 media.addToDom(); |
|
456 } |
|
457 console.log("Showing media",media.title); |
395 videoEl.show(); |
458 videoEl.show(); |
396 } |
459 } |
397 media.hide = function() { |
460 media.hide = function() { |
398 videoEl.hide(); |
461 if (videoEl) { |
|
462 videoEl.hide(); |
|
463 } |
399 } |
464 } |
400 |
465 |
401 // Binding functions to Media Element Functions |
466 // Binding functions to Media Element Functions |
402 |
467 |
403 media.on("setcurrenttime", function(_milliseconds) { |
468 media.on("setcurrenttime", function(_milliseconds) { |
404 try { |
469 try { |
405 mediaEl.currentTime = (_milliseconds / 1000); |
470 mediaEl.currentTime = (_milliseconds / 1000); |
406 } |
471 } |
407 catch (err) {} |
472 catch (err) {} |
408 }); |
473 }); |
409 |
|
410 media.on("setvolume", function(_vol) { |
474 media.on("setvolume", function(_vol) { |
411 try { |
475 try { |
412 media.volume = _vol; |
476 media.volume = _vol; |
413 mediaEl.volume = _vol; |
477 mediaEl.volume = _vol; |
414 } |
478 } |
415 catch (err) {} |
479 catch (err) {} |
416 }); |
480 }); |
417 |
|
418 media.on("setmuted", function(_muted) { |
481 media.on("setmuted", function(_muted) { |
419 try { |
482 try { |
420 media.muted = _muted; |
483 media.muted = _muted; |
421 mediaEl.muted = _muted; |
484 mediaEl.muted = _muted; |
422 } |
485 } |
423 catch (err) {} |
486 catch (err) {} |
424 }); |
487 }); |
425 |
|
426 media.on("setplay", function() { |
488 media.on("setplay", function() { |
427 try { |
489 try { |
428 mediaEl.play(); |
490 mediaEl.play(); |
429 } |
491 } |
430 catch (err) {} |
492 catch (err) {} |
431 }); |
493 }); |
432 |
|
433 media.on("setpause", function() { |
494 media.on("setpause", function() { |
|
495 if (!mediaEl) { |
|
496 return; |
|
497 } |
434 try { |
498 try { |
435 mediaEl.pause(); |
499 mediaEl.pause(); |
436 } |
500 } |
437 catch (err) {} |
501 catch (err) {} |
438 }); |
|
439 |
|
440 // Binding DOM events to media |
|
441 |
|
442 function getVolume() { |
|
443 media.muted = mediaEl.muted; |
|
444 media.volume = mediaEl.volume; |
|
445 } |
|
446 |
|
447 videoEl.on("loadedmetadata", function() { |
|
448 getVolume(); |
|
449 media.loaded = true; |
|
450 media.trigger("loadedmetadata"); |
|
451 media.trigger("volumechange"); |
|
452 }) |
|
453 |
|
454 videoEl.on("timeupdate", function() { |
|
455 media.trigger("timeupdate", new IriSP.Model.Time(1000*mediaEl.currentTime)); |
|
456 }); |
|
457 |
|
458 videoEl.on("volumechange", function() { |
|
459 getVolume(); |
|
460 media.trigger("volumechange"); |
|
461 }) |
|
462 |
|
463 videoEl.on("play", function() { |
|
464 media.trigger("play"); |
|
465 }); |
|
466 |
|
467 videoEl.on("pause", function() { |
|
468 media.trigger("pause"); |
|
469 }); |
|
470 |
|
471 videoEl.on("seeking", function() { |
|
472 media.trigger("seeking"); |
|
473 }); |
|
474 |
|
475 videoEl.on("seeked", function() { |
|
476 media.trigger("seeked"); |
|
477 }); |
502 }); |
478 |
503 |
479 // Binding UI Events and Mashup Playing to Media |
504 // Binding UI Events and Mashup Playing to Media |
480 |
505 |
481 media.on("play", function() { |
506 media.on("play", function() { |