Fatal编程技术网
  • javascript/
  • Javascript 静音视频标签（如果移除）赢得'；不玩

Javascript 静音视频标签（如果移除）赢得'；不玩

javascript html css video tags

Javascript 静音视频标签（如果移除）赢得'；不玩,javascript,html,css,video,tags,Javascript,Html,Css,Video,Tags,我有我从W3学校得到的HTML代码。 但是，视频标签有点奇怪。 我想让视频取消静音，然后我删除了 静音标记，但当它被删除时，它甚至没有 只是在玩黑屏游戏 我试着搜索“静音”和“静音”的所有代码 什么都没用。没有找到。砰 谁来帮帮我 <video autoplay muted loop id="myVideo"> <source src="rain.mp4" type="video/mp4"> Your browser does not support HTML5

我有我从W3学校得到的HTML代码。 但是，视频标签有点奇怪。 我想让视频取消静音，然后我删除了 静音标记，但当它被删除时，它甚至没有 只是在玩黑屏游戏

我试着搜索“静音”和“静音”的所有代码 什么都没用。没有找到。砰

谁来帮帮我

<video autoplay muted loop id="myVideo">
  <source src="rain.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>


您的浏览器不支持HTML5视频。
我不清楚为什么要去掉那个静音标签。他们不会播放视频。 无论如何，这里有完整的代码

<!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>


* {
框大小：边框框；
}
身体{
保证金：0；
字体系列：Arial；
字号：17px；
}
#我的视频{
位置：固定；
右：0；
底部：0；
最小宽度：100%；
最小高度：100%；
}
.内容{
位置：固定；
底部：0；
背景：rgba（0,0,0,0.5）；
颜色：#f1f1；
宽度：100%；
填充：20px；
}
#myBtn{
宽度：200px；
字号：18px；
填充：10px；
边界：无；
背景：#000；
颜色：#fff；
光标：指针；
}
#myBtn：悬停{
背景：ddd；
颜色：黑色；
}
您的浏览器不支持HTML5视频。
标题
Lorem ipsum dolor sit amet，一个他的etiam torquatos。Tollit soleat phaedrum te duo，这是一家免费的酒店。特写：我的朋友，我的朋友。我是拉丁裔分子，是变异的斜交性Delicatisimi pro

暂停
document.addEventListener（“单击”，音乐播放）；
函数musicPlay（）{
document.getElementById（'ID'）.play（）；
文档。删除EventListener（“单击”，音乐播放）；
}
var video=document.getElementById（“myVideo”）；
var btn=document.getElementById（“myBtn”）；
函数myFunction（）{
如果（视频暂停）{
video.play（）；
btn.innerHTML=“暂停”；
}否则{
video.pause（）；
btn.innerHTML=“播放”；
}
}
谢谢

您正在播放/暂停视频。它不是实际的静音控件。请使用dom api

var video=document.getElementById（“myVideo”）；
var btn=document.getElementById（“myBtn”）；
函数myFunction（）{
btn.innerHTML=video.Mute？“取消静音”：“静音”；
video.muted=！video.muted；
}
#myBtn{
宽度：200px；
字号：18px；
填充：10px；
边界：无；
背景：#000；
颜色：#fff；
光标：指针；
}
#myBtn：悬停{
背景：ddd；
颜色：黑色；
}

您的浏览器不支持HTML5视频。
标题
Lorem ipsum dolor sit amet，一个他的etiam torquatos。Tollit soleat phaedrum te duo，这是一家免费的酒店。特写：我的朋友，我的朋友。我是一个拉丁分子，一个变异的斜交性谵妄
赞成的意见。


取消静音
我无法重现此问题，但您可以使用以下方法尝试此修复：


您的浏览器不支持HTML5视频。




暂停
以下是您完整编辑的代码作为您的答案

我的更改：


* {
框大小：边框框；
}
身体{
保证金：0；
字体系列：Arial；
字号：17px；
}
#我的视频{
位置：固定；
右：0；
底部：0；
最小宽度：100%；
最小高度：100%；
}
.内容{
位置：固定；
底部：0；
背景：rgba（0,0,0,0.5）；
颜色：#f1f1；
宽度：100%；
填充：20px；
}
#myBtn{
宽度：200px；
字号：18px；
填充：10px；
边界：无；
背景：#000；
颜色：#fff；
光标：指针；
}
#myBtn：悬停{
背景：ddd；
颜色：黑色；
}
您的浏览器不支持HTML5视频。
标题
Lorem ipsum dolor sit amet，一个他的etiam torquatos。Tollit soleat phaedrum te duo酒店，您可以体验一下直肌
过失。特写：我的朋友，我的朋友。我是拉丁人
葡萄胎，变异斜交性谵妄

暂停
document.addEventListener（“单击”，音乐播放）；
函数musicPlay（）{
document.getElementById（'ID'）.play（）；
文档。删除EventListener（“单击”，音乐播放）；
}
var video=document.getElementById（“myVideo”）；
var btn=document.getElementById（“myBtn”）；
函数myFunction（）{
如果（视频暂停）{
video.play（）；
btn.innerHTML=“暂停”；
}
否则{
video.pause（）；
btn.innerHTML=“播放”；
}
}
要在web上自动播放视频，必须包含静音属性

几年来，Chrome和Safari一直如此：

如果你想启动/停止电影，你可以考虑添加控件属性：


您的浏览器不支持HTML5视频。
最后，如果您决定继续使用静音视频，您可能需要考虑添加字幕来进行额外的参与。请阅读此处了解更多信息：

道格

开发商关系

api.video

嘿，巴德，谢谢。但是你能让自动播放工作吗。我试着插入自动播放标签，但它不起作用（对不起，键盘坏了） 
<video id="myVideo" onloadeddata="this.play();" loop>
  <source src="rain.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>