I have an audio component declared in React with controls like this:
<audio controls>
<source src={url} />
</audio>
This is working in all the browsers except Safari. When I try to use the audio controls it only appears the speed of the audio (0.5x, 1x, 1.25x, etc...) but there is no download option.
What am I missing?
try adding more Media container formats on order to support more platforms and browsers :
<audio controls>
<source src={url} type="audio/mpeg" />
<source src={url} type="audio/ogg" />
</audio>
Related
I've been looking at many answers on how to troubleshoot html5 videos that aren't playing on a mobile device, but most are suggesting including mute or playsinline. Currently, my background video is playing perfectly fine on a computer, but still doesn't play on any of the mobile browsers. In fact, nothing gets loaded and only shows a blank page.
<div className="fullscreen-video-wrap">
<video playsinline loop autoPlay muted autobuffer poster="./media/bg.jpg">
<source src={require("./media/web-720cmp.mp4")} type="video/mp4" />
<source src={require("./media/web-720cmp.webm")} type="video/webm" />
<source src={require("./media/web-720cmp.ogv")} type="video/ogg" />
<img src={require("./media/bg.jpg")} alt=""/>
Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
</div>
The Problem
It looks like muted doesn't work right when using the video tag with react. The muted attribute is required for videos to autoplay on mobile.
If you inspect the html of your webpage in your browser, you should see something like this for your video tag. Notice how there is no muted attribute. There's also no autobuffer or playsinline
<video loop="" autoplay="" poster="/media/bg.jpg">
<source src="/media/web-720cmp.mp4" type="video/mp4">
<source src="/media/web-720cmp.webm" type="video/webm">
<source src="/media/web-720cmp.ogg" type="video/ogg">
<img src="/media/bg.jpg" alt="">
Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
The Solution
React should probably fix this, until then you can use something called dangerouslySetInnerHTML to insert an html block into your code. It would look like this
<div className="fullscreen-video-wrap" dangerouslySetInnerHTML={{ __html: `
<video playsinline loop autoPlay muted autobuffer poster="./media/bg.jpg">
<source src="${require('./media/web-720cmp.mp4')}" type="video/mp4" />
<source src="${require('./media/web-720cmp.webm')}" type="video/webm" />
<source src="${require('./media/web-720cmp.ogg')}" type="video/ogg" />
<img src="${require('./media/bg.jpg')}" alt=""/>
Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
` }}></div>
I'm trying to display a video on my website. Here is the code:
<video controls>
<source src="my_location.mp4" type="video/mp4" />
<source src="my_location.ogv" type="video/ogv" />
<source src="my_location.webm" type="video/webm" />
Your browser does not support this content
</video>
It worked for all browser but the problem is that the pause button on Firefox does not work event if I have the controls attribute on my video and ogv format.
Does someone know why ?
There is no dedicated pause button - instead the play button is toggled with a pause button after it's clicked. See also the example at w3schools.com:
http://www.w3schools.com/HTML/html5_video.asp
ADDITION:
This in your code:
<source src="my_location.ogv" type="video/ogv" />
should be
<source src="my_location.ogv" type="video/ogg" /> .
(ogg instead of ogv on the file type / not on the file extension itself).
I am using the chrome 37 and firefox 31.
When I add the audio tag for chrome. It just doesn't play. There is a cross over the sound control icon
On firefox v31 it just disappears. When I check th w3schools website it works fine. I am using exactly the same code they are using with and doubled check the audio src to make sure its correct but it still doesn't play. Can anyone please help me figure out whats going on??
Below is my code
<audio controls>
<source src="new_simplemenu_order.mp3" type="audio/mpeg" >
Your browser does not support the audio element.
</audio>
I was having the same problem.
It seems to work by if you change your file type to .ogg and also don't use underscores in your file name.
Also, try altering your code to this (credit to superuser.com):
<audio controls preload="auto">
<source src="NewSimpleMenuOrder.ogg" type="audio/ogg" />
</audio>
You can hide the controls by doing the following
<audio preload="auto">
<source src="NewSimpleMenuOrder.ogg" type="audio/ogg" />
</audio>
And autoplay by doing this:
<audio autoplay>
<source src="NewSimpleMenuOrder.ogg" type="audio/ogg" />
</audio>
(I hope this fixes your problem!)
I have a video tag looking like this:
<video width="380px" height="190px" controls>
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogv" type="video/ogg" />
Your browser does not support the video tag.
</video>
This plays the video in Firefox and Chrome. However, IE9 and 10 simply states unreadable source (the video 'box' itself turns up so the tag is supported). Safari doesnt seem to support the video tag and thus I only see my fallback message. However, if I go to the URL directly in any browser I can watch the movie in Firefox + Chrome and download it in IE + Safari.
What should I do to make the video playable in all browsers?
Add this line in your head somewhere.
<script src="http://api.html5media.info/1.1.5/html5media.min.js"></script>
Also try putting your source in the opening video tag.
<video source src="movie.mp4" type="video/mp4" width="380px" height="190px" controls></video>
Hope fully that helps
I usually have four versions of the same video for cross-browser compatibly:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
<object data="movie.mp4" width="320" height="240">
<embed src="movie.flv" width="320" height="240">
</object>
</video>
.mp4, .webm, .ogv, and a flash fallback .flv. This has worked well for me cross-browser. Another thing to note is that for mobile, a higher-optimised .mp4 video is more likely to work (I've had issues with this in the past).
I want to play a sound file on my web-page in the back-ground(don't want Media player UI to appear), my web-site will run on Fire-Fox, i used the Embed element and set the Hidden attribute to be true <embed name="myMusic" src="Masgon.mp3" type="audio/midi"
autostart="false" Hidden="true" loop="true"></embed>
the problem is that no sound is played unless i removed the hidden attribute on this case the sound file is played and the media player UI appears but i don't want that.
<audio src="/music/good_enough.mp3">
<p>If you are reading this, it is because your browser does not support the audio element. </p>
</audio>
and if you want the controls
<audio src="/music/good_enough.mp3" controls>
<p>If you are reading this, it is because your browser does not support the audio element.</p>
</audio>
and also using embed
<embed src="/music/good_enough.mp3" width="180" height="90" loop="false" autostart="false" hidden="true" />
<audio src="/music/good_enough.mp3" autoplay>
<p>If you are reading this, it is because your browser does not support the audio element. </p>
<embed src="/music/good_enough.mp3" width="180" height="90" hidden="true" />
</audio>
Works for me just fine.
Though this might be too late to comment but here's the working code for problems such as yours.
<div id="player">
<audio autoplay hidden>
<source src="link/to/file/file.mp3" type="audio/mpeg">
If you're reading this, audio isn't supported.
</audio>
</div>
<audio controls autoplay loop>
<source src="path/your_song.mp3" type="audio/ogg">
<embed src="path/your_song.mp3" autostart="true" loop="true" hidden="true">
</audio>
[ps. replace the "path/your_song.mp3" with the folder and the song title eg. "music/samplemusic.mp3" or "media/bgmusic.mp3" etc.
With me the problem was solved by removing the type attribute:
<embed name="myMusic" loop="true" hidden="true" src="Music.mp3"></embed>
Cerntainly not the cleanest way.
If you're using HTML5:
MP3 isn't supported by Firefox. Wav and Ogg are though.
Here you can find an overview of which browser support which type of audio:
http://www.w3schools.com/html/html5_audio.asp
If you don't want to show controls then try this code
<audio autoplay>
<source src="song.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
if you want it just normal:
<audio src="sus.mp3">
<script>alert("Your browser doesn't support the Audio tag!")</script>
</audio>`
if you want it to automatically start on load: (Not supported by chrome)
<audio src="sus.mp3" autostart="true">
<script>alert("Your browser doesn't support the Audio tag!")</script>
</audio>
if you want the controls
<audio src="sus.mp3" autostart="true" controls>
<script>alert("Your browser doesn't support the Audio tag!")</script>
</audio>