想要为全屏视频背景上的音频创建自定义静音/取消静音按钮
Wanting to create a custom mute/unmute button for the audio on a full screen video background
我目前有一个全屏背景视频,我循环播放音频,我想制作一个自定义按钮,以便在访问者访问该网站时可以将音频静音/取消静音。
我试过使用此代码...
<video id="bg" loop autoplay preload="auto" poster="../img/still.jpg">
<source src="vid/vidbg2.mp4" type="video/mp4" />
<source src="vid/vidbg.webm" type="video/webm" />
<source src="vid/vidbg.ogv" type="video/ogg" />
Your browser does not support this video
</video>
<div id="video_controls">
<button id="mutebtn">mute</button>
</div>
和JavaScript
<script>
var mutebtn;
function intitializePlayer(){
//set object references
vid = document.getElementById("bg");
mutebtn = document.getElementById("mutebtn");
//add event listener
mutebtn.addEventListener("click,vidmute,false");
}
function.vidmute(){
if(vid.muted){
vid.muted = false;
mutebtn.innerHTML = "mute";
} else {
vid.muted = true;
mutebtn.innerHTML = "Unmute";
}
}
</script>
认为我可能吠错了树?
任何帮助将非常感谢!
在需要的地方看起来像三个小的变化1/只在click
周围引号,而不是整个 addEventListener 参数2/调用初始化3/从function.vidmute
中删除多余的句点
<script>
var mutebtn;
intitializePlayer() // **don't forget to call the initialize**
function intitializePlayer(){
//set object references
vid = document.getElementById("bg");
mutebtn = document.getElementById("mutebtn");
//add event listener
mutebtn.addEventListener("click",vidmute,false); // **quotes only around the event**
}
function vidmute(){ // **there was an extra '.' between function and vidmute**
if(vid.muted){
vid.muted = false;
mutebtn.innerHTML = "mute";
} else {
vid.muted = true;
mutebtn.innerHTML = "Unmute";
}
}
</script>
相关文章:
- DataTables-创建自定义分页样式(加载更多样式)
- 如何在javascript中创建自定义事件
- 在angularjs中创建自定义控件的推荐方法
- 创建自定义函数以在函数上运行完整的多选下拉列表
- 在jquery和javascript中创建自定义日历背后的逻辑
- Magento创建自定义的职业表格,并从CMS页面调用
- 如何为javascript创建自定义标签?或者这是我不知道的其他事情吗;我不知道
- 如何创建自定义属性以添加if.bind
- 创建自定义URL
- 在 Backbone.js 中创建自定义“同步”方法
- 在 Chrome 扩展程序中创建自定义事件的最惯用方式
- 如何使用引导程序创建自定义滚动条
- 在画布中创建自定义图像对象
- AngularJS -- 创建自定义数据绑定和 ng-repeat
- 创建自定义 Javascript 对象的惯用方法有哪些
- 如何在高图表中创建自定义线型
- 在命名空间中创建自定义事件
- 如何使用jquery创建自定义弹出窗口
- 使用javascript中的变量创建自定义URL
- 如何使用jQuery扩展方法为元素或类选择器创建自定义插件