创建一个 "Push-to-mute" 按钮
Creating a "Push-to-mute" button
我在 <iframe>
内的页面上有一个 <video>
对象。我基本上想要一个“按下静音”按钮,它会在单击按钮时使视频静音,然后在松开按钮后立即取消静音。最终项目将嵌入一个我还没有访问权限的页面,但它将是一个只有 <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 页面中的第一个(也是唯一一个)视频,所以我想通过标签名称获取元素将是到达那里的方式。
我不知道为什么这目前不起作用,所以非常感谢您的帮助!
使用 iframe 会 return 跨源错误,因为像 chrome 这样的浏览器不允许您直接更改 iframe 的内容,除非视频和您的 HTML 页面在同一个网址上。
有两种方法可以推荐给你:
在您的计算机上下载该页面,然后<iframe>
它。
如果您删除 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;">
我在 <iframe>
内的页面上有一个 <video>
对象。我基本上想要一个“按下静音”按钮,它会在单击按钮时使视频静音,然后在松开按钮后立即取消静音。最终项目将嵌入一个我还没有访问权限的页面,但它将是一个只有 <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 页面中的第一个(也是唯一一个)视频,所以我想通过标签名称获取元素将是到达那里的方式。
我不知道为什么这目前不起作用,所以非常感谢您的帮助!
使用 iframe 会 return 跨源错误,因为像 chrome 这样的浏览器不允许您直接更改 iframe 的内容,除非视频和您的 HTML 页面在同一个网址上。
有两种方法可以推荐给你:
在您的计算机上下载该页面,然后
<iframe>
它。如果您删除 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;">