I want to style HTML5 Audio like this
<audio controls>
<source src="#Model.Audio.Mp3.Url" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
The above code creates the following audio
Has someone done similar styling or is it possible to do this styling in HTML5 audio player
Any suggestions would be appreciated
Unfortunately not in a cross browser solution as they are built natively. There are a lot of -webkit- based psuedo elements that you can target for styling but those only work on webkit based browsers (eg: This won't work on Firefox/IE/Edge). However, you can utilize the audio API and there is a good answer on this duplicate SO question about using the JW Player which is a wrapper around this API and gives you styling control.
Related
Is it possible to style the width of the HTML5 audioplayer in %?
I tried it, but I found no solution.
No, it isn't - at least not reliably across browsers and OSs. Every browser (or mobile OS) has its own design for the HTML5 audio player / audio tag, and most of them won't react to any attempts to change it via CSS at all.
One way to work around that is to use the jQuery plugin "jPlayer" (http://jplayer.org/) which uses HTML5 audio wherever possible, has a Flash fallback option, and has its own default "skin". But it also allows you to build your own skin for it. That requires really getting into its structure (i.e. learning by trying), but once you've understood it, it gives you quite some freedom to create your own audio player design.
If I understood it correctly, they hide the default interface of the HTML5 audio player and set up a HTML/JS structure which accesses the available JS events controling audio playback. Those html elements have classes which then can be styled by yourself via CSS rules.
In 2016 most browsers support simply applying CSS width %:
audio {
width: 80%
}
<audio controls id="player" src="https://ia801009.us.archive.org/4/items/BeatlesGreatestHits/02%20With%20a%20Little%20Help%20From%20My%20Friends.mp3">
<source src="" type="audio/mpeg"><br>
</audio>
Tested on Firefox & Chromium
<audio controls id="player" style="width: 80%;">
<source src="" type="audio/mpeg"><br>
</audio>
OR in your stylesheet you can give a width to the "player" ID.
<style>
#player { width: 80%;}
</style>
Hi friends i used video tag in html, ie8 its not working. how to implement video in ie8.
<video width="300" height="200" controls>
<source src="pencuin.mp4" type="video/mp4">
</video>
Can any one suggest me solution, thanks.
IE8 does not support the video tag. In this case, IE8 displays instead the contents of the video tag, which is hidden in browsers which support the tag.
To support IE8, find a video player using Flash and place the <object> tags inside the <video> and follow the instructions for that video player to choose the right video for it to play. Newer browsers will use the video tag and will not require Flash, but users of older browsers must use Flash.
Try SWFObject: Javascript Flash Player.
Try this example: http://code.tutsplus.com/articles/how-to-play-video-using-an-open-source-player--net-4144
I am trying to learn web development from w3schools.com
Currently I am studying HTML5 and I had a question on a code which I do not understand. If anyone could help it would be great! :)
In the below code, what is the function of the code
The code seem to run in the same way even if I delete this code.
Here is the link where I found this code:
<!DOCTYPE html>
<html>
<body>
<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>
</body>
</html>
Thanks in advance! :)
Try using 3rd party HTML5 video player library, e.g. VideoJS for better support of different formats, browsers, as well as providing Flash player fallback.
From my understanding you are asking what exactly the
Your browser does not support the video tag.
is doing there and why we got it there...
Just so you can understand this better follow the below steps:
Launch Internet Explorer
Go at Tools and turn Compatibility View on
Visit the site you mentioned (on IE with Compatibility View on)
You will see you will be getting the message "Your browser does not support the video tag." (because internet explorer with compatibility view on doesn't support HTML5).
If you change that message to the code, this will be reflected to the right of your screen.
Is this a bit more clear now?
Video tag <video> is an HTML 5 Tag, which is for now supported by very few broswer vendors. The current browser that you are running your code does not support this tag so you are getting this error - "Your browser does not support the video tag.", To cater this you can learn about "Modernizr" is a small JavaScript library that detects the availability of native implementations for next-generation web technologies, i.e. features that stem from the HTML5 and CSS3 specifications. Many of these features are already implemented in at least one major browser (most of them in two or more), and what Modernizr does is, very simply, tell you whether the current browser has this feature natively implemented or not.
I want to play a mp3 audio file in HTML. I don't want to display the whole player with controls like Volume etc.
I just need a play/pause button, Designed by me, not the core design of some player, like yahoo player, or google one.
For example the audio will be autoplay. When a button (probably an image) is clicked it will pause, and when that image is clicked again, the audio will play again.
There are quite few examples here : http://www.w3schools.com/html/html_sounds.asp
Can I control any of them to play/stop from JS code ?
You can use the html5 audio tag. You can specify your own controls for playback.
<audio preload="auto" autobuffer>
<source src="elvis.mp3" />
<source src="elvis.wav" /> <!-- fallback if no mp3 support in browser -->
</audio>
This is a jQuery solution.
http://jsfiddle.net/QPW27/109/
This is what your non-jQuery solution would look like.
var foo = document.getElementById('player');
foo.pause(); //just bind play/pause to some onclick events on your page
foo.play();
Different browsers support different audio formats. You can specify fallback audio versions though. This website has a nice chart of browser support as of July 2011.
Hopefully, in a few years, the HTML5 audio API will be supported accross more browsers, but currently, playing sounds requires either a lot of browser-specific hacks to get things working, or reliance on a browser plugin like flash.
In the meantime, I reccomend using SoundManager2. It's fairly easy to work with and will involve much less headache than doing it yourself.
Audio.js looks like it has the player styling features you're looking for, with a graceful degradation to Flash if the browser doesn't support the new audio API.
You can play audio by using embed tag
<!DOCTYPE html>
<html>
<body>
<p>Play mp3</p>
<p>Play wav</p>
<script src="http://mediaplayer.yahoo.com/js"></script>
</body>
</html>
I need to play a mp3 audio file when the user clicks on a image. I only want to audio to play, i.e. there should be no controls, widgets, etc. Nor should the browser launch an external application.
Edit: ok, I might be able to try out flash. recommendations for a lightweight flash player?
Now there's a way to do it. Put this: <audio src="sounds/game-welcome.mp3" style="display:none;" autoplay> (Replace sounds/game-welcome.mp3 with your file)
You could do this:
<embed src="blah.wav" autostart=false loop=false>
... but playing sound without flash is evil and will lead to issues cross browser even if there is some solutions.
You could also use HTML5 and the audio tag:
<audio src="horse.ogg" controls="controls">
Your browser does not support the audio element.
</audio>
... but this won't be supported by all browsers.
EDIT: For a flash player you could use this one or this very simple one... there are tons! Try out examples and see what's best for you.
I'm not sure if you can still benefit from these, but SoundManager 2 and jPlayer are two easy to use audio players. Both are instantiated using JavaScript, call a Flash file behind the scenes, and can be styled using HTML and CSS.
Let me correct this. With HTML5 .ogg file will play in FireFox only. Adding Controls element will display controls, to hide controls simply do not add controls element, but again it will only work in FireFox with .ogg file. FireFox does not support MP3 files in HTML5, only Chrome and Safari so far, may be IE9 will later. Your best bet is Flash. Good luck.
just do this:
controls="false"
it's a boolean value