静音视频标签如果删除将无法播放
我有从 w3schools 获得的 HTML 代码。但是，视频标签有点奇怪。我想让视频取消静音，所以我删除了静音标签，但是当它被删除时，它甚至不播放黑屏。
我尝试搜索“静音”和“静音”一词的所有代码，但没有任何效果。未找到。嘭。
请有人帮助我。
<video autoplay muted loop id="myVideo">
<source src="rain.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
我不清楚为什么如果我删除那个静音标签。他们不会播放视频。无论如何，完整代码在这里
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
font-size: 17px;
}
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
.content {
position: fixed;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
padding: 20px;
}
#myBtn {
width: 200px;
font-size: 18px;
padding: 10px;
border: none;
background: #000;
color: #fff;
cursor: pointer;
}
#myBtn:hover {
background: #ddd;
color: black;
}
</style>
</head>
<body>
<video autoplay muted loop id="myVideo">
<source src="rain.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<div class="content">
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei. Id qui nemore latine molestiae, ad mutat oblique delicatissimi pro.</p>
<button id="myBtn" onclick="myFunction()">Pause</button>
</div>
<script>
document.addEventListener('click', musicPlay);
function musicPlay() {
document.getElementById('ID').play();
document.removeEventListener('click', musicPlay);
}
var video = document.getElementById("myVideo");
var btn = document.getElementById("myBtn");
function myFunction() {
if (video.paused) {
video.play();
btn.innerHTML = "Pause";
} else {
video.pause();
btn.innerHTML = "Play";
}
}
</script>
</body>
</html>
谢谢
慕慕森4回答
-
慕标琳琳
要使视频在网络上自动播放，您必须包含静音属性。几年来，Chrome 和 Safari 都是如此： https://developers.google.com/web/updates/2017/09/autoplay-policy-changes如果您希望能够开始/停止电影，您可以考虑添加控件属性：<video autoplay muted loop controls id="myVideo"> <source src="rain.mp4" type="video/mp4"> Your browser does not support HTML5 video.</video> -
拉丁的传说
我无法重现该问题，但您可以使用以下方法尝试此修复onloadeddata：<video id="myVideo" onloadeddata="this.play();" loop> <source src="rain.mp4" type="video/mp4"> Your browser does not support HTML5 video.</video> 演示：var video = document.getElementById("myVideo");var btn = document.getElementById("myBtn");function myFunction() { if (video.paused) { video.play(); btn.innerHTML = "Pause"; } else { video.pause(); btn.innerHTML = "Play"; }}<video id="myVideo" onloadeddata="this.play();" loop> <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> Your browser does not support HTML5 video.</video><br/><br/><button id="myBtn" onclick="myFunction()">Pause</button> -
交互式爱情
这是您完整编辑的代码作为您的答案。我的改变：<video controls autoplay id="myVideo"><!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; } body { margin: 0; font-family: Arial; font-size: 17px; } #myVideo { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; } .content { position: fixed; bottom: 0; background: rgba(0, 0, 0, 0.5); color: #f1f1f1; width: 100%; padding: 20px; } #myBtn { width: 200px; font-size: 18px; padding: 10px; border: none; background: #000; color: #fff; cursor: pointer; } #myBtn:hover { background: #ddd; color: black; } </style></head><body> <video controls autoplay id="myVideo"> <source src="rain.mp4" type="video/mp4"> Your browser does not support HTML5 video. </video> <div class="content"> <h1>Heading</h1> <p>Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei. Id qui nemore latine molestiae, ad mutat oblique delicatissimi pro.</p> <button id="myBtn" onclick="myFunction()">Pause</button> </div> <script> document.addEventListener('click', musicPlay); function musicPlay() { document.getElementById('ID').play(); document.removeEventListener('click', musicPlay); } var video = document.getElementById("myVideo"); var btn = document.getElementById("myBtn"); function myFunction() { if (video.paused) { video.play(); btn.innerHTML = "Pause"; } else { video.pause(); btn.innerHTML = "Play"; } } </script></body></html> -
守着一只汪
你只是play/pause视频。它不是真正的静音控件。使用video.muteddom apivar video = document.getElementById("myVideo");var btn = document.getElementById("myBtn");function myFunction() { btn.innerHTML = video.muted ? "Unmute":'Mute'; video.muted = !video.muted;}#myBtn { width: 200px; font-size: 18px; padding: 10px; border: none; background: #000; color: #fff; cursor: pointer;}#myBtn:hover { background: #ddd; color: black;}<video autoplay muted loop id="myVideo"> <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4"> Your browser does not support HTML5 video.</video><div class="content"> <h1>Heading</h1> <p>Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei. Id qui nemore latine molestiae, ad mutat oblique delicatissimi pro. </p> <button id="myBtn" onclick="myFunction()">Unmute</button></div>
随时随地看视频慕课网APP
相关分类
Html5