swiper中插入video实现默认当前活动video进入页面自动播放

写一篇关于自定义视频播放功能的播客

需求,pc端实现视频轮播,采用swiper+video实现,默认进入页面在页面加载完数据后,第一个视频自动播放

html部分

在当第一个视频上添加muted属性,默认为true,此属性在chrome上是静音,但是在其他浏览器可以正常播放,

swiper中插入video实现默认当前活动video进入页面自动播放

 js部分

 1.获取到当前swiper拥有swiper-slide-active 属性下的video

2.currentVideo[0]   jq获取到的属性,需要[0]可以转为js对象

3.video属性 canplaythrough,在音频可以正常播放且无需停顿时执行JavaScript,通过这个属性监听该视频,如果加载完成后,可以设置为播放

swiper中插入video实现默认当前活动video进入页面自动播放

 解决默认为静音的问题

设置settimeout,在页面和接口数据调取成功后,找到这个视频,判断该视频的状态,muted默认就是true,也就是静音,这里需要将它转为false,并且设置为播放

swiper中插入video实现默认当前活动video进入页面自动播放

 到这里就是视频默认进去页面可以实现自动播放的功能了,