[html] How to open .mov format video in HTML video Tag?

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>

This question is related to html html5-video

The answer is


You can use below code:

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

this code will help you.


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


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


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>

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.

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>

You can use Controls attribute

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