移动端部分手机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) }) })
西南地区IT社群(QQ)
- 云南
- 【昆明网页设计交流吧】243627302
- 【昆明nodejs交流吧】 243626749
- 【VUE】838405306
- 【云南程序员总群】343606807
- 【昆明UI设计】104031254
- 【云南软件外包】15547313
- 贵州
- 【PHP/java源码/站长交流群】55692114
- 四川
- 【成都Java/JavaWeb交流】86669225
- 【vaScript+PHP+MySql】116270060
- 【UI设计/设计交流学习群】135794928
- 重庆
- 【诺基亚 JAVA游戏博物馆】 559479780
- 【PHP,Java,Python,C++接单】 442103442
- 西藏