css Javascript：在静音/取消静音按钮上添加静音/取消静音图标

k97glaaz 于 2022-12-20 发布在 Java

关注(0)|答案(1)|浏览(318)

我是一个新的Javascript：我做了一个静音/取消静音按钮在一个固定的位置，静音视频在自动播放（无控制），而滚动页面。但如果我想，而不是写静音/取消静音按钮，只是为了显示这2个音频图标？
在这种情况下，我应该如何修改我的js代码？我找不到解决办法。提前感谢。
下面是它现在的样子，带有一个简单的按钮：

var video = document.getElementById("myVideo");
var btn = document.getElementById("myBtn");

function myFunction() {
    video.muted = !video.muted;
    btn.innerHTML = video.muted ? "Unmute":'Mute';
}

.video-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px auto 80px;
}

.video-description {
  text-align: center;
  max-width: 66%;
  margin: 0 auto 24px;
  font: inherit;
  letter-spacing: 4px;
}

#myVideo {
  border-radius: 5px;
  max-width: 46%;
  object-fit: cover;
}

#myBtn {
  top: 10%;
  right: 3%;
  position: fixed;
  z-index: 50;
  cursor: pointer;
  padding: 10px 20px;
  background: #D3D3D3;
  color: #000;
  border-radius: 5px;
  display: inline-block;
}

<section class="video-container">

  <div class="video-description">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>

  <video id="myVideo" autoplay loop>
    <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
  </video>

  <div class="content">

    <button id="myBtn" onclick="myFunction()">Mute</button>
  </div>

css

来源：https://stackoverflow.com/questions/74802108/javascript-add-mute-unmute-icon-to-the-mute-unmute-button

1条答案

按热度按时间

bq9c1y661#

我相信你只是想切换图像到一个非静音/静音图像时，视频静音/非静音。
你可以用img元素代替按钮来实现这一点，然后你可以改变图像的source来切换视频的静音或非静音状态。
我对你的函数做了一些简单的修改，并使用了一个测试视频作为例子。其他的代码基本上是一样的。
我还在下面的片段中加入了评论，以解释正在发生的事情。
运行代码段以查看其实际运行情况：

var video = document.getElementById("myVideo");
var img = document.getElementById("myImg");

//declare unmute image variable
var unmuteImg = "https://cdn2.iconfinder.com/data/icons/squircle-ui/32/Sound-512.png"

//declare mute image variable
var muteImg = "https://cdn2.iconfinder.com/data/icons/squircle-ui/32/No_sound-512.png"

function myFunction() {
  // toggle the muted property of the video element
  video.muted = !video.muted;

  // if the video is muted, set the img.src to unmuteImg
  // otherwise, set it to the muteImg
  if (video.muted) {
    img.src = unmuteImg;
  } else {
    img.src = muteImg;
  }
}

.video-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px auto 80px;
}

.video-description {
  text-align: center;
  max-width: 66%;
  margin: 0 auto 24px;
  font: inherit;
  letter-spacing: 4px;
}

#myVideo {
  border-radius: 5px;
  max-width: 46%;
  object-fit: cover;
}

#myImg {
  top: 10%;
  right: 3%;
  position: fixed;
  z-index: 50;
  cursor: pointer;
  padding: 10px 20px;
  background: #D3D3D3;
  color: #000;
  border-radius: 5px;
  display: inline-block;
}

<section class="video-container">

  <div class="video-description">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>

  <video id="myVideo" controls>
    <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
  </video>

  <div class="content">

    <img id="myImg" onclick="myFunction()" src="https://cdn2.iconfinder.com/data/icons/squircle-ui/32/No_sound-512.png" width="20" height="20">

赞(0）回复(0）举报 2022-12-20

我来回答

css Javascript：在静音/取消静音按钮上添加静音/取消静音图标

1条答案

相关问题

热门标签

最新问答