Something really akward is happening in my code, the autoplay for audio is not working.
Basically, every website code that i put this code the music autoplays but in this one is not working.
Find the footer code:
<footer>
<ul>
<h1>
<img src="images/topoPirelli.png" alt="">
</h1>
</ul>
<audio class="audio" loop autoplay="autoplay" controls>
<source src="1.ogg" type="audio/ogg">
<source src="1.mp3" type="audio/mpeg">
</audio>
</footer>
</div>
</body>
</html>
I had the same problem.
I solved it by using jquery in the end:
$('audio').on('canplay', function() {
this.play();
});
Edit:
Nowadays I noticed a lot of browsers don't allow autoplay to work if the video sound. So a solution could be adding the muted attribute.
<video autoplay muted>
Try this:
<audio class="audio" controls autoplay>
<source src="./1.ogg" type="audio/ogg">
<source src="./1.mp3" type="audio/mpeg">
<!-- <embed height="50" width="100" src="./1.mp3"> NOT NECESSARY -->
</audio>
Related
I am running a content.js on a youtube page and i want it to disable the controls of the youtube video. I am getting the video by video=document.querySelector('video'); and when trying to do: video.controls=false; it does'nt work. Would love some help
here is the video tag when I run the code on youtube's console:
let video = document.getElementById('vid');
video.removeAttribute('controls')
<div style="display:flex;flex-direction:column">
Vid 1 :
<video id="vid" controls>
<source src="#" />
</video>
Vid 2 :
<video id="vid2" controls>
<source src="#" />
</video>
</div>
See this post, on your <video> tag, you dont want to put controls if you don't want them
quick example :
<video width="400px" height="400px" controls> // this will show controls
<source src="link" />
</video>
<video width="400px" height="400px"> // this won't show controls
<source src="link" />
</video>
I've used #wOxxOm advice and figured out how to hide the play button and the timeline bar.
Here is the used code:
playButton=document.getElementsByClassName("ytp-play-button ytp-button")[0];
bar=document.getElementsByClassName("ytp-progress-bar-container")[0];
playButton.style.display="none";
bar.style.display="none";
On firefox the poster image completely loads before video starts. Is it possible to force it to play video first with either pure JS or jquery? Doesn't matter if it stops to buffer, i just don't want to see the poster first.
Using standard code:
<video class="myvideo" width="500" height="700" poster="" autoplay muted>
<source src="" type="video/webm">
</video>
Super easy fix just needed a preload="none"
You could try to play the video per JavaScript when it has been loaded. To do that, you will have to add an id to the video.
<video id="myivdeo" class="myvideo" width="500" height="700" poster="" autoplay muted onload="javascript:this.play();">
<source src="" type="video/webm">
</video>
~ MarvMan
Just needed to include preload="none".
<video class="myvideo" width="500" height="700" autoplay muted preload="none" poster="" >
<source src="" type="video/webm">
</video>
I am coding an HTML Website and I embedded the video successfully.
<section class="section1" id="videopage">
<video width=100%, playsinline autoplay muted loop>
<source src="Intro_BLACK.mp4" type="video/mp4"/>
</video>
</section>
This worked very well. I want to know, however, how can I link a website on this embedded video. If I click the video, I want to redirect to another webpage. I tried the below code, but it didn't work. Thanks in advance.
<section class="section1" id="videopage">
<video width=100%, playsinline autoplay muted loop>
<a href="http://www.naver.com" target="_blank">
<source src="Intro_BLACK.mp4" type="video/mp4"/>
</video>
</section>
You need to enclose the video element in the a like so:
<section class="section1" id="videopage">
<a href="http://www.naver.com" target="_blank" >
<video width="100%" playsinline autoplay muted loop >
<source src="Intro_BLACK.mp4" type="video/mp4"/>
</video>
</a>
</section>
Hello I have a series of audio clips.
<div class="audio-wrapper">
<audio controls>
<source src="aduio1.mp3" type="audio/mpeg">
</audio>
</div>
<div class="audio-wrapper">
<audio controls>
<source src="aduio2.mp3" type="audio/mpeg">
</audio>
</div>
<div class="audio-wrapper">
<audio controls>
<source src="aduio3.mp3" type="audio/mpeg">
</audio>
</div>
<div class="audio-wrapper">
<audio controls>
<source src="aduio4.mp3" type="audio/mpeg">
</audio>
</div>
In my actual code the audio is spread out through a large wordpress page.
I was wondering if it was possible to play the next one after one above it finishes? For example if one near the top of html is played then it will find the next down and play that, and so one.
For example if someone pressed play on the first one and it finished till the end. The one below it would start playing, and so on.
Another example if someone hit play on the 3rd one and that one finished, Then the 4th one would start playing.
Thanks for any help!
(think podcast site)
You can attach ended event to ".audio-wrapper audio" selector, check if $(this).parent(".audio-wrapper").next(".audio-wrapper") exists using .is(), if true, call .play()
const src = "https://upload.wikimedia.org/wikipedia/commons/4/4d/%22Pollinate%22-_Logic_Synth_and_Effects_Demonstration.ogg";
$(".audio-wrapper audio")
.each(function() {
this.src = src;
})
.on("ended", function(event) {
let next = $(this).parent(".audio-wrapper")
.next(".audio-wrapper").find("audio");
console.log(next)
if (next.is("*")) {
next[0].play()
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="audio-wrapper">
<audio controls>
</audio>
</div>
<div class="audio-wrapper">
<audio controls>
</audio>
</div>
<div class="audio-wrapper">
<audio controls>
</audio>
</div>
<div class="audio-wrapper">
<audio controls>
</audio>
</div>
I am a student studying computer programming. Chrome and Firefox are not loading my video or audio.
<p>
<audio controls>
<source src="Piano.mp3" type="audio/mpeg">
</audio>
</p>
<p>
<video width="320" height="240" controls>
<source src="Son.mp4" type="video/mp4">
</video>
</p>
You need to put Son.mp4 and Piano.mp3 at the same folder as the html