我有从 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 回答
慕标琳琳
TA贡献1830条经验 获得超9个赞
要使视频在网络上自动播放，您必须包含静音属性。
几年来，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>
拉丁的传说
TA贡献1789条经验 获得超8个赞
我无法重现该问题，但您可以使用以下方法尝试此修复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>
交互式爱情
TA贡献1712条经验 获得超3个赞
这是您完整编辑的代码作为您的答案。
我的改变：<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>
守着一只汪
TA贡献1872条经验 获得超3个赞
你只是play/pause视频。它不是真正的静音控件。使用video.muteddom api
var 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>
- 4 回答
- 0 关注
- 137 浏览
添加回答
举报
0/150
提交
取消