javascript - 点击视频播放器更新图标

Question

我使用效果很好的播放媒体方法创建了视频播放器。以下是我使用的资源：

• https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/

• https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs

我正在使用 play 方法来触发暂停或播放图标。我将如何为静音按钮做同样的事情？例如，在默认情况下，它必须被静音，并且一旦单击，必须显示一个未静音的版本。

在这里你可以看到脚本的工作小提琴，只需在本地运行它并用自己的 mp4 替换。

const video = document.getElementById('video');
        console.log(video);
        const play = document.getElementById('play');
        const stop = document.getElementById('stop');
        const progress = document.getElementById('progress');
        const timestamp = document.getElementById('timestamp');
        const mute = document.getElementById('mute');
        const unmute = document.getElementById('unmute');

        // Play & pause video
        function toggleVideoStatus() {
            if (video.paused) {
                video.play();
            } else {
                video.pause();
            }
        }

        // Update play/pause icon
        function updatePlayIcon() {
            if (video.paused) {
                play.innerHTML = '<i class="fas fa-play"></i>';
            } else {
                play.innerHTML = '<i class="fas fa-pause"></i>';
            }
        }

        // Update mute/unmute icon
        function updateMuteIcon() {
            console.log("update mute icon clicked");
            // if muted
            // show mute icon
            // if unmuted 
            // show unmuted icon
        }

        // Update Progress & Timestamp
        function updateProgress() {
            console.log("current time: " + video.currentTime);
            console.log("video duration: " + video.duration);
            progress.value = (video.currentTime / video.duration) * 100;

            // Get minutes 
            let mins = Math.floor(video.currentTime / 60);
            if (mins < 10) {
                mins = '0' + String(mins);
            }

            // Get seconds
            let secs = Math.floor(video.currentTime % 60);
            if (secs < 10) {
                secs = '0' + String(secs);
            }

            timestamp.innerHTML = `${mins}:${secs}`
        }

        // Time progress
        function setVideoProgress() {
            video.currentTime = (+progress.value * video.duration) / 100;
        }

        // Stop Video
        function stopVideo() {
            video.currentTime = 0;
            video.pause();
        }

        // Unmute Video
        function unmuteVideo() {
            console.log("unmute video")
            video.muted = false;
        }

        // Mute Video
        function muteVideo() {
            console.log("mute video")
            video.muted = true;
        }

        // Event listener

        // Video Status
        video.addEventListener('click', toggleVideoStatus);

        // Play/Pause Icon
        video.addEventListener('pause', updatePlayIcon);
        video.addEventListener('play', updatePlayIcon);

        // Mute/Unmute Icon
        mute.addEventListener('click', updateMuteIcon);

        // Mute/Unmute 
        unmute.addEventListener('click', unmuteVideo);
        mute.addEventListener('click', muteVideo);

        // Update Time
        video.addEventListener('timeupdate', updateProgress);

        // Play/Stop Video
        play.addEventListener('click', toggleVideoStatus);
        stop.addEventListener('click', stopVideo);

        // Video Progress
        progress.addEventListener('change', setVideoProgress);

input[type='range'] {
            -webkit-appearance: none;
            /* Hides the slider so that custom slider can be made */
            width: 100%;
            /* Specific width is required for Firefox. */
            background: transparent;
            /* Otherwise white in Chrome */
        }

        input[type='range']::-webkit-slider-thumb {
            -webkit-appearance: none;
        }

        input[type='range']:focus {
            outline: none;
            /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
        }

        input[type='range']::-ms-track {
            width: 100%;
            cursor: pointer;

            /* Hides the slider so custom styles can be added */
            background: transparent;
            border-color: transparent;
            color: transparent;
        }

        /* Special styling for WebKit/Blink */
        input[type='range']::-webkit-slider-thumb {
            -webkit-appearance: none;
            border: 1px solid #000000;
            height: 36px;
            width: 16px;
            border-radius: 3px;
            background: #ffffff;
            cursor: pointer;
            margin-top: -14px;
            /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
            box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
            /* Add cool effects to your sliders! */
        }

        /* All the same stuff for Firefox */
        input[type='range']::-moz-range-thumb {
            box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
            border: 1px solid #000000;
            height: 36px;
            width: 16px;
            border-radius: 3px;
            background: #ffffff;
            cursor: pointer;
        }

        /* All the same stuff for IE */
        input[type='range']::-ms-thumb {
            box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
            border: 1px solid #000000;
            height: 36px;
            width: 16px;
            border-radius: 3px;
            background: #ffffff;
            cursor: pointer;
        }

        input[type='range']::-webkit-slider-runnable-track {
            width: 100%;
            height: 8.4px;
            cursor: pointer;
            box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
            background: #000000;
            border-radius: 1.3px;
            border: 0.2px solid #010101;
        }

        input[type='range']:focus::-webkit-slider-runnable-track {
            background: #000000;
        }

        input[type='range']::-moz-range-track {
            width: 100%;
            height: 8.4px;
            cursor: pointer;
            box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
            background: #000000;
            border-radius: 1.3px;
            border: 0.2px solid #010101;
        }

        input[type='range']::-ms-track {
            width: 100%;
            height: 8.4px;
            cursor: pointer;
            background: transparent;
            border-color: transparent;
            border-width: 16px 0;
            color: transparent;
        }

        input[type='range']::-ms-fill-lower {
            background: #000000;
            border: 0.2px solid #010101;
            border-radius: 2.6px;
            box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
        }

        input[type='range']:focus::-ms-fill-lower {
            background: #000000;
        }

        input[type='range']::-ms-fill-upper {
            background: #000000;
            border: 0.2px solid #010101;
            border-radius: 2.6px;
            box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
        }

        input[type='range']:focus::-ms-fill-upper {
            background: #000000;
        }

        * {
            box-sizing: border-box;
        }

        body {
            background-color: #999;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            max-height: 100vh;
        }

        h1 {
            color: #fff;
        }

        .screen {
            cursor: pointer;
            width: 70%;
            background-color: #000 !important;
        }

        .controls .fa-play {
            color: rgb(155, 137, 36);
        }

        .controls .fa-stop {
            color: rgb(155, 36, 36);
        }

        .controls .fa-pause {
            color: rgb(255, 255, 255);
        }

        .controls .fa-volume-mute {
            color: rgb(83, 83, 83);
        }

        .controls .fa-volume-up {
            color: rgb(255, 255, 255);
        }

        .controls .timestamp {
            color: #fff;
            font-weight: bold;
            margin-left: 10px;
        }

        .controls .btn {
            border: 0;
            background: transparent;
            cursor: pointer;
        }

        .controls {
            background: #333;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 10px;
            width: 70%;
        }

        .btn:focus {
            outline: 0;
        }

        @media (max-width: 800px) {

            .screen,
            .controls {
                width: 90%;
            }
        }

<div class="video-wrapper">
        <h1>Video Player</h1>
        <video id="video" class="screen" poster="poster.png" autoplay muted loop>
            <source src="#replacewithlocalmp4video">
        </video>
        <div class="controls">
            <button class="btn" id="play">
                <i class="fas fa-play"></i>
            </button>
            <button class="btn" id="stop">
                <i class="fas fa-stop"></i>
            </button>
            <button class="btn" id="mute">
                <i class="fas fa-volume-mute"></i>
            </button>
            <button class="btn" id="unmute">
                <i class="fas fa-volume-up"></i>
            </button>
            <input type="range" id="progress" class="progress" min="0" max="100" step="0.1" value="0">
            <span class="timestamp" id="timestamp">00.00</span>
        </div>

    </div>

标签： javascriptmedia