如何在HTML视频标签中打开.mov格式视频？

Question

我想像这样播放.mov视频，但视频无法在任何浏览器中播放。

<video width="400" controls Autoplay=autoplay>
  <source src="D:/mov1.mov" type="video/mov">
</video>

Answer 1

您可以使用以下代码：

<video width="400" controls autoplay>
    <source src="D:/mov1.mov" type="video/mp4">
</video>

此代码会对您有所帮助。

Answer 2

不要使用

<source>

标签，而是使用

<src>

的

<video>

属性，如下所示，您将看到该操作。

<video width="320" height="240" src="mov1.mov"></video>

或

您可以在标签内给出多个标签，每个标签都有不同的视频源。浏览器将自动浏览列表并选择第一个可以播放的。例如：

<video id="sampleMovie" width="640" height="360" preload controls>
    <source src="HTML5Sample_H264.mov" />
    <source src="HTML5Sample_Ogg.ogv" />
    <source src="HTML5Sample_WebM.webm" />
</video>

如果您在 Chrome 中测试该代码，您将获得 H.264 视频。不过，在 Firefox 中运行它，您将在同一位置看到 Ogg 视频。

Answer 3

不幸的是，html5 视频播放不支持 .mov 文件。您可以在此处查看支持哪些文件类型：

https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats

如果您需要能够使用 html5 视频播放器播放这些格式，您需要首先转换您的视频文件 - 也许使用如下方式：

https://www.npmjs.com/package/html5-media-converter

Answer 4

在我的例子中，MOV 视频的内容类型是视频/quicktime。将 type="video/mp4" 添加到 MOV 视频文件解决了我的问题。

<video width="400" controls Autoplay=autoplay>
  <source src="D:/mov1.mov" type="video/mp4">
</video>

Answer 5

这取决于所使用的视频编解码器，某些文件适用于“video/quicktime”或“video/mp4”。所以你需要测试。

但是，如果可能的话，我建议将视频转换为 .mp4。

<video width="400" controls Autoplay=autoplay>
  <source src="D:/mov1.mov" type="video/quicktime">
</video>

<video width="400" controls Autoplay=autoplay>
  <source src="D:/mov1.mov" type="video/mp4">
</video>

Answer 6

您可以使用 Controls 属性

<video id="sampleMovie" src="HTML5Sample.mov" controls></video>

Answer 7

我的新答案是使用ffmpeg对

.mov

进行转码，就像

ffmpeg -i sourceFile.mov destinationFile.mp4

一样。对 webm 格式执行相同操作。

旧答案： 这就是你要做的：

1. 将您的视频上传到 Youtube。
2. 安装适用于 Firefox 的“Complete YouTube Saver”插件
3. 使用 Firefox 中的插件，下载 MP4 和 WEBM 格式并将它们放在您的 Web 服务器上
4. 根据 MDN 的建议将 HTML5 视频元素添加到您的网页

<video controls>
  <source src="somevideo.webm" type="video/webm">
  <source src="somevideo.mp4" type="video/mp4">
  I'm sorry; your browser doesn't support HTML5 video in WebM with VP8/VP9 or MP4 with H.264.
  <!-- You can embed a Flash player here, to play your mp4 video in older browsers -->
</video>

5. 使用 CSS 设置

   <video>

   元素的样式以满足您的需求。例如，Materializecss 有一个简单的辅助类，可以跨设备类型很好地渲染视频。