Jquery 自定义HTML5视频控件-仅显示静音按钮

我是否可以编辑HTML5视频控件，使其仅显示静音/取消静音按钮，并显示在视频的右上角？我已经找到了这样做的方法，但我选择在CSS中为所有其他ID和按钮显示“display:none；”（这不是实现这一点的最佳方法）。此外，它还能工作，但它唯一能工作的浏览器是Chrome。

00:00
00:00
哑巴

一种解决方案是创建另一个按钮，
添加一些CSS，并分配JS静音功能：

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

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

HTML:
创建一个新按钮，并将其放入“video continer”div，但不在“video\u controls\u bar”div中：

然后添加此新功能：

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

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

CSS:
添加css样式以将新按钮放置到视频右上角：

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

如果要隐藏视频控件，请在css文件中更改以下内容：

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

为此：

/* this is just a CSS comment, you can bypass it */
/* #video-container:hover #video_controls_bar {
    opacity: 1;
} */

---

播放视频：

if($("#video")[0].paused==true)
{
$("#video")[0].play();
}

暂停视频：

$("#video")[0].pause();

---

你可以从这里得到一些细节

这是如何回答这个问题的？