HTML Video Autoplay Not Working
Last Updated : Mar 11, 2024
IN - HTML JavaScript | Written & Updated By - Pragati
In this tutorial we will show you the solution of HTML video autoplay not working, in our previous tutorials, we already covered the topics like HTML video autoplay, html video in iframe, how to make video autoplay with muted, etc.
After, that our developers come across with a problem that autoplay is not working in some browsers like safari, chrome, etc.
For the solution of their problem today we will learn about how to solve the issue of autoplay not working in html videos. Let us understand:
Step By Step Guide On HTML Video Autoplay Not Working :-
Now, today we have to give solution of problem from our developers that autoplay is not working. And we have to provide the solution of this problem.
Here below we show you code example with the help of which error gets resolved. Let us see codes:
<!DOCTYPE html>
<html>
<head>
<title>
video
</title>
<script src="js/jquery.js"></script>
<script>
document.getElementById('video').play();
document.getElementById('movie').play();
</script>
</head>
<body>
<video autoplay id="video">
<source type="video/mp4" src="https://www.youtube.com/embed/YhvdaNa2oSU?rel=0?autoplay=1&&showinfo=0&loop=1">
<source type="video/ogg" src="https://www.youtube.com/embed/YhvdaNa2oSU?rel=0?autoplay=1&&showinfo=0&loop=1">
</video>
<video autoplay id="movie">
<source type="video/mp4" src="video.mp4 ">
<source type="video/ogg" src="video.ogg ">
</video>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively. Here, is some CSS codes which we will discuss in next point.
- Here, we create body tag, which is a paired tag. And all the contents that are being to be displayed on browser screen are written here.
- Here, in body tag we create two video tags. The first one is for online source of video whereas the other or next one is for video from local drive or directory. Let us understand them one by one.
- In first video tag, we use autoplay with id attribute, the value of id is video. And inside this video we create two source tags. First is for mp4 whereas other is for ogg format.
- In second case, we again create video tag with autoplay and id having value movie. And in video tag, we create two source tags for different video formats. In this video tag, we use local videos to play. Inside source tag we give values of videos which we want to play as above.
- Now, the main concept is here of JavaScript, for this we have to add a js file into head tag. Whereas in script, we use inbuilt play to make videos autoplay. For reference of video, we use document.getElementById here.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
In conclusion, here we can say that after reading this article we are able to make video autoplay in html that is not working with the help of autoplay attribute.
I hope this tutorial on HTML video autoplay not working helps you.
About Pragati
