I was hoping that you can help me with an issue I have been having.
Problem: I am using the HTML5 audio tag to play an mp3 file. I have the exact same file on two different servers and one works and one doesn't. Each browser treats this differently. In Firefox the player doesn't show up, in Chrome in shows and doesn't play, and in IE it works (go figure).
Fiddle: http://jsfiddle.net/dj2ngfag/
From This Sites Editor Uploads (not working):
http://gv-disprod.cmstemp.com/editoruploads/files/test2.mp3
<audio src="http://gv-disprod.cmstemp.com/editoruploads/files/test2.mp3" type="audio/mpeg" controls></audio>
<br />From MP3 Test Site (works):
http://mp3-test.cmstemp.com/test2.mp3
<br />
<audio src="http://mp3-test.cmstemp.com/test2.mp3" type="audio/mpeg" controls></audio>
I have the audio/mpeg mime type set on both servers so I am not sure if its a programming error or something different between the servers.
I appreciate any help that you can give me!
Thanks,
Graham
Mp3 is partially supported by different browsers that is the reason for it to behave distinctly. Please find the url below which has a chart of audio extensions and support from different browsers.
https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats
I hope this might help in clearing the doubt.
Related
Just as the title says. I've been working on a site and had added a big html video for the main page.
I looked over online...myme types checked, h264 encoding checked. I looked over old versions of the file i've been working on and noticed an old pure HTML file which loaded the video in all browsers with no problem (which I guess discards any encoding or video quality issues)
It all was working neat. Even displaying in firefox, chrome an IE. BUT for some reason the video does not load in IE whenever the file extension for the page it's on is .PHP. To be precise, whenever i try it from my LOCALHOST (XAMP with Apache server)
I also checked the dev tools and under network it does show it as the right content type and no error whatsoever (getting normal 200 result)
Here's the snippet of the video tag used:
<div id="video_container">
<video autoplay loop poster="video.jpg" id="header_vid">
<source src="imagenes/video.mp4" type="video/mp4">
</video>
LOL, and just noticed...not even the poster image is showing in IE...wtf.
I'm so confused, could anyone enlighten me a bit please? Could it be something related to the path used? been digging around the net for days _
Check if your url is formed properly when you are using .php extension on IE. Same issue addressed quite a few time here.
mp4 from PHP - Not playing in HTML5 Video tag ||
Play mp4 file through php in HTML5 Video Tag in Chrome?
I notice IE doesn't like the properties without value, so try
<video autoplay="" loop="" poster="video.jpg" id="header_vid">
Here is the configuration of system I am using
Ubuntu : 12.04
Mozilla Firefox : 26.0
I have a mp4 file, when I open it directly in browser like
http://localhost/MyProject/web/video/samples/A001C026_140418WK.mp4
It runs in browser properly, but when I try the same file to render through html5 video, it is not getting played and shows below error.
No video with supported format and MIME type found.
I know this question is appeared many times but I did not get the clear way to kick this problem, second thing this file is getting played properly using <embed> tag.
Video tag syntax
<video width="854" height="480" controls>
<source src="{{asset('video/samples/A001C026_140418WK.mp4')}}" type="video/mp4">
Your browser does not support the video tag.
</video>
path specified is correct, I have checked properly.
Please guide, where the things are going wrong or missing.
Thanks in advance.
Your problem seems to rely in the fact your mime types are not properly configured server side. Have a look here for set up steps. Make sure you restart/reload your web server for changes to be taken into account
After you have checked that it should work in a HTML5 video tag.
For MP4 H264/AAC to work with Firefox on Linux you need to have GStreamer codecs being installed. But I guess you have that covered. You can find more information in this article section notes.
You can check this question for further troubleshooting steps.
It seems that i cannot add .wmv-videos to my site, though some ppl (in Google search) says it can an anothers say it cannot...
But i only have these videoes in .wmv-format and therefore have to put them on page in this format.
I have tried many things as:
<video id="sampleMovie" width="300px" height="168px" preload controls>
<source src="video.wmv" type="video/x-ms-wmv" />
</video>
And also have i rendered my .htaccess
AddType video/x-ms-wmv .wmv
And also without the dot.
But what it tells me when i try to load the page with the video is:
"No video found with the supporting MIME-type"
(It says that on another language than english, so it might not be 100% correct, but the point should be there)
How can i make this work?
You have three options.
One:
WMV files can play in IE with the Windows Media Player object. See this.
Two:
There is no way. No browser (excpet IE with above solution) supports playing WMV files. You will have to convert it into a format that browsers know how to play. A free online converter to MP4 is
here
and a standalone one is here.
IE9 is driving me CRAZY with it's support for HTML5 video, as far as I understand it, it supports the H.264 codec, so any files with a .mp4 extension on the end.
The problem is, it's not playing video files with a .mp4 extension . . .
It's even more unusual in that if I test it locally, IE9 will play the mp4 video, it just doesn't play it on the server, this is also nothing to do with MIME types, I added the following MIME type to the server:
.mp4 - video.mp4
And in the network panel in the IE developer tools, it's listing it's type as "video/mp4" the only unusual thing is that the Network panel shows IE is requesting it 3 times (I have no idea why this could be)
I'm at the end of my tether, so much so that I actually wrote the code below to try and fix it (I would really hate to use this on a live site, it's horrible):
<!--[if !IE 9]><!-->
<video controls="controls">
<!--<![endif]-->
<!-- This is a horrible way to do this, but I cannot figure out for the life of me why IE9 won't play this video :( -->
<!--[if !IE 9]><!-->
<source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'/>
<source src="video.mp4" type="video/mp4">
<!--<![endif]-->
<!-- If HTML5 video is not supported, the following Flash video will play -->
<p>flash video stuff is here</p>
<!--[if !IE 9]><!-->
</video>
<!--<![endif]-->
This fixes it by forcing IE9 to use the flash video for browsers that don't support HTML video (instead of doing this by default IE9 just seems to display a blank box, no error message, no anything). Unfortunately this solution is so horrible I'm almost ashamed to have written it.
Does anybody know what could be causing this? Or how I can fix it?
EDIT: Not sure if this is of any significance, but I used http://www.freemake.com/free_video_converter/ to convert the files to the correct formats
I'm running into the same problem. IE9 would play the video when you run the HTML file locally, but the thing stops working when you put it on the server. The problem must have something to do with the video file. You'd think that it can't be, given that it works locally. But that appears to be case. When I downloaded the sample video file at the VideoJS web site (http://vjs.zencdn.net/v/oceans.mp4) and put it into my own setup, IE9 plays it back just fine. So IE9 is somehow more picky when it plays a remote file.
I'll update this answer when I figure out what magic parameters are needed to make IE9 happy.
UPDATE: Okay, I think I figured it out. I spent some time comparing the MP4 file that works with the one that doesn't work. In the former, the random-access index ("stss" atom) is located near the beginning of the file. In the latter, it is located at the end of the file. Both locations are legal, but apparently IE9 is too stupid to look for it at the end of the file when it's downloading the file from the web.
The solution is to move the random-access index to the beginning of the MP4 file, using a tool that comes with ffmpeg: qt-faststart.
Note: I tried another tool: QTIndexSwapper. It seems to leave the file corrupted.
I still have absolutely no idea what was causing this, I spent hours digging and digging and in the end asked someone else to try in their version of IE9, for some reason it worked on their computer and not mine.
I'm not entirely sure why, I'm just putting it down to my version of IE9 being broken in some way (which is frustrating considering how much time I spent trying to sort this out!)
There is a answer on stackoverflow.
Maybe this is useful for you:
HTML5 - mp4 video does not play in IE9
I hope this helps...
I'm trying to include a HTML5 video player on a site.
I've got the following code:
<video id="player" controls="controls" width="100%">
<source src="http://trailers.apple.com/movies/paramount/captainamerica/captainamerica-tlr1_h.480.mov">
</video>
This works in Safari, but not in Chrome and Firefox, is the .mov encoded in a weird way that doesn't allow them to be used like this? trailers.apple.com which uses the same URLs work fine in their player.
The probability that on apple's site they have multiple links to different encoded movie files. They do this because there is no current movie format that works across all major browsers.
Also just because the URL is the same doesn't mean that the same video is being served up on apples website... They could be doing some URL mapping magic to get a correct video format.
look at this link for a good current table of support per codec
http://diveintohtml5.info/video.html#what-works
Apple only serves up their videos in the MOV format. This means that only Safari can watch the videos since it is the only browser that uses Quicktime in its HTML5 video implementation. If you try opening the file directly in Chrome you should either see it download or the Quicktime plugin kick off.
I personally don't have Quicktime so when I go to the Apple trailers site, I get a link to download Quicktime and can't proceed any further without doing so.
captainamerica-tlr1_h.480.mov is just a .mov file that redirects to captainamerica-tlr1_h480.mov But it still won't work in browsers that doesn't use Quicktime for <video>. You have to set User-Agent to "Quicktime" for trailers.apple.com.
other browsers doesn't understand .mov, quicktime does. you need to serve up separate files for safari. you can generate needed files with nero or in-browse via media.io.