I found other posts here for the same issue, like this or this but I wasn't able to solve my issue.
At first, I run below javascript:
<script type="text/javascript">
var options = JSON.stringify({'maxSize': 320, 'videoQuality': 6, 'noaudio': true});
ogg.encode(options);
</script>
Then I have below html:
<video id="video1" width="500" controls="controls" >
<source src="Rio2Trailer.mp4" type="video/mp4"/>
<source src="Rio2Trailer.ogv" type="video/ogg"/>
<source src="Rio2Trailer.webm" type="video/webm" />
The browser does not support HTML5 video.
</video>
I tried adding
AddType video/webm .webm
AddType video/mp4 .mp4
to the .htaccess file(which was empty) but no success.
On Firefox, i get the message:
No video with supported format and MIME type found.
On Chrome, I can just see the controls but they look like they are disabled and I don't see the play button in the middle of the screen as well.
Playing HTML5 video can be tricky. There are 3 things to check for:
check your MP4 files is properly encoded for web delivery. You can try to use handbrake or MP4Box or ffmpeg to repack your file. You need to activate the "web optimized" option (aka fast start) with handbrake.
check your server config: for mime types have a look here section "MIME Types Rear Their Ugly Head". Try to restart your Apache server after the changes in config. If it does not work in .htaccess try your site-wide httpd.conf. Other things to check includes CORS and 206 Partial Content/Range Requests
check your script/HTML5: try a barebone HTML5 video tag in a blank page with your mp4. If it works then scripts in your page may be affecting video playback. You can also check CPU load when playing back full HD videos.
I normally use videojs mp4 sample as a reference for a known working mp4/server config. This applies to mp4 but for webm/ogg as well (you can use make web video for transcoding to WebM or Ogg).
Let us know how it goes.
Related
I'm building a website that queries the iTunes API, and in the browser I need to be able to play the 30-second song previews associated with each song in the API (which are in .m4a format)
I've tried playing the file in both of the following ways, but neither worked:
<audio controls="controls">
<source src={track1} type="audio/m4a" />
</audio>
<video width="320" height="240">
<source src={track1} type="video/mp4">
</source>
</video>
When I tried using the audio tag, a media player appeared on the page, but it didn't actually load the file.
I've been researching this for a couple of hours but I haven't been able to find a way of accomplishing this (it doesn't seem like it should be this hard). Does anyone have any ideas of how I might make get this working? Thanks very much
Did you check the path of your sound files is correct? I was having this same issue on a React project.
Check the network tab in Dev tools to see what the status code is for your sound file resource. If it's 206 then it's most likely a file path issue:
I have the following HTML code, but it is not working, the video does not start...
Yet, when I test this code in my browser Chromium, it works perfectly.
Any idea of the problem?
<video width="576" height="324" controls poster="">
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag or the file format of this video.</video>
My video is playing fine using your code(in chrome) without giving any troubles so, the problem is with the video you are playing but not the code.
due to Chrome removing support for h264, on some machines(it entirely depends upon the codecs installed on the computer), mp4 videos encoded with it will not work under certain circumstances these issues with video encoding formats in chrome leads the code to not working perfectly.
there are a couple of solutions in stackoverflow you can give a try:
MP4 not playing on Chrome version 27.0
html5 video issue with chrome
cheers!
I have a page hosted on my computer with Apache through XAMPP. I am using the HTML5 video tag to insert a video into the page as follows:
<video id="video1" width="480">
<source src="ad1.mp4" type="video/mp4">
Your browser doesn't support the video tag
</video>
However, when the page loads, it doesn't load the video. It also does not display the line showing lack of compatibility.
I checked the mime-types file to make sure video/mp4 was indeed in there, and it was. I also created a .htaccess file and used AddType to add in the file extensions, but to no avail.
I am able to get a different mp4 (of larger filesize) to play and display properly even though both are in the same directory. I don't have any JS code affecting the load of the video and the name of the file that should be playing is indeed "ad1.mp4".
The list of files in the htdocs folder are as follows:
video.html (the page displaying the video)
ad1.mp4 (The video in question)
content.mp4 (The video that plays properly)
If any more information is needed, don't hesitate to ask!
Any help is appreciated! Thank you very much!
I'd recommend you to read http://goo.gl/4NwNP7 and use flash as fallback option always.
You can't achieve 100% cross-browser solution with only using HTML5 video tag.
Also in your case, one of solutions is https://stackoverflow.com/a/9349984/800639
This is the relevant code to run video:
<video id="video" src="videos/clip.mp4" type='video/mp4' controls='controls'>
Your brwoser doesn't seems to support video tag
</video>
This code work fine separately, but when trying to fade it in:
function showVideoPlayer(){
console.log('video displayed');
$("#video").fadeIn('medium');
}
it doesn't seems to work and i got this:
As you can see: Video format or MIME type is not supported.
The video container is hidden in css:
#video{
position:fixed;
border:solid 1px #000000;
width:654px;
height:454px;
background-color:#FFFFFF;
left:23%;
top:11%;
display:none;
}
This is the idea, the video container is hidden (display:none), when needed, i call the function showVideoPlayer to show the video container. However that doesn't work and produce me this error in FireFox and a blank screen in Chrome and IE9.
Am i missing something? is the fadeIn function seems to get me wrong?
Firefox does not support the MPEG H.264 (mp4) format at this time, due to a philosophical disagreement with the closed-source nature of the format.
To play videos in all browsers without using plugins, you will need to host multiple copies of each video, in different formats. You will also need to use an alternate form of the video tag, as seen in the JSFiddle from #TimHayes above, reproduced below. Mozilla claims that only mp4 and WebM are necessary to ensure complete coverage of all major browsers, but you may wish to consult the Video Formats and Browser Support heading on W3C's HTML5 Video page to see which browser supports what formats.
Additionally, it's worth checking out the HTML5 Video page on Wikipedia for a basic comparison of the major file formats.
Below is the appropriate video tag (you will need to re-encode your video in WebM or OGG formats as well as your existing mp4):
<video id="video" controls='controls'>
<source src="videos/clip.mp4" type="video/mp4"/>
<source src="videos/clip.webm" type="video/webm"/>
<source src="videos/clip.ogv" type="video/ogg"/>
Your browser doesn't seem to support the video tag.
</video>
Updated Nov. 8, 2013
Network infrastructure giant Cisco has announced plans to open-source an implementation of the H.264 codec, removing the licensing fees that have so far proved a barrier to use by Mozilla. Without getting too deep into the politics of it (see following link for that) this will allow Firefox to support H.264 starting in "early 2014". However, as noted in that link, this still comes with a caveat. The H.264 codec is merely for video, and in the MPEG-4 container it is most commonly paired with the closed-source AAC audio codec. Because of this, playback of H.264 video will work, but audio will depend on whether the end-user has the AAC codec already present on their machine.
The long and short of this is that progress is being made, but you still can't avoid using multiple encodings without using a plugin.
For Ubuntu 14.04
Just removed the package Oxideqt-dodecs
then install flash or ubuntu restricted extras
and you are good to go!!
FIXED IT!
I was losing my mind over this one. Reset firefox, tried safe mode, removed plugins, debugged using developers tools. All were to no avail and didn't get me any further with getting my online videos back to normal viewing condition. This however did the trick perfectly.
Within Firefox or whatever flavor of Firefox you have(CyberFox being my favorite choice here), simply browse to https://get.adobe.com/flashplayer/
VERIFY FIRST that the website detected you're using FireFox and has set your download for the flash player to be for Firefox.
Don't just click download. PLEASE PLEASE PLEASE SAVE YOURSELF the migraine and ALWAYS make sure that the middle section labeled "Optional offer:" is absolutely NOT CHECKED, it will be checked by default so always UNCHECK it before proceeding to download.
After it's finished downloading, close out of Firefox. Run the downloaded setup file As Administrator. It takes only a few seconds or so to complete, so after it's done, open up Firefox again and try viewing anything that was previously throwing this error. Should be back to normal now.
Enjoy!
In my case, this error:
Video format or MIME type is not supported.
Was due to the CSP in my .htaccess that did not allow the content to be loaded. You can check this by opening the browser's console and refreshing the page.
Once I added the domain that was hosting the video in the media-src part of that CSP, the console was clean and the video was loaded properly. Example:
Content-Security-Policy: default-src 'none'; media-src https://myvideohost.domain; script-src 'self'; style-src 'unsafe-inline' 'self'
Good day,
I am trying to build a simple music player using the html audio tag and some javascript. When I was coding it worked ok while the files were stored locally with both safari (on an Imac) and Firefox. Then I uploaded it to my web page to test it live and had these issues:
(1) Safari on the Imac takes about a minute to load the file and start playing
(2) Safari on the iphone doesn't autoplay the files although I used the autoplay attribute in the code....see code below)
(3) Firefox just doesn't play it! (although it played just fine when the files were local)
Seems like the files are too large....my questions are: (1) is there a way to make the loading time shorter? and (2) any idea why the autoplay doesn't work on the iPhone Safari and how to get around it?
Here is the code I used for the songs:
<audio autoplay="autoplay" controls="controls">
<source src="../audio/3.ogv" />
<source src="../audio/3.mp3" />
Your browser does not support the audio element.
</audio>
thanks for your help
diego
I believe you cannot autoplay on the iPhone. I think this is a restriction imposed in order to prevent excess accidental data usage. There were some workarounds to create a fake click, but they seem to have been patched.
Firefox doesn't support MP3 via HTML5. ogv files are Ogg Video, not Audio (ogg), which could be why it's not playing in the audio tag.
As for loading time, the best way would be to compress the file as much as possible. This would reduce the download time.
Just a heads up ... since HTML 5 isn't XML based syntactically, you don't assign attributes like that.
use <audio autoplay controls> as the opening tag.