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

HtmlHtml5 Video

Html Problem Overview


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

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

Html Solutions


Solution 1 - Html

You can use below code:

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

this code will help you.

Solution 2 - Html

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

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

or

you can give multiple tags within the

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

Solution 3 - Html

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

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:

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

Solution 4 - Html

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

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

Solution 5 - Html

You can use Controls attribute

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

Solution 6 - Html

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

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

Solution 7 - Html

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

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
<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 class to render the video nicely across device types.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionDivyang PatelView Question on Stackoverflow
Solution 1 - HtmlYazdan HaiderView Answer on Stackoverflow
Solution 2 - HtmlRakesh KumarView Answer on Stackoverflow
Solution 3 - HtmlIan deBoisblancView Answer on Stackoverflow
Solution 4 - HtmlHiral PatelView Answer on Stackoverflow
Solution 5 - HtmlRawafView Answer on Stackoverflow
Solution 6 - HtmlBrenton ScottView Answer on Stackoverflow
Solution 7 - HtmlRonnie RoystonView Answer on Stackoverflow