media_archive.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. /**
  2. * @file media_archive/js/media_archive.js
  3. */
  4. (function ($) {
  5. Drupal.media_archive = {};
  6. Drupal.behaviors.media_archive = {
  7. attach: function (context, settings) {
  8. // Check the browser to see if it supports html5 video.
  9. var video = document.createElement('video');
  10. var html5 = video.canPlayType ? true : false;
  11. // If it has video, does it support the correct codecs?
  12. if (html5) {
  13. html5 = false;
  14. if (video.canPlayType( 'video/webm; codecs="vp8, vorbis"' ) || video.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"')) {
  15. html5 = true;
  16. }
  17. }
  18. // Put a prompt in the video wrappers to let users know they need flash
  19. if (!FlashDetect.installed && !html5){
  20. $('.media-archive-preview-wrapper').each(Drupal.media_archive.needFlash);
  21. }
  22. }
  23. };
  24. Drupal.media_archive.needFlash = function () {
  25. var id = $(this).attr('id');
  26. var wrapper = $('.media-archive-preview-wrapper');
  27. var hw = Drupal.settings.media_archive[id].height / Drupal.settings.media_archive[id].width;
  28. wrapper.html('<div class="js-fallback">' + Drupal.t('You need Flash to watch this video. <a href="@flash">Get Flash</a>', {'@flash':'http://get.adobe.com/flashplayer'}) + '</div>');
  29. wrapper.height(wrapper.width() * hw);
  30. };
  31. Drupal.media_archive.insertEmbed = function (embed_id) {
  32. var videoWrapper = $('#' + embed_id + '.media-archive-preview-wrapper');
  33. var settings = Drupal.settings.media_archive[embed_id];
  34. // Calculate the ratio of the dimensions of the embed.
  35. settings.hw = settings.height / settings.width;
  36. // Replace the object embed with Archive's iframe. This isn't done by the
  37. // theme function because Archive doesn't have a no-JS or no-Flash fallback.
  38. var video = $('<iframe class="archive-player" type="text/html" frameborder="0"></iframe>');
  39. var src = 'http://www.archive.org/file/' + settings.video_id;
  40. // Allow other modules to modify the video settings.
  41. settings.options = {wmode : 'opaque'};
  42. $(window).trigger('media_archive_load', settings);
  43. // Merge Archive options (such as autoplay) into the source URL.
  44. var query = $.param(settings.options);
  45. if (query) {
  46. src += '?' + query;
  47. }
  48. // Set up the iframe with its contents and add it to the page.
  49. video
  50. .attr('id', settings.id)
  51. .attr('width', settings.width)
  52. .attr('height', settings.height)
  53. .attr('src', src);
  54. videoWrapper.html(video);
  55. // Bind a resize event to handle fluid layouts.
  56. $(window).bind('resize', Drupal.media_archive.resizeEmbeds);
  57. // For some reason Chrome does not properly size the container around the
  58. // embed and it will just render the embed at full size unless we set this
  59. // timeout.
  60. if (!$('.lightbox-stack').length) {
  61. setTimeout(Drupal.media_archive.resizeEmbeds, 1);
  62. }
  63. };
  64. Drupal.media_archive.resizeEmbeds = function () {
  65. $('.media-archive-preview-wrapper').each(Drupal.media_archive.resizeEmbed);
  66. };
  67. Drupal.media_archive.resizeEmbed = function () {
  68. var context = $(this).parent();
  69. var video = $(this).children(':first-child');
  70. var hw = Drupal.settings.media_archive[$(this).attr('id')].hw;
  71. // Change the height of the wrapper that was given a fixed height by the
  72. // Archive theming function.
  73. $(this)
  74. .height(context.width() * hw)
  75. .width(context.width());
  76. // Change the attributes on the embed to match the new size.
  77. video
  78. .height(context.width() * hw)
  79. .width(context.width());
  80. };
  81. })(jQuery);