I am working on a website in which I am displaying audio/video content. For videos I am using HTML5 video tag. However, in case of audio, I need to play the audio as well as show an image in the audio player. Is there any html5/javascript player that supports showing of image in the player while playing audio content?
<audio controls>
<source src="http://hcmaslov.d-real.sci-nnov.ru/public/mp3/Cranberries/Cranberries%20'Dreams'.mp3" type="audio/mpeg">
</audio>
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/d/dc/Everybody_else_is_doing_it_so_why_can%27t_we_%28album_cover%29.jpg/220px-Everybody_else_is_doing_it_so_why_can%27t_we_%28album_cover%29.jpg">
<video> and <audio> tags are almost identical, <video> tags have no trouble playing audio files. Use the poster attribute to display an image.
Demo
<video controls autoplay poster='https://upload.wikimedia.org/wikipedia/en/thumb/d/dc/Everybody_else_is_doing_it_so_why_can%27t_we_%28album_cover%29.jpg/220px-Everybody_else_is_doing_it_so_why_can%27t_we_%28album_cover%29.jpg'>
<source src="http://home.saske.sk/~slavo/Audio/FOLK/Cranberries/The%20Cranberries%20-%20No%20Need%20To%20Argue/10%20-%20The%20Cranberries%20-%20Dreaming%20My%20Dreams.mp3" type="audio/mpeg">
</video>
Related
how to make html5 video controls always on/show (without mouse hover) .? currently the video controls show only on mouse hover while playing video. i have tried "controls:true" attribute but which does not help in video tag. looking for latest Chrome and Fire fox browsers implementation.
<video width="320" height="240" controls="true">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
I have simple audio in my app I want to add audio to play automatically when the user open in my site via LinkedIn browser
Here is my html
<audio onloadeddata="this.play()" id="audioplayer" playsinline="true" webkit-playsinline controls loop autoplay muted>
<source src="audio/muzyka_meed_loop.mp3" type="audio/mpeg"> Your browser does not support the audio element.
</audio>
Unfortunately, this is not working
What do I need to change to get this working?
You have do it like below. Add "autoplay" to audio tag.
<audio autoplay id="audioplayer" controls>
<source src="audio/muzyka_meed_loop.mp3" type="audio/mpeg">Your browser does not support the audio element.
</audio>
Note: The audio tag is not supported in Internet Explorer 8 and earlier versions.
I almost made it so I can have background music but when I go to my localhost it just downloads the music instead of playing it but in the full path one it plays it in the background so how can I prevent this from happening so it won't download in localhost?
Here is the code for it and the file name is actually "Sound.mp3" as well.
<embed src="Sound.mp3" autostart="true" loop="true"width="2" height="0" controls>
Any ideas of what do add to make it just play and not download?
I am actually working on a page that looks pretty cool and wanted to add background music cause it is actually an "under construction" page and wanted to make it look cooler with background music.
The prefered way of adding audio in Html5 is to use the audio element.You can achieve them by using the following codes,
This code will play the Sound.mp3 file with the controllers displayed for the user. So the users can control the background music. With the autoplay attribute, the music will start automatically.
<audio controls="controls" autoplay="autoplay"><source src="Sound.mp3" type="audio/mpeg" /></audio>
If you don't wanna show the controls, you can simply remove the controls attribute. As follows,
<audio autoplay="autoplay"><source src="Sound.mp3" type="audio/mpeg" /></audio>
But the song will autoplay because the autoplay attribute is added.
Unfortunately, not all browsers support mp3, so it's a good idea to include multiple versions of the file in different formats. As follows,
<audio autoplay="autoplay">
<source src="Sound.mp3" type="audio/mpeg" />
<source src="Sound.wav" type="audio/wav" />
<source src="Sound.ogg" type="audio/ogg" />
<p>This content is displayed by browsers that don't recognize the audio element.</p>
</audio>
Hope it helped. Good luck with your project. :)
More Attributes
loop - Automatically loop (keep playing over and over).
Use Tag to attach the attach the audio file to the html file.
If your audio file is Sound.mp3 then include it in <audio> tag.
<audio controls>
<source src="Sound.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
or use the below code
<audio src="Sound.mp3"> </audio>
I don't understand, I have a project with Angular2 and in my home component, I try to display a video with html5. The problem is that sometimes, on some videos, the tag doesn't play sound:
<div class="video-gallery">
<video id="video" controls preload="auto" width="640" height="420" poster="assets/imgs/video_logo.png" >
<source src="assets/videos/{{videos[0].name + videos[0].extension}}" type="video/mp4" />
</video>
</div>
When I say 'on some videos' I mean it's not up to the extension, some videos are mp4 and play sound and others (mp4) don't. Same thing for mkv for example. I only get the video but no sound. What could be the problem ? I work with Chrome's last version so I don't think it's from chrome because it is supposed to support video and sound of html5 . Can it be from the video tag ?
Thanks
Is it possible play video from remote download video link.
For example I have link http://vidrack-media.s3.amazonaws.com/student_47e96b83-989e-437a-8953-0d068308e25f.mp4
I wanna render any video player where I can watch this video.
Yes you can, in nearly every player.
<video width="320" height="240" controls>
<source src="http://vidrack-media.s3.amazonaws.com/student_47e96b83-989e-437a-8953-0d068308e25f.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>