The WAV format html5 does not work in the single audio tag. I have not tried to convert it to mp3 for what I have to do for it. I did not try to translate it to ogg.
<audio controls>
<source src="horse.ogg" type="audio/">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
To play a wav file you would use the audio/wav type.
So, adding a tag like this:
<source src="horse.wav" type="audio/wav">
However, .wav files don't work natively in IE.
See here: https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats
If you tried the above tag, and it isn't working in a non-IE browser, you may also have to set a mime-type on your web server to stream it.
Related
I tried this code but video is just continuing to load, not to playing.
I also tried video codec H-264 but that is not working.
Next I tried to convert mp4 video to webm but that did not help either
Can anyone tell me how to do this using jquery and ajax?
<video controls muted>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Did you checked by drag and drop to open the movie.mp4 or the movie.ogg file?
If the file does not work by simply opening it using a browser, it might be the file's problem, not the code or the browser.
For the file type support per browsers please refer the "Can I use?" pages:
MPEG-4/H.264
Ogg/Theora
I have a video tag in HTML5 to show the resources from a mobile app. The users can upload any kind of video with their devices.
This is the tag:
<video width="100%" controls autoplay onended="closeVideo(this)">
<source src="route.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'/>
<source src="route.mp4" type='video/webm; codecs="vp8, vorbis"'/>
<source src="route.mp4" type='video/ogg; codecs="theora, vorbis"'/>
Your browser can't play this kind of video, sorry.
</video>
Most of the videos work properly, but a few of them display the sound but no the image.
The problem is not in the files, because they work properly if downloaded in the computer.
I can't figure out a pattern in the videos that doesn't work, they have different formats, sizes, proportions and fps.
Thanks for your answers
I recommend using a transcoding service (SYNQ.fm, Encoding.com, Amazon Elastic Transcode, Zencoder) to convert the videos that your users upload, this way you can guarantee they will play properly (assuming a video that is uploaded is not corrupt or created with an unknown video codec) since you cannot assume users will upload videos that are already compatible for playback on all the various mobile devices and browsers available. Thus, your code would look something like this:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Where the mp4 file you provide is encoded with H.264 codec and the ogg file provided is encoded with the Ogg codec. In terms of transcoding, I recommend that the video files that are uploaded to your system are transcoded into mp4 and either webm or ogg. This will also help make your app more reliable in terms of playback and since you define the video outputs you will get consistency instead of different dimensions, fps, codecs etc.
Here is some documentation that can help: https://www.w3schools.com/html/html5_video.asp , this will also tell you what browsers are compatible with what video codec as well as what browsers support HTML5 video.
I'm creating a webpage that is using HTML5 for videos. I tried one video, and it loaded and played successfully. But then, the other video does not even load. How can I fix this? The code is the same for the working video and the not working video
<video src="SnakeVids/sukyandaru.mp4" width="350" height="300" controls="controls" type="video/mp4"></video>
Btw, the difference is that the first video is a .mp4, and the other one I converted from .flv to .mp4.
After reading the comments, it looks like your video was converted into a format that is not compatible with Google Chrome. MP4 supports some codecs but only a small subset is widely supported, and Chrome supports these video formats for the <video> tag.
You should encode your video using a supported codec.
Additionally, you might want to provide different sources for compatibility with other browsers and platforms.ogg is a safe choice. A simplified example extracted from w3schools:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
You can also use third-party libraries, like videoJS, that will help you with video formats support. Some of them even have a flash fallback.
I have a 100% valid html5 document, on every other browser on every OS, there are no problems, but on IE9, I always just get the black rectangle with a red cross on it instead of audio player. I thought that it might be conflicting somehow with the activeX.
Thanks.
<audio controls="controls">
<source src="/files/NRUPPLYSNINGEN_XTRA.mp3" type="audio/mp3">
<source src="/files/NRUPPLYSNINGEN_XTRA.wav" type="audio/wav">
<source src="/files/NRUPPLYSNINGEN_XTRA.ogg" type="audio/ogg">
Your browser does not support this audio format.
</audio>
Maybe a silly question, but could it be that the path to the audio files are not correct?
Chrome renders the audio player nicely even if the audio files cannot be found. However, IE9 does not seem to do that.
If I replace the audio file with a working one then the cross goes away and everything works fine.
<audio controls="controls">
<source src="http://open.is/jQueryMusicPlayer/betty.mp3" type="audio/mp3">
Your browser does not support this audio format.
</audio>
Try it: http://jsfiddle.net/PFTaN/
I cannot figure out how to incorporate ogg files into a playlist for an HTML5 tag. Right now I read files from a directory JSON object that formats as follows:
var playlist = [{"url":"mp3\/122911.mp3","title":"122911"},
{"url":"mp3\/100909.mp3","title":"100909"},{"url":"mp3\/011110.mp3","title":"011110"},
{"url":"mp3\/061207C.mp3","title":"061207C"},{"url":"mp3\/110309.mp3","title":"110309"},
{"url":"mp3\/120409.mp3","title":"120409"},{"url":"mp3\/031608.mp3","title":"031608"},
{"url":"mp3\/100609C.mp3","title":"100609C"},{"url":"mp3\/120408.mp3","title":"120408"},
{"url":"mp3\/012908.mp3","title":"012908"},{"url":"mp3\/032107.mp3","title":"032107"}]
that works wonders and loading the ogg files into that object is not the issue. I just need to know how to tell firefox that the ogg files are there. Is there a parameter I'm missing in order to do that along with 'url' and 'title' in the JSON? I know it can go right in the audio tag if I'm just creating everything statically, but I'm not. The audio tag is simply:
<audio class="aud" autoplay>
<p>Your browser doesn't support HTML 5 audio.</p>
</audio>
and it works just fine with the mp3s in chrome and safari so far. I know I'm missing something simple. I have the ogg files, just confused about the parameters in the playlist I suppose. Thanks!
How this is working?
<audio class="aud" autoplay>
<p>Your browser doesn't support HTML 5 audio.</p>
</audio>
There is no source. Are you dynamically adding <source> to the <audio>?
Let me tell how it works:
You can specify multiple <source for the <audio>. Browsers will look top to bottom in the <source>s and try to play the first one it supports. So, if you write this way:
<audio class="aud" autoplay>
<source src="music.mp3" type="audio/mpeg">
<source src="horse.ogg" type="audio/ogg">
<p>Your browser doesn't support HTML 5 audio.</p>
</audio>
This will be sufficient. Browses, that support mp3, will use the first source. If the browser, like firefox, that does not support mp3 will discard this and look next. It will find .ogg next and will play that one.
You can see more here:
http://www.w3schools.com/html/html5_audio.asp