通过javascript播放mp4视频

Question

我有一个包含html5视频的自适应网站。我有一些javascript检查视频元素的大小是否低于某个阈值。如果是这样，它将删除控件，将视频播放按钮叠加图像放置在视频元素的顶部，然后向容纳视频元素的容器添加一个单击事件。当容器被点击时，它将视频复制到一个模式对话框并播放视频。

这里的窘境：

• 的WEBM版本有任何没有问题。
• 模式视图的mp4版本在Safari中没有问题。
• 如果mp4在适当位置播放（即足够大以至于不需要模式窗口），它可以正常播放。
• 模式视图的mp4版本不会在Chrome或IE中播放。
• 但是，如果我的内置DOM 检测器已打开（例如IE的F12工具），它将在Chrome或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元素有一些怪癖。我认为当开发人员工具被打开是因为高速缓存被禁用而工作。只需在复制视频元素的src属性末尾应用一个随机GET变量，将其标记为与缓存中不同的文件即可解决问题。

与IE它是有点不同。 HubSpot使用Amazon S3作为其CDN，当我查看视频文件的标题时，其内容类型被设置为Internet Explorer不支持的application/octet-stream。 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(); 
       }); 
      } 
     }); 
    } 
});