chrome could play html5 mp4 video but html5test said chrome did not support mp4 video codec
.mp4
is just a container format (MPEG-4 Part 14), the video and audio formats under .mp4
file can be varied. For video, H-264 (MPEG-4 Part 10) and MPEG-4 Visual (MPEG-4 Part 2) are common.
On the HTML5Test, "MPEG-4 support" will test video.canPlayType("video/mp4; codecs="mp4v.20.8")
, which tests whether MPEG-4 Visual is supported.
Formats supported by Chrome are H-264, VP8 (WebM video part), Theora for video and MP3, AAC, Vorbis for audio. MPEG-4 Visual is not supported (Chromium issue 54036).
So, Chrome can play .mp4
with H-264 video but not MPEG-4 Visual video.
Why HTML5 video does not work on google chrome?
I believe Chrome uses the WebM format (video/webm
), so you'll probably need to offer this as another <source>
alternative.
HTML5 video player does not play mp4 h264 video in Chrome
It was a bug of owncloud. It serves all static files by itself and does not support partial content. You can read more about this here: Odd video streaming behavior / serving "partial content".
Serving Static Files for Better Performance article has helped me: to solve the problem.
MP4 not playing on Chrome version 27.0
After running into the same issue - here're some of my thoughts:
- due to Chrome removing support for h264, on some machines, mp4 videos encoded with it will either not work (throwing an Parser error when viewing under Firebug/Network tab - consistent with issue submitted here), or crash the browser, depending upon the encoding settings
- it isn't consistent - it entirely depends upon the codecs installed on the computer - while I didn't encounter this issue on my machine, we did have one in the office where the issue occurred (and thus we used this one for testing)
- it might to do with Quicktime / divX settings (the machine in question had an older version of Quicktime than my native one - we didn't want to loose our testing pc though, so we didn't update it).
As it affects only Chrome (other browsers work fine with VideoForEverybody solution) the solution I've used is:
- for every mp4 file, create a Theora encoded mp4 file (example.mp4 -> example_c.mp4)
apply following js:
if (window.chrome)
$("[type=video\\\/mp4]").each(function()
{
$(this).attr('src', $(this).attr('src').replace(".mp4", "_c.mp4"));
});
Unfortunately it's a bad Chrome hack, but hey, at least it works.
How to play HTML5 video in Chrome web browser
Chrome and Firefox do indeed support HTML5 video and the video object code is correct. So if the test page is not working the next step is to check that the server displaying the test page does indeed support MP4 files.
If you are using Apache put in your Directory directive:
AddType video/mp4 .mp4
If you are using Windows Server, instead of editing the site which can create an unwanted web.config file in your root, add the MimeType to the server. That way MP4 will be applied to all sites on the server:
Go to IIS Manager > Mime Types and add a new entry for
.mp4 video/mpeg
Click to save and then restart the server.
Your browser does not support the video tag
I solved it using video tag and my advice when you embed a video or picture (image) make sure to use the right path. Thank you all.
Display Video in html5 web
Try providing appropriate codecs for all the video files. Like this:
<video width="400" height="360" controls>
<source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="video.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'>
Your browser does not support the video tag.
</video>
playing mp4 files in html5
Semi-answer: try and use JWPlayer it plays pretty much anything and it automatically downgrades if needed. (Using HTML5 or Flash)
Related Topics
Is There a Disadvantage of Using 'Display:Table-Cell'On Divs
How to Insert Spaces/Tabs in Text Using HTML/Css
Css: Why Background-Color Breaks/Removes the Box-Shadow
Mix-Blend-Mode Not Working in Webkit-Browsers When Element Is Direct Child of Body
How to Position Child Div to the Center of Every Parents Div Using Position Absolute in CSS
Make CSS Drop Down Menu 2 Columns
Double Dotted Border While Using Colspan
<Br> Not Causing New Line on Chrome
Making a Paragraph in HTML Contain a Text from a File
Is There a Reason to Use a Instead of A:Link or A:Visited in My Stylesheet
Add Outward Curving Border to Elements Like This: ◝◟_◞◜
How to Apply a Border Only Inside a Table
How to Margin the Body of the Page (Html)
Like Whatsapp, How to Make an Input That Extends to Upwards as You Type