我有從 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條經驗 獲得超4個贊
你只是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 關注
- 192 瀏覽
添加回答
舉報
0/150
提交
取消