html audio tags not working in .php file - html

This is my code. I am trying to play audio file inside a .php file running it on xaamp server but the audio bar appears but is totally disabled please help
<audio controls>
<source src="ypousaf.mp3" autoplay />
Your browser does not support the audio tag.
</audio>

Mp3 file is supported by IE only.
To play audio files in other browsers you need to convert it in other formats
Here is the list of supported formats by different browsers.
You can find more at http://www.w3schools.com/html/html5_audio.asp
Audio Formats and Browser Support
Currently, there are 3 supported file formats for the element: MP3, Wav, and Ogg:
Browser MP3 Wav Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox NO
Update: Firefox 21 running on Windows 7, Windows 8, Windows Vista, and Android now supports MP3 YES YES
Safari YES YES NO
Opera NO YES YES
Here is the code i used ...
<!DOCTYPE html>
<html><body>
<audio controls>
<source src="Ellie Goulding - Burn - YouTube.mp3" autoplay />
Your browser does not support the audio tag.
</audio>
<audio controls>
<source src="Ellie Goulding - Burn - YouTube.mp3" type="audio/mpeg" autoplay>
Your browser does not support the audio element.
</audio>
</body>
</html>
Works perfect in both extensions with firefox 29 and the mp3 file is only supported by firefox only.

Related

HTML video permanently muted only Firefox

I'm including a video in a page and have had no problems in Chrome or Safari thus far, but on Firefox the viedos are muted and the volume can't be changed. Here is the video code
<video src="video/test3.MOV" controls>
<p>Your browser doesn't support HTML5 video. Here is a
</video>
Any thoughts on how to fix this?
It might be because the version of Firefox is too old. Only versions Firefox 21 (or Firefox 30 for Linux) and above can support video mp4. And even if it meets the required version there are still problems with Firefox support certain mp4's inside of .mov files. More information here about the firefox issues.
Offer other codecs. .mp4 and .webm are what I always offer. FFMpeg can transcode into these formats for you. That should fix your issue. Re: how to use FFMPeg, see Getting Started with FFmpeg, Introduction to the FFmpeg Command Line
It's really not difficult at all. View page source from here.
<video controls poster="ThroughGeorgeMichaelPalaisGarnierParis.jpg">
<source src="ThroughGeorgeMichaelPalaisGarnierParis.webm" type="video/webm">
<source src="ThroughGeorgeMichaelPalaisGarnierParis.mp4" type="video/mp4">
I'm sorry; your browser doesn't support HTML5 video in WebM with VP8/VP9 or MP4 with H.264.
</video>

HTML Video autoplay not working in Firefox

I have a website built with bootstrap and loading video in a dialog:
<video width="760" style="background-color: white;" preload controls autoplay>
<source src="....." type="video/mp4" />
</video>
Shows and works fine in IE, Chrome and Safari.
In Firefox auto play worked a few times, and now does not work at all.
No errors in console and video plays just fine manually using controls.
I have also tried script approach (without autoplay attribute):
oncanplay="$(this)[0].play()"
And works flawlessly on all browsers except Firefox.
Can anyone see what could be wrong?
I have tested this on all browser its working perfect with javascript event
<video onloadeddata="this.play();" poster="poster.png" playsinline loop muted controls>
<source src="video.mp4" type="video/mp4" />
<source src="video.mp4.webm" type="video/webm" />
<source src="video.mp4.ogg" type="video/ogg" />
Your browser does not support the video tag or the file format of this video.
</video>
The problem has an easy solution: changing the order of the videos, listing first the .mp4 source and next the .webm source made the auto-play videos run on Firefox, Explorer and Chrome, this of course is valid if you have multiple video sources.
A side note: Firefox supports H.264 on Windows 7 and later since version 21. Firefox supports H.264 on Linux since version 26 if the appropriate gstreamer plug-ins are installed. Partial support for Firefox refers to the lack of support in OSX & some Linux platforms, for Android Firefox it refers to the inability of hardware acceleration.
This worked for me for the firefox browser, but it have to be muted.
<video
width="100%"
height="100%"
onloadedmetadata="this.muted = true"
autoplay
>
<source src="assets/videos/Helpline_Video.mp4" type="video/mp4" />
</video>
First check your web page here for test
http://html5test.com/
Second inspect via code inspector and enter them in the browser to check if the are working fine or not. Or drag and drop video file over the browser to check if its working or not.
Thirdly try checking MIME Types
AddType video/mp4 for .mp4 .m4v
AddType video/ogg for .ogv
AddType video/webm for .webm
Fourthly check you html5 converter it has often problem with format conversion I had same problem year back when I was working html5 video. Changing it fixed the issue for me.
Last but not the least; Add a flash fall-back!
<object type="application/x-shockwave-flash"
data="http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf"
height="227" width="220">
Firefox Video Issue: Troubleshooting
Make sure that the server sends the video files with a correct and supported MIME type to make it work in Firefox.
link
Use source URL relative to ROOT, not Web page
Eg: src="/complete/folder/path/video.ogv"
Version of mozilla.
Mozilla Firefox (3.5 and later) supports Theora video and Vorbis audio in an Ogg container.
Firefox 4 supports WebM.
link
From Firefox 66 and aboew, you must click the unblock button on the right of browser bar to unblock Autoplay Video and Audio

HTML5 Video using video.js won't play until fully downloaded

I have a strange issue with a html5 video. It's working correctly in all browsers except in Internet Explorer. Internet Explorer 9 is always waiting for the video to be fully downloaded until playback starts. If I open the Video in Firefox, Chrome or even Opera everything is working fine.
The code snippet looks as following
<video id="video-js-10734" class="video-js vjs-default-skin" width="640" height="480" controls="controls" autoplay="enabled" data-setup="{}" poster="1"><source src="http://www.lorch.biz/fileadmin/DAM_Lorch/Bilddaten/800-Doku/web/Videos/I-Torch_Movie_Full_HD_libtheora.ogv" type="video/ogg" /> <source src="http://www.lorch.biz/fileadmin/DAM_Lorch/Bilddaten/800-Doku/web/Videos/I-Torch_Movie_Full_HD_x264.mp4" type="video/mp4" /> </video>
Did I forget about some keyword configuration or is this a "feature" in Internet &*°ç&*ç! Explorer?
Thanks a lot
It sounds like IE doesn't use the same file as other browsers.
I don't remember if IE support OGV files but if not IE should use the mp4 file you provide. It seems then your mp4 hasn't a delay set for autostart.
I have used sometimes a program called MP4box to mux or demux the file so it can start without loading everything.
May be IE doesn't support progressive download for type="video/ogg". Only for H264 and WebM. However you specidy the mp4 file. Try use type="video/ogg" and .ogg file as last option and type="video/mp4" and .mp4 file as first one.

How to Play 3gp Video in HTML5?

Playing a 3gp file with HTML5 does not work. I have Firefox 16 and Chromium Version 22 and the result I got is the following:
No video with supported format and MIME type found.
Here's the code I used:
<video controls="controls">
<source src="rtsp://v2.cache2.c.youtube.com/CiQLENy73wIaGwlkcZfgin6szRMYDSANFEgGUghzdGFuZGFyZAw=/0/0/0/video.3gp" type="video/3gpp">
Your browser does not support the video tag.
</video>

Why does my HTML5 <video> tag work in Chrome, but not in Firefox?

I’m using this code in Google Chrome and the video is working well, but in Firefox (version 11) it’s not working.
How can I make it work in Firefox?
<!DOCTYPE html>
<html>
<body>
<video width="300" height="200" controls="controls">
<source src="http://localhost/javascript/test.mp4" type="video/mp4" />
</video>
</body>
</html>
Firefox doesn't support mp4 as encoding for the video. Have a look at MDN for a compatibility table.
You would have to provide additional encoding for Firefox to work (like this example taken from MDN as well):
<video controls>
<source src="somevideo.webm" type="video/webm">
<source src="somevideo.mp4" type="video/mp4">
I'm sorry; your browser doesn't support HTML5 video.
<!-- You can embed a Flash player here, to play your mp4 video in older browseres -->
</video>
UPDATE 01/19/2016:
Now Firefox supports mp4 video formats. So this question should be automatically answered because of update by Firefox browser. Please let us know if your video still does not work.
Since version 4, Firefox only supports WebM, VP8 and Vorbis video format. (Firefox 3.5 supports Ogg, Theora and Vorbis.)
See:
https://developer.mozilla.org/En/Media_formats_supported_by_the_audio_and_video_elements.
http://diveintohtml5.info/video.html#what-works
You’ll need to create another version of your video in a Firefox supported format, and add another <source> element for it.
For an example, see:
http://diveintohtml5.info/video.html#example