如何在视频标签中播放 .mov 格式文件

Question

我想在HTML5浏览器中播放.mov视频。我尝试了互联网上提供的所有方法，例如：

• 使用属性“controls”

• 使用<source>标签

• 使用src属性，甚至更改MIME类型为mp4。

但是都没有成功。有人能够提供解决方案吗？

- deepakchauhan

---

这应该会对你有所帮助： https://dev59.com/CWcs5IYBdhLWcg3w3HoG - Vadym

谢谢你的信息，Vadim。但我也尝试过这个方法，但它并没有帮助到我。 - deepakchauhan

Answer 1

视频标签只支持某些文件类型。.MOV容器使用Quicktime编解码器，这是专有的苹果软件，并不在 HTML音频和视频元素支持的媒体格式列表中。我建议将镜头转码为.MP4格式并使用它代替。

- luc122c

Answer 2

我的建议是将文件转换为 .mp4 格式。有几个软件可以用来完成这个任务，我建议使用 Handbrake。

https://handbrake.fr/

- Alexandre Aimbiré

Answer 3

对于jQuery，可以尝试以下代码。它会从input标签中获取数据并实例化一个FileReader实例。我们为该实例添加事件监听器，并将<source>标签作为子元素附加到<video>标签上。一旦数据加载完成，我们就能够获取持续时间。将type="video/mp4"属性添加到源标签中是一个小的增强功能，适用于大多数.mov文件，但不是所有文件（未经测试）。这是另一个SO答案的增强功能，位于此处。

$(document).ready(function() {
  var data  = $('#file-input')[0]; // File from <input type="file"> tag
  var reader = new FileReader();

  reader.addEventListener('load', function() {
    var video = $('<video class="uploaded_video_src" controls></video>');

    if (reader.result) {
      $('.uploaded_video_src').append(`<source src="${reader.result}" type="video/mp4">`); // Add type attr for support for some .mov files

      video.on('loadedmetadata', function() {
        console.log('duration:', $(this)[0].duration);
      });
    }
  });
});

- Norseback