Воспроизвести видео mp4 через javascript

Question

У меня есть отзывчивый сайт, содержащий видео html5. У меня есть javascript, который проверяет, не превышает ли размер элементов видео определенный порог. Если это так, он удаляет элементы управления, помещает изображение наложения кнопки воспроизведения видео поверх видеоэлемента, а затем добавляет событие клика в контейнер, содержащий элемент видео. Когда нажимается контейнер, он копирует видео в модальное диалоговое окно и воспроизводит видео.

Вот затруднительное положение:

• версия WebM не имеет никаких проблем.
• Версия модального вида mp4 не имеет проблем в Safari.
• Если mp4 играет на месте (т. Е. Достаточно большой, чтобы не нуждаться в модальном окне), он отлично работает.
• Версия модального просмотра mp4 не будет воспроизводиться в Chrome или IE.
• Однако он будет работать в Chrome или IE, если у меня откроются встроенные инспекторы DOM (например, инструменты F12 IE).

Это можно увидеть here.

Вот HTML:

<div class="video modal-trigger col-lg-4 col-md-4 col-sm-4"> 
    <canvas></canvas> 
    <video preload="auto" controls="controls" poster="img/why-autologel-poster.png"> 
     <source src="media/why-autologel.m4v" type='video/mp4'> 
     <source src="media/why-autologel.webm" type='video/webm'> 
    </video> 
</div> 
<div class="col-lg-8 col-md-8 col-sm-7"> 
    <h2 class="modal-heading"> 
     Why AutoloGel? 
    </h2> 
    <p class="modal-copy"> 
     See what AutoloGel offers to your patients. 
    </p> 
</div> 

<!-- Modal Window --> 
<div class="modal fade" id="modal-window" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title" id="myModalLabel"></h4> 
      </div> 
      <div class="modal-body"> 
       <div class="media"></div> 
       <div class="copy"></div> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
    </div> 
</div> 

Вот JavaScript:

$(document).ready(function() { 

    // Play very small videos in modal box 
    if ($(window).width() > 750) { 
     var modalvideo = document.getElementsByTagName('video'); 

     // Hide controls for very small videos 
     for (var i = 0; i < modalvideo.length; i++) { 
      if ($(modalvideo[i]).width() < 470) { 
       $(modalvideo[i]).removeAttr('controls'); 
       if ($('html').hasClass('IE-9')) { 
        $(modalvideo[i]).after('<img class="poster-overlay" src="img/poster-overlay-ie9.png" alt="play video">'); 
       } else { 
        $(modalvideo[i]).after('<img class="poster-overlay" src="img/poster-overlay.png" alt="play video">'); 
       } 
      } 
     } 

     // Add click event to video container that brings up video in a modal window 
     $('.modal-trigger').on("click", function() { 
      if ($(this).width() < 470) { 
       // Get video, title and any copy text 
       var media = $(this).html(); 
       var title = $(this).next().children('.modal-heading').text(); 
       var copy = $(this).next().children('.modal-copy').text(); 

       // Insert video, title and copy text into modal window 
       $('.modal-title').html(title); 
       $('.modal-body > .media').html(media); 
       $('.modal-body > .copy').text(copy); 
       $('#modal-window .poster-overlay').remove(''); 
       $('#modal-window').modal('show'); 

       // Autoplay video after modal window has rendered 
       $('#modal-window').on('shown.bs.modal', function() { 
        modalvideo[modalvideo.length - 1].setAttribute('controls', 'controls'); 
        modalvideo[modalvideo.length - 1].play(); 
       }); 

       // Stop play video when modal window is closed 
       $('#modal-window').on('hide.bs.modal', function() { 
        modalvideo[modalvideo.length - 1].pause(); 
       }); 
      } 
     }); 
    } 
}); 

Спасибо за вашу помощь!

Answer 1

Удалить точку с запятой из атрибута источника type, должно быть: type="video/mp4", другие браузеры, вероятно, просто прощают это.

Answer 2

Обдумал это.

Проблема была в двух частях. Для Chrome есть некоторые причуды с кешем и скопированные элементы DOM. Я решил, что он работает, когда инструменты разработчика открыты, потому что кеш отключен. Просто применяя случайную переменную GET в конце атрибута src для скопированного видеоэлемента, чтобы пометить его как другой файл, чем тот, который был кэширован, решил проблему.

С IE это было (есть) немного другое. HubSpot использует Amazon S3 в качестве своего CDN, и когда я смотрел заголовок для видеофайла, его тип содержимого был установлен как приложение/октет-поток, который Internet Explorer не поддерживает. AWS позволяет устанавливать этот параметр при загрузке файла, но HubSpot делает это за кулисами, без возможности пользователя установить это, о котором я знаю. Они работают над исправлением.

Решение, которое в конечном итоге работает:

$(document).ready(function() { 
    // Play very small videos in modal box 
    if ($(window).width() > 750) { 
     var allvideos = $('video'); 

     // Hide controls for very small videos 
     for (var i = 0; i < allvideos.length; i++) { 
      if ($(allvideos[i]).width() < 470) { 
       $(allvideos[i]).removeAttr('controls'); 
       if ($('html').hasClass('IE-9')) { 
        $(allvideos[i]).after('<img class="poster-overlay" src="img/poster-overlay.png" alt="play video">'); 
       } else { 
        $(allvideos[i]).after('<img class="poster-overlay" src="img/poster-overlay.png" alt="play video">'); 
       } 
      } 
     } 

     // Add click event to video container that brings up video in a modal window 
     $('.modal-trigger').on('click', function() { 
      if ($(this).width() < 470) { 
       // Get video/img, title and any copy text 
       var media = $(this).html(); 
       var title = $(this).next().children('.modal-heading').text(); 
       var copy = $(this).next().children('.modal-copy').text(); 
       if (! title.length) { title = '<br>'; } 

       // Insert video, title and copy text into modal window 
       var modalsrc = []; 
       var modaltype = []; 
       $(media).children('source').each(function() { 
        modalsrc.push($(this).attr('src')); 
        modaltype.push($(this).attr('type')); 
       }); 
       $('.modal-title').html(title); 
       $('.modal-body > .media').html(media); 
       $('.modal-body > .copy').text(copy); 
       $('#modal-window .poster-overlay').remove(''); 

       // Assign a random version to video src to bypass cache 
       var modalsources = $('#modal-window source'); 
       var nocachesrc = ''; 
       for (var i = 0; i < modalsources.length; i++) { 
        nocachesrc = modalsrc[i] + '?rnd=' + Math.random()*Math.random(); 
        modalsources[i].setAttribute('src', nocachesrc); 
        modalsources[i].setAttribute('type', modaltype[i]); 
       } 

       var modalvideo = $('#modal-window video'); 
       modalvideo[0].setAttribute('controls', 'controls'); 

       // Reveal modal window and play video 
       $('#modal-window').modal('show'); 
       $('#modal-window').on('shown.bs.modal', function() { 
        modalvideo[0].play(); 
       }); 

       // Stop playing video when modal window is closed 
       $('#modal-window').on('hide.bs.modal', function() { 
        modalvideo[0].pause(); 
       }); 
      } 
     }); 
    } 
});