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

Question

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>

you need to change the source so it is relative to the html file — Pete, Jul 13 '15 at 10:35

score 75 · Answer 1 · answered Jul 01 '17 at 06:53

75

You can use below code:

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

this code will help you.

answered Jul 01 '17 at 06:53

Yazdan Haider

975
1
7
10

1

This should be accepted as the correct answer, its video/mp4 to play .mov files reliably – Rob Hern Mar 10 '22 at 08:32

score 28 · Answer 2 · edited Apr 05 '16 at 23:13

28

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.

edited Apr 05 '16 at 23:13

andrewb

5,200
6
36
54

answered Jul 13 '15 at 10:38

Rakesh Kumar

518
4
12

3

I changed the attribute as your answer but video doesn't play in chrome. When I change type=video/mp4 in tag for .mov video.,the video is enable in chrome with its time duration,but there problem is video show only black screen. – Divyang Patel Jul 14 '15 at 10:37
I have the exact same problem. Did you find any solution? – Mina Jul 20 '16 at 17:49
1

It doesn't work anymore. I have tested `mov` in chrome v65. – Stanislav Mayorov Jan 26 '18 at 10:41

score 12 · Answer 3 · answered Nov 09 '16 at 18:52

12

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

answered Nov 09 '16 at 18:52

Ian deBoisblanc

159
1
4

Not entirely true, it depends on what *codecs* are used. For example, *mkv* files can be played in the browser if they are transcoded in browser supported codecs. Same goes for *.mov* files, see top voted answer. – Red Jan 28 '22 at 18:09
https://stackoverflow.com/users/5627601/ian-deboisblanc has actually provided the practically best answer. After a full day of struggle, I found that only ogg, mp4 and webm files play in the browser's integrated player. Links to other video file types typically cause the browser to trigger a download. Oddly ogv files also do not play - and ogg is used for both video and audio. – Sunil Gupta Apr 23 '22 at 13:10

score 11 · Answer 4 · answered Nov 24 '16 at 17:04

11

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>

answered Nov 24 '16 at 17:04

Hiral Patel

129
1
3

This worked for me too and I used it inside my SharePoint Online page to play the video! Thanks :D – digitalslavery Oct 18 '18 at 13:21
2

This works but not like it as to be. If someone who watch that video doesn't have the needed codec, then probably only can hear audio. There will be no video. – bafsar Dec 31 '21 at 11:14

Brenton Scott · Answer 5 · 2023-08-30T09:58:47.943

5

This depends on the video codec used, some files work with either "video/quicktime" or "video/mp4". So you will need to test.

However I would suggest converting the video to .mp4 if possible.

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

edited Aug 30 '23 at 09:58

answered Mar 29 '20 at 11:59

Brenton Scott

153
3
13

score 2 · Answer 6 · answered Nov 03 '16 at 16:16

2

You can use Controls attribute

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

answered Nov 03 '16 at 16:16

Rawaf

47
2

score 1 · Answer 7 · edited Nov 07 '19 at 10:56

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:

Upload your video to Youtube.
Install the "Complete YouTube Saver" plugin for Firefox
Using the plugin in Firefox, download both the MP4 and WEBM formats and place them on your Web server
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>

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.

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

7 Answers7

Linked