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

Question

I am a neewbie in Javascript: I made a mute/unmute button in a fixed position which mute a video in autoplay (no controls) while scrolling the page. But what if I want, instead the button with written MUTE/UNMUTE, just to show these 2 audio icons?

How should I change my js code in this case? I can not find a solution. Thanks in advance.

Here how it looks now, with the simple button:

 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

EDIT:

To use Font Awesome icons , you will need to setup Font Awesome for your project, more info on setup here .

Once set up, you can declare the mute/unmute icons from Font Awesome as variables. You can then change the innerHTML of the button to toggle the mute/unmute icons when the video is muted or unmuted.

I've made some simple changes to your function and used a test video for the example. The code is mostly the same otherwise.

I've also included comments within the snippet below to explain what is going on.

Run the snippet to see it in action:

 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>