我有從 w3schools 獲得的 HTML 代碼。但是，視頻標(biāo)簽有點(diǎn)奇怪。我想讓視頻取消靜音，所以我刪除了靜音標(biāo)簽，但是當(dāng)它被刪除時(shí)，它甚至不播放黑屏。我嘗試搜索“靜音”和“靜音”一詞的所有代碼，但沒(méi)有任何效果。未找到。嘭。請(qǐng)有人幫助我。<video autoplay muted loop id="myVideo"> <source src="rain.mp4" type="video/mp4"> Your browser does not support HTML5 video.</video>我不清楚為什么如果我刪除那個(gè)靜音標(biāo)簽。他們不會(huì)播放視頻。無(wú)論如何，完整代碼在這里<!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 回答
慕標(biāo)琳琳
TA貢獻(xiàn)1830條經(jīng)驗(yàn) 獲得超9個(gè)贊
要使視頻在網(wǎng)絡(luò)上自動(dòng)播放，您必須包含靜音屬性。
幾年來(lái)，Chrome 和 Safari 都是如此： https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
如果您希望能夠開(kāi)始/停止電影，您可以考慮添加控件屬性：
<video autoplay muted loop controls id="myVideo">
<source src="rain.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
拉丁的傳說(shuō)
TA貢獻(xiàn)1789條經(jīng)驗(yàn) 獲得超8個(gè)贊
我無(wú)法重現(xiàn)該問(wèn)題，但您可以使用以下方法嘗試此修復(fù)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>
交互式愛(ài)情
TA貢獻(xiàn)1712條經(jīng)驗(yàn) 獲得超3個(gè)贊
這是您完整編輯的代碼作為您的答案。
我的改變：<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貢獻(xiàn)1872條經(jīng)驗(yàn) 獲得超4個(gè)贊
你只是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 關(guān)注
- 188 瀏覽
添加回答
舉報(bào)
0/150
提交
取消