Personalized HTML5 video controls - Exclusively show mute button

Question

Personalized HTML5 video controls - Exclusively show mute button

Is there a way to customize the HTML5 video controls to show only the mute/unmute button in the top right corner of the video? I have found a solution by hiding other elements using "display: none;" in CSS for all other ids and buttons, but this might not be the most efficient method. Additionally, this customization only seems to work in Chrome. http://jsfiddle.net/pp6Wn/2/

<div id="video-container">
<video id="my_video" width="100%" height="100%" >
    <source src="http://romain-menard.fr/cours_html5/sitedemo/src/small.mp4"
    type="video/mp4" />
    <source src="video/movie.webm"
    type="video/webm" />
     </video>
<!-- Video Controls -->
<div id="video_controls_bar">
    <button id="playpausebtn"></button>

    <span id="curtimetext">00:00</span>
    <input id="seekslider" type="range" min="0" max="100" value="0" step="1"><span id="durtimetext">00:00</span>
    <button id="mutebtn">Mute</button>
    <input id="volumeslider" type="range" min="0" max="100" value="100" step="1">
    <button id="fullscreenbtn"></button>
  </div>
</div>

jquery css html html5-video

Answer 1

Answer №1

If you're looking for a solution, one approach could involve creating an additional button and incorporating some CSS to position it correctly. Then you can link this new button to a JavaScript function that handles muting:

To implement this:
Firstly, in your HTML code, create the new button outside of the "video_controls_bar" div but inside the "video-container" div:

</video>
<button id="mutebtn2">Mute</button>
<!-- Video Controls -->
<div id="video_controls_bar">

Next, in your JS file, make sure to assign the mute functionality by adding these lines within the "initializePlayer()" function:

mutebtn2 = document.getElementById("mutebtn2");
mutebtn2.addEventListener("click", vidmute2, false);

Don't forget to include the new function as well:

function vidmute2(){
    if(vid.muted){
        vid.muted = false;
        mutebtn2.innerHTML = "Mute";
    } else {
        vid.muted = true;
        mutebtn2.innerHTML = "Unmute";
    }
}

For styling purposes, use CSS to position the new button at the top-right corner of the video:

#mutebtn2 {
    position: absolute;
    top: 0px;
    right: 0px;
}

If you wish to hide the video controls, simply modify the relevant CSS code accordingly:

#video-container:hover #video_controls_bar {
    opacity: 0;
}

Finally, should you want to explore a live example, you can check out this link.

Answer 2

If you're looking for a solution, one approach could involve creating an additional button and incorporating some CSS to position it correctly. Then you can link this new button to a JavaScript function that handles muting:

To implement this:
Firstly, in your HTML code, create the new button outside of the "video_controls_bar" div but inside the "video-container" div:

</video>
<button id="mutebtn2">Mute</button>
<!-- Video Controls -->
<div id="video_controls_bar">

Next, in your JS file, make sure to assign the mute functionality by adding these lines within the "initializePlayer()" function:

mutebtn2 = document.getElementById("mutebtn2");
mutebtn2.addEventListener("click", vidmute2, false);

Don't forget to include the new function as well:

function vidmute2(){
    if(vid.muted){
        vid.muted = false;
        mutebtn2.innerHTML = "Mute";
    } else {
        vid.muted = true;
        mutebtn2.innerHTML = "Unmute";
    }
}

For styling purposes, use CSS to position the new button at the top-right corner of the video:

#mutebtn2 {
    position: absolute;
    top: 0px;
    right: 0px;
}

If you wish to hide the video controls, simply modify the relevant CSS code accordingly:

#video-container:hover #video_controls_bar {
    opacity: 0;
}

Finally, should you want to explore a live example, you can check out this link.

Personalized HTML5 video controls - Exclusively show mute button

Answer №1

Similar questions

CSS is functioning properly on a local level, but fails to take effect once the "npm run build" command is executed in the React application's build

Check the date selected in the date picker against today's date

jQuery doesn't bother holding its breath for the response of the function

Exploring JQuery 3.1.1 in combination with the powerful CSS flexbox techniques

Strong tags within MFC

Implement a slideshow feature that automatically changes a CSS attribute when preview images are shown

Ways to implement a shared ng-model across multiple elements

What is the best way to control the amount of rows displayed in a textarea?

Exploring the functionality of the jQuery.ajax() method within JSF

Boss declares, "Display the iFrame with no borders visible."

Using Jquery to assign negative values in CSS styling

How can I create a box-shaped outline using Three.js?

Utilizing jQuery's .fadeOut and .fadeIn for seamless transitions in webpage designs

Acquire HTML content and save it in a MYSQL database: A Step-by-Step Guide

What are the best methods for creating a significant gap in a flexbox layout?

Leveraging Jquery to Retrieve the Value from a Button with an Embedded Span

Clickability issue with Bootstrap collapsible navigation button

Sorting table rows updates the row numbers in table-sorter

Changes made in the DropDownList selection are not being accurately captured on the server side

Place two divs in the center of a container, with one floating to the left and the other floating