PS:在这个项目中,背景是视频,然后通过音乐按钮来控制背景音乐的静音,在这种情况下,我把视频video的声音静音了,同时音乐audio同时引用视频地址,达到背景乐和视频同步的效果。这样控制背景音乐的静音与否就变成了音频静音与否的问题。在以往的项目中,对IE8的背景音乐也做了兼容效果,而这次引用的文件是MP4格式的,IE8效果下不能播放
<!--音乐按钮-->
<div class="h-audio">
<a href="javascript:" id="hAudioToggle" class="btn-music active"></a>
<!--[if lte IE 8]>
<embed id="hAudioBg" src="xxx" autostart="true" loop="true" width="0" height="0">
<![endif]-->
<audio id="hAudioBg" src="xxx" loop autoplay></audio>
</div>
<script>
var annzmy = {
init: function () {
//动画音乐按钮事件
$('#hAudioToggle').click(function () {
$(this).toggleClass('active');
if ($(this).hasClass('active')) {
$('#hAudioBg')[0].muted=false;
}else {
$('#hAudioBg')[0].muted=true;
$('#hAudioBg')[0].volume=0;
}
});
$('a.leave').click(function(){
if ($('#hAudioToggle').hasClass('active')) {
$('#hAudioToggle').removeClass('active');
$('#hAudioBg')[0].muted=true;
}
});
},
//是否是PC
isPc:function () {
var os = new Array("Android","iPhone","Windows Phone","iPod","BlackBerry","MeeGo","SymbianOS"); // 其他类型的移动操作系统类型,自行添加
var info = navigator.userAgent;
var len = os.length;
for (var i = 0; i < len; i++) {
if (info.indexOf(os[i]) > 0){
return false;
}
}
return true;
},
};
annzmy.init();
//判断是否是PC
/*关于视频,会引入两个链接,webm体积小,是未来的一种趋势,然而在火狐浏览器的情况下,给video加了静音效果,但还是会有音乐播放,目前就是只引入MP4格式的视频以达到适配效果*/
if(annzmy.isPc()){
//annzmy.load('//ossweb-img.qq.com/images/js/foot.js','script');
$('.g-wrap').prepend('<div class="top-act-video" >\
<video class="top-small-video" id="topSmallVideo" autoplay loop style="width:100%; height:100%; object-fit:cover" muted>\
<!--<source src="//ossweb-img.qq.com/images/wap201404/video/TVC1009.webm" type="video/webm">-->\
<source src="//ossweb-img.qq.com/images/wap201404/video/TVC1009.mp4" type="video/mp4">\
</video>\
</div>')
}
else{
shineLandscape.init();
$("#footer_ied").remove();
$('.down').remove();
$(".h-audio").remove();
}
</script>