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

zhazhuipian7

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

$(window).on('load', function() {
    $('body').one('touchstart', function() {
      $('.highlights video').each(function() {
        this.play()
      })
    })
  })

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)
    })
  })