移动端部分手机video不自动播放的问题
-
在页面上需要自动播放多个无声的静音视频,我用下面这段代码,大部分手机没问题,三星S20 Utral 在微信上无法自动播放!
$(window).on('load', function() { $('body').one('touchstart', function() { $('.highlights video').each(function() { this.play() }) }) })
-
有些安卓机,用 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) }) })