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

1 篇文章 0 订阅
1 篇文章 0 订阅

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

需求,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,并且设置为播放

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

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值