I have an HTML5 video which works, but the problem that I have is that whenever I go to the video in the browser - it starts playing immediately. How can I disable the autoplay function? I've tried it with the attribute autoplay="false", but no results.
And the controls is always hidden and I must right click and click on "show controls" for the controls to popup. I also tried enabling this with: showcontrols="true", but no reaction there too.
All help is appreciated. Below is my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hls.js</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.hlsjs {
position: relative;
width: 70%;
}
.ratio {
position: absolute;
padding-top: 75%;
}
video {
background-color: #ccc;
width: 100%;
}
</style>
<script src=".js/latest/hls.min.js"></script>
<script>
window.onload = function() {
if (Hls.isSupported()) {
var video1 = document.getElementById("video1");
hls1 = new Hls({
debug : true
}), hls1.on(Hls.Events.MEDIA_ATTACHED, function() {
hls1.loadSource(".m3u8");
});
hls1.attachMedia(video1);
}
};
</script>
</head>
<body>
<h1>hls.js</h1>
<h2>First instance</h2>
<div class="hlsjs">
<video id="video1" autoplay="false" showcontrols="true"></video>
<div class="ratio"></div>
</div>
</body>
</html>
I have an HTML5 video which works, but the problem that I have is that whenever I go to the video in the browser - it starts playing immediately. How can I disable the autoplay function? I've tried it with the attribute autoplay="false", but no results.
And the controls is always hidden and I must right click and click on "show controls" for the controls to popup. I also tried enabling this with: showcontrols="true", but no reaction there too.
All help is appreciated. Below is my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hls.js</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.hlsjs {
position: relative;
width: 70%;
}
.ratio {
position: absolute;
padding-top: 75%;
}
video {
background-color: #ccc;
width: 100%;
}
</style>
<script src="https://cdn.jsdelivr/hls.js/latest/hls.min.js"></script>
<script>
window.onload = function() {
if (Hls.isSupported()) {
var video1 = document.getElementById("video1");
hls1 = new Hls({
debug : true
}), hls1.on(Hls.Events.MEDIA_ATTACHED, function() {
hls1.loadSource("http://fdfasd./fdsa.m3u8");
});
hls1.attachMedia(video1);
}
};
</script>
</head>
<body>
<h1>hls.js</h1>
<h2>First instance</h2>
<div class="hlsjs">
<video id="video1" autoplay="false" showcontrols="true"></video>
<div class="ratio"></div>
</div>
</body>
</html>
-
2
I'm pretty sure, if you specify the
autoplayattribute the video will play automatically, even if it's false. Which can be seen here jsfiddle/whjLf2b6 - And I thinkshowcontrolsattribute should actually becontrols. – evolutionxbox Commented May 31, 2016 at 10:57
3 Answers
Reset to default 9If you specify the autoplay attribute the video will play automatically, even if it's false. Which can be seen here:
<video src="http://vjs.zencdn/v/oceans.mp4" autoplay="false"></video>Also, the showcontrols attribute should actually be controls.
So the desired HTML will be:
<video id="video1" controls></video>
Sources:
- https://developer.mozilla/en-US/docs/Web/API/HTMLMediaElement
- https://developer.mozilla/en-US/docs/Web/HTML/Element/video
You have to remove it pletely. The tag attribute doesn't take a boolean but is a switch itself. This will remove autoplay but still show controls
<video
id="video1"
controls
src="http://download.blender/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4">
</video>Indeed setting autoplay to false doesn't help some videos will play anyway. See this case in fiddle.
You might want to do by code something in the line of if you want to pause all the videos:
videos = document.querySelectorAll("video");
for(video of videos) {
video.pause();
video.controls = true
}
Of course the above case will not work if the video tag is in a shadow root element, but then hardly any general solution will work with shadow roots elements. There you will need a custom approach and expand first the shadow roots.