Navigation

    云、贵、川、渝IT人的圈子
    • Register
    • Login
    • Search
    • 主页
    • 问答
    • 话题
    • 热门
    • 圈子
    • 招聘
    • 活动
    • 项目

    移动端部分手机video不自动播放的问题

    技术答疑
    2
    2
    23
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • zhazhuipian7
      zhazhuipian7 last edited by zhazhuipian7

      在页面上需要自动播放多个无声的静音视频,我用下面这段代码,大部分手机没问题,三星S20 Utral 在微信上无法自动播放!

      $(window).on('load', function() {
          $('body').one('touchstart', function() {
            $('.highlights video').each(function() {
              this.play()
            })
          })
        })
      
      1 Reply Last reply Reply Quote 0
      • M
        mangzei55 last edited by mangzei55

        有些安卓机,用 touchstart 和 touchend 来触发video是播放不了的,可能是手机底层对手势进行了识别
        建议你做一个降级方案,当视频无法播放的时候,把视频替换成 gif, 这样就可以解决大部分机型播放不出来的问题了!并且不影响能播放视频的手机!

        以下是伪代码,你可以参考一下

        // 降级 GIF 播放
          var demotionGif = function() {
            var u = navigator.userAgent;
            var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1
            if (!isAndroid) return
            // 假设你的video里面有一个 data-gif 属性
            $('[data-gif]').each(function() {
              $(this).after('<img src=' + $(this).data('gif') + ' class="full">')
              $(this).remove()
            })
          }
          // 亮点视频移动端自动播放
          $(window).on('load', function() {
            var playing = false
            var touchcount = 0
            $('body').on('touchstart', function() {
              $('.highlights video').each(function() {
                if (this.currentTime <= 0) this.play()
              })
            })
            // 兼容部分安卓机无法播放视频的问题
            $('body').on('touchend', function() {
              touchcount += 1
              // 前2次触摸忽略
              if (touchcount < 2 && touchcount > 5) return
              setTimeout(function() {
                $('.highlights video').each(function() {
                  if (this.currentTime > 0) playing = true
                })
                if (!playing) demotionGif()
              }, 3000)
            })
          })
        
        1 Reply Last reply Reply Quote 0
        • First post
          Last post
        M
        千
        I
        Y
        E
        O
        A
        社
        8
        玻
        U
        A
        大
        A
        黑
        低
        天
        白
        快
        爱
        白
        美

        社群
        昆明网页设计交流吧
        友情链接
        • Funtask
        • Funtask 社区
        • SUWIS
        ©2019-2021 滇ICP备20006698号