How to open .mov format video in HTML video Tag?
HtmlHtml5 VideoHtml 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:
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:
- 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.