I want to show a video on my website. I have created a .mp4 file and using the HTML5 video tag to add it to the html.
The problem is that it is not being displayed in chrome. I would also like to know how I can replay it again and again.
I too had the same issue. I changed the codec to H264-MPEG-4 AVC and the videos started working in HTML5/Chrome.
Option selected in converter: H264-MPEG-4 AVC, Codec visible in VLC player: H264-MPEG-4 AVC (part 10) (avc1)
Hope it helps...
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.
Source: user: eithedog
This also can help: chrome could play html5 mp4 video but html5test said chrome did not support mp4 video codec
Also check your version of crome here: html5test
(#Alston posted this as a comment, and it worked for me, and 9 others who also upvoted, so posting this as an answer to get more eyeballs on it:)
Simply re-encoding the video file with this FFMPEG command solves it:
ffmpeg -i input.mp4 -vcodec h264 output.mp4
This started out as an attempt to cast video from my pc to a tv (with subtitles) eventually using Chromecast. And I ended up in this "does not play mp4" situation. However I seemed to have proved that Chrome will play (exactly the same) mp4 as long as it isn't wrapped in html(5)
So here is what I have constructed. I have made a webpage under localhost and in there is a default.htm which contains:-
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<video controls >
<source src="sample.mp4" type="video/mp4">
<track kind="subtitles" src="sample.vtt" label="gcsubs" srclang="eng">
</video>
</body>
</html>
the video and subtitle files are stored in the same folder as default.htm
I have the very latest version of Chrome (just updated this morning)
When I type the appropriate localhost... into my Chrome browser a black square appears with a "GO" arrow and an elapsed time bar, a mute button and an icon which says "CC". If I hit the go arrow, nothing happens (it doesn't change to "pause", the elapsed time doesn't move, and the timer sticks at 0:00. There are no error messages - nothing!
(note that if I input localhost.. to IE11 the video plays!!!!
In Chrome if I enter the disc address of sample.mp4 (i.e. C:\webstore\sample.mp4 then Chrome will play the video fine?.
This last bit is probably a working solution for Chromecast except that I cannot see any subtitles. I really want a solution with working subtitles.
I just don't understand what is different in Chrome between the two methods of playing mp4
Encountering the same problem, I solved this by reconverting the file with default mp4 settings in iMovie.
I was actually running into some strange errors with mp4's a while ago. What fixed it for me was re-encoding the video using known supported codecs (H.264 & MP3).
I actually used the VLC player to do so and it worked fine afterward. I converted using the mentioned codecs H.264/MP3. That solved it for me.
Maybe the problem is not in the format but in the JavaScript implementation of the play/ pause methods. May I suggest visiting the following link where Google developer explains it in a good way?
Additionally, you could choose to use the newer webp format, which Chrome supports out of the box, but be careful with other browsers. Check the support for it before implementation. Here's a link that describes the mentioned format.
On that note: I've created a small script that easily converts all standard formats to webp. You can easily configure it to fit your needs. Here's the Github repo of the same projects.
Related
So I'm putting together a very video-heavy project with self-hosted videos in HTML5. I've got my videos encoded in both H.264/AAC MP4 and WebM formats, and they work beautifully in Chrome, Firefox, Safari, Mobile Safari etc. All good.
This is the most basic version of my code (in the production site I'm running it with VideoJS on top, however whether it's there or not, this problem occurs so I've removed the code for it from this example):
<video preload="true" width="720" height="406" controls="true">
<source src="/55.mp4" type="video/mp4">
<source src="/55.webm" type="video/webm">
</video>
But Internet Explorer refuses to play ball. When I load up the page in IE 11, I just get a video decoding error:
In Internet Explorer's developer tools, I can see that it's getting a content type of video/mp4, and just to completely eliminate server issues I've tried it on both my local Apache install and my web hosting. If I use the console to get the playback error, I get MEDIA_ERR_DECODE : 3, which, according to the site I just linked to, means
An error has occurred in the decoding of the media resource, after the resource was established to be usable.
This tells me that there's a problem with the video encoding... but I can't see it.
The video files were originally exported as QuickTime videos from Adobe Premier or Final Cut Pro (I'm not sure which the video guy uses), and then run through Miro Video Converter to output MP4 and WebM formats. When I open the MP4 files up in VLC, it shows me the following information about the codecs in use:
I can't see anything wrong there; it looks exactly like every reference I've found online says MP4 video should be for maximum compatibility - H.264/AVC video and AAC audio.
Can anyone see anything wrong with what I'm doing? I'd love to be able to post an example video, however I can't due to privacy reasons. All the same any help would be greatly appreciated.
So this is somewhat embarrassing, but I did eventually figure it out.
The problem wasn't so much with Internet Explorer as it was the VM I was using to run Windows to test in Internet Explorer.
Essentially, I was running Windows 7 inside of a VirtualBox VM. When I (in desperation) sought out an actual physical machine running Windows... lo and behold it played!
I can only assume that the video drivers provided by VirtualBox didn't like decoding MP4 or something. The videos played fine in other browsers, but I'm guessing they decode/render video differently to how IE does.
I had the same issue recently with VirtualBox running Windows7 on MacOS. Solved by enabling 3D acceleration in the "Display" settings for the problematic VM.
The OP is a genius. I was struggling with this same issue for days and could only test on a windows machine today. This led me to change the configuration of my Parallels Desktop v15.
Im running IE 11 on Windows 8.1 and changed in the Graphics > Resolution > Advanced settings > Vertical synchronization should be ticked off.
Maybe this will help other people.
Maybe worth a shot: Rebooting Windows 7 within VMWare Fusion solved it for me.
I am making a system that I run on localhost, it embeds a video player and all works fine except for webm videos on Chrome. They freeze regularly and I can only get them running again by pressing play/pause and moving to the initial phases of the video.
I have been googling for this issue and trying to solve it for some time now without success, does anybody know how to solve this?
Is your same WebM file working ok on Firefox? I assume you are using HTML5 video.
I have compiled a short check list on how to troubleshoot HTML5 video playback issue here. Try to play the videojs webm sample to see if it works.
Given the description of your issue I guess it is either a non proper WebM file or a server side tuning issue (like with mime types).
If it is a file format issue you could try re-transcoding from a known good source (ie not the problematic WebM file) with firefogg.
You can also try to set the preload attribute of your HTML5 video tag to auto.
When I enter a WebM video URL in a web browser on Windows 7, the video automatically starts playing. But in Firefox on a Linux system, when I enter a WebM video URL it asks me if I want to download that video file, rather than automatically playing it in the browser.
This may be a silly question with a super simple answer, but what do I need to do to make this video play within the browser, rather than asking me if I want to download it?
When I try the same thing in Chrome in my Linux environment, the video automatically plays within the web browser as I would hope, so it seems to be something specific to Firefox in Linux that I need to change.
Go to this link http://webm.html5.org to verify that you can play WebM videos and make sure you update to a newer version of Firefox.
I’ve tried several combinations of types and setting in (the excellent) mediaplayer.js, but cannot get BBC Radio 3 to play in Chrome. The stream URL is here, and the playlist from which it is taken is here.
The tag is:
<audio src="http://bbcmedia.ic.llnwd.net/stream/bbcmedia_intl_lc_radio3_p?s=1362261751&e=1362276151&h=47e8b2755e05d1a5ceeb665f116984de" type="audio/mp4" id="player"></audio>
Looking at Chrome’s inspector, I see that the network is calling the stream, but it just loads indefinitely, without audio starting.
Other streams are working fine (demo), but this particular one is problematic, and I assume it has to do with the AAC+ format.
Edit: The instantiation code is here, figure it’s clearer than pasting the whole thing in.
Edit 2: It works in Safari (Mac)! Which I assume is related to Quicktime. Which is why I believe that AAC+ is the issue.
See https://groups.google.com/forum/m/#!msg/jplayer/9Ks2Crfjwrg/jDCDBgv3qr0J. It seems that AAC+ support is somewhat odd. It also seems that AAC+ can be placed in various containers. like m4a and FLV. Also see stackoverflow.com/questions/4018596/aac-streaming-from-shoutcast-in-flash.
Firstly, which OS, which Chrome version did you test with?
AAC+ is covered by software patents so it isn't going to be available if your OS has disabled it in the ffmpeg library that Chrome depends on (on OS where Chrome doesn't bundle its own ffmpeg). If you are running something like debian or ubuntu it might be disabled by default for legal reasons. On Windows Chrome may have removed support from the bundled ffmpeg themselves to avoid liability issues.
Alternatively since AAC+ supports DRM it might be an issue with BBC encrypting or blocking the stream in a way that Chrome doesn't support.
If I'm right then there's probably no good solutions since you can fix it on your machine (with a custom Chrome/FFMpeg build) but not on your end-users side where it really matters. Flash supports AAC so you could fallback to a flash player using the codec fallback techniques described here but you might run into the crossdomain/licensing issues described here.
The MDN codec page claims Chrome 3.0 (but not Chromium) supports AAC in MP4 containers but it does not clarify whether that support extends to AAC+ (unless that's what they mean by "main only").
html audio player plays aac+ file in chrome browser.
<audio id="audio1" controls autoplay>
<source src="test.aac"></source>
</audio>
it does play aac+ streams if it is from SHOUTCAST v2.
(sometime crossdomain.xml must be exist in shoutcast folder for audition)
My code is basically this
<audio controls preload="metadata">
<source src="linktofile.wav" type="audio/ogg">
</audio>
In Firefox 18.0.1 - it results in 8.4 KB data download (checked on Firebug).
But in Chrome 24.0.1312.52 m - it starts downloading the entire file (In developer tools - it shows download size in MBs).
What gives?
As I understand preload values are hints for the browser, not absolute commands. In other words, they are a suggestion for how the browser should behave. The browser may or may not follow the hint so don't be surprised if it doesn't always work.
http://www.mediacollege.com/internet/html/audio/preload.html
Version v42 and above now seem to respect this. Yay!
(current beta version as of yesterday)
You can see now a 206 partial content request, and 66kb downloaded (my video is 600kb+)
However: VERY IMPORTANT
In case you didn't know, Chrome can only have 6 simultaneous connections at the same time to the same server.
Currently in v42 + v43 they have a terrible bug which means that once the metadata is loaded that file is not released back into the 'pool' for available connections. So if you load 6 or more videos the 7th blocks and won't download.
I've reported this as a bug https://code.google.com/p/chromium/issues/detail?id=468930
This may not be the case for all videos, but I have 10 short MP4 videos encoded with Adobe Media Encoder and they get stuck.
If in doubt, or experiencing this problem you've got no choice but to set preload='auto' for now. Hopefully this bug will never make it into the wild.
preloading is fixed, and has been for a while
the behavior with preloading with it holding the connection is not a bug.
It keeps the connection open to allow for stream protection by use of one time tokens.
If it didn't do this, the audio or video wouldn't even play if it is protected by a token.
Therefore, chrome MUST keep the connection open until the page is left or closed.