H5音乐自动播放ios//禁止安卓手机图片点击

定义音乐按钮

<div id="music-btn" class="o-play" style="width: 24px; height: 24px; display: block; position: absolute; top: 12px; right: 12px; z-index: 9999; background: url(images/musicbtn.png) no-repeat center/cover;"></div>

音乐 
<audio id="o-music" src="img/bg.mp3" class="muisc" preload="preload" autoplay="autoplay" loop="loop"></audio>

src 属性规定要播放的视频的 URL

preload 属性规定是否在页面加载后载入视频。如果设置了 autoplay 属性,则忽略该属性。

loop 属性规定当视频结束后将重新开始播放。设置该属性,则视频将循环播放。

 

autoplay 属性设置为自动播放的 video 元素:  autoplay 属性规定一旦视频就绪马上开始播放。

js文件

<script type="text/javascript">

  ios自动播放
  function audioAutoPlay(id){
    var audio = document.getElementById(id),
    play = function(){
      audio.play();
      document.removeEventListener("touchstart",play, false);
    };
    audio.play();
    document.addEventListener("WeixinJSBridgeReady", function () {
      play();
    }, false);
    document.addEventListener('YixinJSBridgeReady', function() {
      play();
    }, false);
    document.addEventListener("touchstart",play, false);
  }
  audioAutoPlay('o-music');
  音乐按钮
  $('#music-btn').on('click', function(){
    if(!document.querySelector('#o-music').paused){
      document.querySelector('#o-music').pause();
      $(this).removeClass('o-play');
    }else{
      document.querySelector('#o-music').play();
      $(this).addClass('o-play');
    }
  });
//禁止安卓手机图片点击
  for(var i=0; i<document.querySelectorAll('img').length; i++){
    document.querySelectorAll('img')[i].addEventListener('click', function(e){
    e.preventDefault();
  })
}
</script>

转载于:https://www.cnblogs.com/liangbk/p/9172930.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值