zoukankan      html  css  js  c++  java
  • H5音乐自动播放ios//禁止安卓手机图片点击

    定义音乐按钮

    <div id="music-btn" class="o-play" style=" 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>

  • 相关阅读:
    Matlab中tic和toc用法
    matlab 哪个函数可以从一组数据中随机抽取一部分出来
    matlab中rep函数的用法
    WinCE平台搭建数据库(wince6.0+vs2008+sqlce)熙熙
    熙熙如何在WinCE里上QQ(天嵌WinCE开发板,PocketPC仿真模拟器,QQ)
    数学建模方法灰色预测法
    数学建模方法层次分析法
    数学建模方法多属性决策模型
    数学建模方法Floyd算法
    数学建模方法Dijkstra算法
  • 原文地址:https://www.cnblogs.com/liangbk/p/9172930.html
Copyright © 2011-2022 走看看