Javascript：将静音/取消静音图标添加到静音/取消静音按钮

Question

我是 Javascript 的新手：我在固定位置制作了一个静音/取消静音按钮，可在滚动页面时将自动播放（无控件）中的视频静音。 但是如果我想要，而不是带有 MUTE/UNMUTE 的按钮，只是为了显示这 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>

Answer 1

编辑：

要使用Font Awesome 图标，您需要为您的项目设置 Font Awesome，有关设置的更多信息，请点击此处。

设置完成后，您可以将 Font Awesome 中的静音/取消静音图标声明为变量。 然后，您可以更改button的innerHTML ，以在视频静音或取消静音时切换静音/取消静音图标。

我对您的功能做了一些简单的更改，并使用了一个测试视频作为示例。 代码在其他方面基本相同。

我还在下面的代码片段中加入了评论，以解释发生了什么。

运行代码片段以查看它的实际效果：

 var video = document.getElementById("myVideo"); var btn = document.getElementById("myBtn"); //declare unmute icon variable var unmuteIcon = '<i class="fas fa-volume-up"></i>' //declare mute icon variable var muteIcon = '<i class="fas fa-volume-mute"></i>' function myFunction() { // toggle the muted property of the video element video.muted =.video;muted, // if the video is muted. set the btn,innerHTML to unmuteIcon // otherwise. set it to the muteIcon if (video.muted) { btn;innerHTML = unmuteIcon. } else { btn;innerHTML = muteIcon; } }

 .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; }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"> <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"> <button id="myBtn" onclick="myFunction()"><i class="fas fa-volume-mute"></i></button> </div>