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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/31380695/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 11:45:54  来源:igfitidea点击:

How to open .mov format video in HTML video Tag?

htmlhtml5-video

提问by Divyang Patel

I want to play .mov video like as this, but video doesn't play in any browser.

我想像这样播放 .mov 视频,但视频不能在任何浏览器中播放。

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

回答by Yazdan Haider

You can use below code:

您可以使用以下代码:

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

this code will help you.

此代码将帮助您。

回答by Rakesh Kumar

Instead of using <source>tag, use <src>attribute of <video>as below and you will see the action.

而不是使用<source>标签,使用如下的<src>属性,<video>你会看到动作。

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

or

或者

you can give multiple tags within the tag, each with a different video source. The browser will automatically go through the list and pick the first one it's able to play. For example:

您可以在标签内提供多个标签,每个标签都有不同的视频源。浏览器将自动浏览列表并选择它能够播放的第一个。例如:

<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>

If you test that code in Chrome, you'll get the H.264 video. Run it in Firefox, though, and you'll see the Ogg video in the same place.

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

回答by Hiral Patel

Content Type for MOV videos are video/quicktime in my case. Adding type="video/mp4" to MOV video file solved issue in my case.

就我而言,MOV 视频的内​​容类型是 video/quicktime。在我的情况下,将 type="video/mp4" 添加到 MOV 视频文件解决了问题。

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

回答by Ian deBoisblanc

Unfortunately .mov files are not supported with html5 video playback. You can see what filetypes are supported here:

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

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

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

If you need to be able to play these formats with your html5 video player, you'll need to first convert your videofile--perhaps with something like this:

如果您需要能够使用您的 html5 视频播放器播放这些格式,您需要首先转换您的视频文件——可能是这样的:

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

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

回答by Rawaf

You can use Controls attribute

您可以使用 Controls 属性

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

回答by Ronnie Royston

My new answer is to use ffmpeg to transcode the .movlike ffmpeg -i sourceFile.mov destinationFile.mp4. Do same for the webm format.

我的新答案是使用 ffmpeg 对.movlike进行转码ffmpeg -i sourceFile.mov destinationFile.mp4。对 webm 格式执行相同操作。

OLD Answer: Here's what you do:

旧答案:这是你要做的:

  1. Upload your video to Youtube.
  2. Install the "Complete YouTube Saver" plugin for Firefox
  3. Using the plugin in Firefox, download both the MP4 and WEBM formats and place them on your Web server
  4. Add the HTML5 Video element to your webpage per MDN's recommendation
  1. 将您的视频上传到 Youtube。
  2. 为 Firefox 安装“Complete YouTube Saver”插件
  3. 使用 Firefox 中的插件,下载 MP4 和 WEBM 格式并将它们放在您的 Web 服务器上
  4. 根据MDN 的建议将 HTML5 Video 元素添加到您的网页
<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>
  1. Style the <video>element with CSS to suit your needs. For example Materializecss has a simple helper classto render the video nicely across device types.
  1. 风格<video>与CSS元素,以满足您的需求。例如,Materializecss 有一个简单的辅助类,可以很好地跨设备类型呈现视频。

回答by Brenton Scott

in the video source change the type to "video/quicktime"

在视频源中将类型更改为“video/quicktime”

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