美文网首页
兼容IE8的音乐播放暂停按钮

兼容IE8的音乐播放暂停按钮

作者: Annzmy95 | 来源:发表于2017-10-17 11:26 被阅读0次

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>

相关文章

网友评论

      本文标题:兼容IE8的音乐播放暂停按钮

      本文链接:https://www.haomeiwen.com/subject/keqnextx.html