Javascript 使用HTML5视频禁用自动播放和显示控件
我有一个HTML5视频可以工作，但我的问题是，每当我在浏览器中打开视频时，它就会立即开始播放。如何禁用自动播放功能？我用属性Javascript 使用HTML5视频禁用自动播放和显示控件,javascript,jquery,html,Javascript,Jquery,Html,我有一个HTML5视频可以工作，但我的问题是，每当我在浏览器中打开视频时，它就会立即开始播放。如何禁用自动播放功能？我用属性autoplay=“false”尝试过，但没有结果 控件总是隐藏的，我必须右键点击“显示控件”，控件才会弹出。我还尝试通过：showcontrols=“true”启用此功能，但也没有任何反应 感谢所有的帮助。下面是我的代码 <!DOCTYPE html> <html lang="en"> <head> <me
autoplay=“false”showcontrols=“true”<!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.net/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.com/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>
hls.js
.hlsjs{
位置：相对位置；
宽度：70%；
}
.比率{
位置：绝对位置；
垫面：75%；
}
录像带{
背景色：#ccc；
宽度：100%；
}
window.onload=函数（）{
如果（Hls.isSupported（））{
var video1=document.getElementById（“video1”）；
hls1=新的Hls({
调试：正确
})，hls1.on（已附加Hls.Events.MEDIA_，函数（）{
hls1.loadSource（“http://fdfasd.com/fdsa.m3u8");
});
hls1.附件媒体（视频1）；
}
};
hls.js
一审
自动播放事实上，将
自动播放设置为false
对播放某些视频没有帮助。看
如果要暂停所有视频，您可能需要在的行中编写代码：
videos = document.querySelectorAll("video");
for(video of videos) {
video.pause();
video.controls = true
}
当然，如果video
标记位于阴影根元素中，则上述情况将不起作用，但几乎没有任何通用解决方案可用于阴影根元素。在这里，您需要一种自定义方法，并首先展开阴影根。我很确定，如果您指定autoplay
属性，视频将自动播放，即使该属性为false。可以在这里看到-我认为showcontrols
属性实际上应该是controls
。showcontrols不是正确的属性名称。请参阅我前面的答案。@evolutionxbox oops，从问题中复制了原始代码。修正了在某些设备上，只有当音量设置为零时，视频才会自动播放。