Here is a MOV video file URL which was copied from my iPhone 8.
https://www.yangfamily.tw/attachments/IMG_3049.MOV
Then I tried to play this video on Chrome, the html code like below:
<video width="320" height="240" controls>
<source src="https://www.yangfamily.tw/attachments/IMG_3049.MOV">
Your browser does not support the video tag.
</video>
Ok, it was loaded successfully.
But no frame showed, only the controls displayed.
And then I right clicked the controls, the menu showed that it is an AUDIO file, not a video file.
It's indeed a video file, and I can play this video file and show the frames successfully on any other player.
Why this MOV video file was read as an audio file in Google Chrome? (Chrome Version: 90.0.4430.93 64-bits)
Any idea?
This video is encoded as h.265 HEVC.
ffprobe is a free open source tool (online version: https://ffprobe.a.video/probe?url=https%3A%2F%2Fwww.yangfamily.tw%2Fattachments%2FIMG_3049.MOV)
when I look at the codec:
codec_long_name : H.265 / HEVC (High Efficiency Video Coding)
h265 is only supported in Safari. its a patent/royalty thing. You should re-encode the video as h264 - and serve that version (99.9% browser support).
Chrome CAN play the audio track:
codec_long_name : AAC (Advanced Audio Coding)
so thats why you get audio only in Chrome.
In your <source> tag, you need to add type='video/mp4'
Like this:
<source src="https://www.yangfamily.tw/attachments/IMG_3049.MOV" type='video/mp4'>
Related
I am trying to upload .mov files that have been recorded using an iPad but I want to upload them using Chrome on the PC.
The video uploads just fine however on playback all I get is a white screen ( Audio + Play controls also load up fine ).
Alternatively when the video file is uploaded using an iPad and loaded on the PC (chrome again) , the video plays back as intended.
Im using a HTML5 video tag.
<video width="320" height="240" controls>
<source src="files/nameremoved.mov" type="video/mp4">
Your browser does not support the video tag.
</video>
My assumption is that iPad uploads compress the video into something that chrome can playback.
To fix this do I need to convert the .mov uploads that are uploaded using a PC to a chrome friendly format?
You are right, what you would want to do is to upload them as mp4.
There's not supposed native .MOV support on chrome but you can try to add some extension.
Besides you are requesting chrome to play a type="video/mp4" and you are giving it a .mov
<source src="files/nameremoved.mp4" type="video/mp4">
I created a video page:
<video autoplay loop width="1280" height="720">
<source src="media/airplane720.mp4" type="video/mp4">
<source src="media/airplane720.ogv" type="video/ogg">
Your browser doesn't support HTML5 video in WebM with VP8 or MP4 with H.264.
</video>
Firefox 44 will not play or even display the no-browser-support message.
However, if I change the order - i.e. place the ogv file first, it works.
Questions:
a. Does the HTML5 video fallback method not work? what's the point then?
b. How can I check at run time - which video format is loaded in each browser? In Chrome --> developer tools --> network - I see that both mp4 + ogv files have downloaded (status=finished). Why is that? Shouldn't only one download? What's the point if everything downloads?
c. How do I check the same in Firefox?
Thanks,
K.
a) The no-browser-support message has to do with the <video> tag, not with video file types. In case the TAG is not supported (no html5 support) then you should see the message.
b) You can check it through Javascript, see https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canPlayType
var obj = document.createElement('video');
console.log(obj.canPlayType('video/mp4')); // check the return value
c) ---
I have an HTML page that contains a MP4 video:
<html>
<body>
<video width="800" height="600" controls>
<source src="/static/xyz.mp4" type="video/mp4">
<p>Your browser does not support the video tag.</p>
</video>
</body>
</html>
When I load the page in Firefox, it doesn't show the play control buttons but shows error message "No video with supported format and MIME type found" (see the screenshot below).
So I use this site to test my browser's ability to play HTML5 mp4 video and it can successfully play the test video on that site. My Firefox version is v36 on CentOS Linux. I also tried using Chrome and it can't play it either. I also tried it on Firefox/Chrome on Windows but failed. I then use the Firefox debugger to look at the debug info and I see the following message:
Media resource http://localhost:5000/static/xyz.mp4 could not be decoded.
All candidate resources failed to load. Media load paused.
I then tried playing the xyz.mp4 video on my local machine using Linux's movie player and it plays fine and it also plays fine in Window's media player. But when I use the above HTML5 <video> tag, it doesn't play for all browsers in both Linux and Windows. I also followed Mozilla's online forum to change the browser settings and clear caches but none of them works. So what caused the problem of this simple HTML5 ?
This is very likely the problem with your video file. mp4 is not really a format, but a container that can hold video in different formats. Firefox supports only H.264 encoded video.
Simply speaking, there are several types of mp4 files and not all of them are supported by browser. To verify this, you can download one of the videos from the quicksmode website and replace your video with it.
Possible solution:
//autoplay muted onloadedmetadata="this.muted = true"
<video id="abc" autoplay muted onloadedmetadata="this.muted = true" >
<source src="https://github.com/mediaelement/mediaelement-files/blob/master/big_buck_bunny.mp4?raw=true" type="video/mp4">
Your browser does not support the video tag.
</video>
I want to play an HTML5 video (MP4, quickstart) in IE 11 using the autoplay option.
All browsers are working fine (Firefox, Chrome, mobile Android and iOS): they start playing the video immediately while downloading in background.
Only IE does not start playing before it completely downloaded the file. After downloading the file (I can see this in the apache log) the video starts playing - so the autoplay option is recognized in some way.
The code is really easy and only basic html5 video markup
<video id="myVideoPlayer" height="260" class="hidden-print" style="display:inline-block; float:left;" preload="auto" autoplay="autoplay" controls="controls" loop="loop">
<source src="/stream.php?id=1234&quality=hd" type="video/mp4"></source>
<source src="/stream.php?id=1234&quality=webm-hd" type="video/webm"></source>
</video>
If I directly call the stream.php I have the same issue - but again only in IE.
I can then see in my server logs:
one complete download of the video during page load
then some kind of embedded quicktime player is shown on the IE page. The player starts a new download ans starts playing the video while downloading.
and I then have a second entry for the complete download in the apache log.
Looks like IE has to download the while file to examine it and to decide how to open it. But the header of the video is at the beginning (this is why other browser are working), so why is this neccessary?
It was an apache configuration issue!
We are using DEFLATE as OutputFilter also for .php endings, so the transfer-encoding of the video streaming php-script was set to "chunked" which causes IE to completely download the file. Even setting "Content-length" header in the php file did not help. Only way was to disable DEFLATE for this php file.
I want to embed video in html page sothat I can play any multimedia file from my hard drive or from a url.I tried to create a web page with
<video src="test.mp4" controls width="320" height="240">
</video>
In chrome,the video plays without any problem.
However,the mp4 file is not recognized in firefox .It displays error message- 'no video with supported format or mimetype found'.
It so happens that most of my video files are .mp4 or .flv files.
If I put
<source src="test.flv" /> in the video element ,then both chrome and firefox fail to show it.
So,what should I do to play at least mp4 and flv files in both browsers?.
Any pointers /advice most appreciated.
From Mozilla's page on browser-supported audio/video formats:
The MPEG container format with the H.264 video codec and either the
AAC audio codec or the MP3 audio codec is supported by Internet
Explorer and Safari. Firefox and Opera do not support the format.
Support for the format is deprecated in Chrome, and Chromium does not
support it either.
The MPEG media formats are covered by patents, which are not freely
licensed. All the necessary licenses can be bought from MPEG LA. Since
H.264 is currently not a royalty free format, it is unfit for the open
web platform, according to Mozilla [1, 2], Google [1, 2] and Opera.
Short answer, Firefox doesn't support mp4, as it's not open source. But it does support multiple sources and will play the first one it supports.
Further, it doesn't appear that swf or flv are supported by any browsers, since they are totally Adobe and require Flash Player, but the following should work around that:
<video src="test.mp4" controls>
<object data="test.flv" type="application/x-shockwave-flash">
<param value="test.flv" name="movie"/>
</object>
</video>
Be aware that the above had .swf file as data and value originally; I haven't tested if .flv will work on its own.