如何用静音道具取消静音html5视频

时间:2016-08-19 14:48:06

标签: javascript html5 video

我创建了一个带静音的简单视频模块(用于移动自动启动),但现在我无法更改静音状态...

我用repository,小提琴链接会很棒。

到目前为止,我已经尝试过这个没有运气了。

HTML

<video width="640" height="264" muted autoplay webkit-playsinline src="'+videoURL+'"></video>'

JS

$(document).on("click",".containerVolume",function(e){
        if(isMuted){
            $('video').prop('muted', false);
        }
        else{
            $('video').prop('muted',true);
        }
});

var videos = document.querySelectorAll('video');
      if (location.search === '?enabled=false') 
      {
      } else if (location.search === '?enabled=true') {
           enableVideos(false);
      } else {
         enableVideos();
      }
      function enableVideos(everywhere) {
          for (var i = 0; i < videos.length; i++) {
             window.makeVideoPlayableInline(videos[i], !videos[i].hasAttribute('muted'), !everywhere);
          }
      }

4 个答案:

答案 0 :(得分:10)

试试这个:

function toggleMute() {

  var video=document.getElementById("myVideo");

  if(video.muted){
    video.muted = false;
  } else {
    video.muted = true;
  }

}

检查示例here

如果您自己的代码无效,请尝试在您希望点击注册并使用的视频/元素中添加id

var video=document.getElementById("myVideo") ;   

$(video).on("click", function(e){
    if(video.muted){
        video.muted = false;
    }
    else{
        video.muted = true;
    }
});

答案 1 :(得分:1)

您应该使用videoEl.muted

var video = document.getElementById('video');

function toggleMute(){
  video.muted = !video.muted;
}
<video id="video" width="300" controls muted src="http://www.w3schools.com/html/mov_bbb.mp4"></video>

<br><br>
<a onclick="toggleMute()">Toggle Mute</a>

答案 2 :(得分:1)

Glen's Answer 恰到好处,我只是想说明为什么它不适合 Özgür、OP(以及我自己,这就是引导我来到这里的原因)。

基本上归结为静音property和静音attribute是不同的。它似乎没有很好的文档记录(我已经找到了),但我遇到的行为是静音属性(通过 element.getAttribute 和相关方法访问)影响初始状态,但切换它没有任何影响。另一方面。似乎静音属性(通过 videoEl.muted 访问,正如格伦指出的那样)是如何在页面加载后更改静音状态。

答案 3 :(得分:0)

您可以简单地将其静音/取消静音

document.getElementById("theIdOfYourVideoGoesHere").volume=0;

document.getElementById("theIdOfYourVideoGoesHere").volume=1;

(此主题似乎已有两年历史,但今天它已成为我的Google搜索排名第一的结果)


Bilgisayar ne bilgiden anlar nesaygıdan。 Çünküocansızbirdüzenektir。卡达。

相关问题