时间戳

首页 > 解决方案 > 创建“一键静音”按钮

javascript - 创建“一键静音”按钮

问题描述

我<video>在一个页面上有一个对象，它位于<iframe>. 我基本上想要一个“按下静音”按钮，它会在单击按钮时使视频静音，然后在松开按钮后立即取消静音。最终项目将嵌入一个我还没有访问权限的页面，但它将是一个仅带有<video>标签的页面。我插入了一个示例视频，该视频在页面上也有一个<video>标签来开发它。

我的 HTML 看起来像这样，一个按钮会在鼠标按下时触发一个功能，而一个按钮会在鼠标恢复时触发另一个功能。

<button onmousedown="mute()" onmouseup="unmute()">MUTE</button>

<iframe id="video_iframe" src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4" allowfullscreen width="100%" height="100%" frameborder=0 style="border:none;"></iframe>

现在我的 Javascript 看起来像这样：

  function mute(){
var video = document.getElementById('video_iframe').contentWindow.document.getElementsByTagName()('video')[0];
video.muted = true;
}

function unmute(){
var video = document.getElementById('video_iframe').contentWindow.document.getElementsByTagName()('video')[0];
video.muted = false;
}

我认为我必须使用“getElementsByTagName”，因为最终在 iFrame 中的内容将是一个页面，该页面的标签的 Id 会发生变化。我正在尝试控制该 iFramed 页面中的第一个（也是唯一一个）视频，所以我想通过标签名称获取元素将是去那里的方式。

我不知道为什么这目前不起作用，所以任何帮助表示赞赏！

标签： javascripthtmliframegetelementsbytagname

解决方案

使用 iframe 将返回跨域错误，因为像 chrome 之类的浏览器不允许您直接更改 iframe 的内容，除非视频和 HTML 页面位于同一个网址上。

我可以向您推荐两种方法：

  1. 在您的机器上下载该页面，然后下载<iframe>它。

  2. 如果您删除 iframe 并<video>直接使用它，那么它也可以在您的机器上正常工作。

     <script language="javascript">

 function mute(){
 var video = document.getElementById('at');
 video.muted = true;
 }

 function unmute(){
 var video = document.getElementById('at');
 video.muted = false;
 }
 </script>
 <button onmousedown="mute()" onmouseup="unmute()">MUTE</button>

 <video id="at" src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4" allowfullscreen width="100%" height="100%" frameborder=0 style="border:none;">

推荐阅读