swiper中插入video实现默认当前活动video进入页面自动播放
写一篇关于自定义视频播放功能的播客
需求,pc端实现视频轮播,采用swiper+video实现,默认进入页面在页面加载完数据后,第一个视频自动播放
html部分
在当第一个视频上添加muted属性,默认为true,此属性在chrome上是静音,但是在其他浏览器可以正常播放,
js部分
1.获取到当前swiper拥有swiper-slide-active 属性下的video
2.currentVideo[0] jq获取到的属性,需要[0]可以转为js对象
3.video属性 canplaythrough,在音频可以正常播放且无需停顿时执行JavaScript,通过这个属性监听该视频,如果加载完成后,可以设置为播放
解决默认为静音的问题
设置settimeout,在页面和接口数据调取成功后,找到这个视频,判断该视频的状态,muted默认就是true,也就是静音,这里需要将它转为false,并且设置为播放
到这里就是视频默认进去页面可以实现自动播放的功能了,