I created my html5 video section, but i'm using it to display video-ads before every video on my page.
The problem is that i want to show the video with only a big play button and the audio button, without the autostart (so the video can be played on every devices).
How to modify it?
My Code:
<video id="advvideo" controls width="100%" height="auto">
<source src="images/videos/promo.mp4" type="video/mp4" >
<source src="images/videos/promo.ogg" type="video/ogg">
video not supported
</video>
you can't control controls attribute of html5 <video> tag to change play button style.
For big play button you can upload your ad in youtube and use that youtube video with object or embed or iframe tag.
I prefer <iframe> tag.
Ex:
<iframe width="425" height="344" src="https://www.youtube.com/embed/F9Bo89m2f6g" frameborder="0" allowfullscreen></iframe>
<html><body><video src="C:\Users\vps\Desktop\v.mp4" width="50%" controls>
<p>If you are reading this, it is because your browser does not support the 'video' element. Try using the 'object' element listed further down the page.</p></video><p>If you can see the video controls but the video doesn't play when you click the "Play" button, your browser might not support this file type (i.e. <code>Ogg</code>). In this case, try the same code, but with a different file format.</p>enter code here</video></body></html>
Hope this helps:
<video width="300" height="400" id="vid" controls>
<source src="https://developer.apple.com//live-photos/assets/boy.mov" type="video/mp4">
Your browser does not support the video tag.
</video>
Refer the below link, This will explain about adding video file.
https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video
I added some music to my website that starts when you load it. I also want to give the option to pause/unpause it. What must I do to add control?
<embed controls autostart="true" height="0" loop="true" src="URL://music-file" width="0" />
Use HTML5
A simple way to achieve this is, to use HTML5 and it's audio tag.
<audio controls autoplay>
<source src="MP3 PATH" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
I want to autoplay a MP3 audio file and I don't want the player to be visible.
<div id="music"><embed src="Comfortably_Numb.mp3" autostart=true loop=false></div>
When I added display:none to the audio tag using css, it doesn't play the music at all.
Could someone explain me how to play the music without displaying the player?
Alternatively you can try the basic thing to get your need,
<audio autoplay loop>
<source src="johann_sebastian_bach_air.mp3">
</audio>
For further reference click here
If you are using React, make sure autoplay is set to,
autoPlay
React wants it to be camelcase!
"Sensitive" era
Modern browsers today seem to block (by default) these autoplay features. They are somewhat treated as pop-ops. Very intrusive. So yeah, users now have the complete control on when the sounds are played. [1,2,3]
HTML5 era
<audio controls autoplay loop hidden>
<source src="audio.mp3" type="audio/mpeg">
</audio>
Early days of HTML
<embed src="audio.mp3" style="visibility:hidden" />
References
Jer Noble, New <video> Policies for iOS, WebKit, link
Allow or block media autoplay in Firefox, FireFox Help, link
Mounir Lamouri, Unified autoplay, Chromium Blog, link
Embedded content, World Wide Web Consortium, link
Sometimes autoplay is needed. Someone once pointed out that the famous Les Paul Google Doodle (2011) required autoplay, even though the sound didn't play until you moused over the guitar strings. If it's done with class and great design it can be beautiful (especially movie websites with immersive design)
You can use this simple code:
<embed src="audio.mp3" AutoPlay loop hidden>
for the result seen here: https://hataken.000webhostapp.com/list-anime.html
I used this code,
<div style="visibility:hidden">
<audio autoplay loop>
<source src="Aakaasam-Yemaaya Chesave.mp3">
</audio>
</div>
It is working well but i want stop and pause button. So, we can stop if we don't want to listen.
<div id="music">
<audio autoplay>
<source src="kooche.mp3" type="audio/mpeg">
<p>If you can read this, your browser does not support the audio element.</p>
</audio>
</div>
And the css:
#music {
display:none;
}
Like suggested above, you probably should have the controls available in some form. Maybe use a toggle link/checkbox that slides the controls in via jquery.
Source: HTML5 Audio Autoplay
You Could use this code, It's Works with me
<div style="visibility:hidden">
<audio autoplay loop>
<source src="../audio/audio.mp3">
</audio>
</div>
For future reference to people who find this page later you can use:
<audio controls autoplay loop hidden>
<source src="kooche.mp3" type="audio/mpeg">
<p>If you can read this, your browser does not support the audio element.</p>
</audio>
What I did was this:
<div>
<embed src="sample.mp3" autostart=true loop=false width="1px" height="1px">
</div>
You still hear the audio autoplay on the page, you dont see it, and it takes little to no space in your code! "Win-Win situation!"
I want to add a html5 audio player to a page on my website, but I want people to be able to download the track as well.
Obviously i could just ad a link near by for that, but i would like to have a button within the player itself. Is this possible? I've haven't seen any examples with this feature.
<audio controls="controls" controls="download"> <br>
<source src="horse.ogg" type="audio/ogg" />
<source src="horse.mp3" type="audio/mp3" /><br>
</audio>
Download audio