大疆官网视频轮播图如何实现？

Question

这种效果的轮播图怎么做

Answer 1

swiper里面加的video标签, 页面初始化时只加载第一个图的video, 其他的是封面图片, 切换后是添加了视频

Answer 2

一般来说这样的需求都是 轮播 + Video 的形式，只不过每次切换激活的时候使用 .play() 去播放一下当前视频和使用 .stop() 来暂停其他兄弟元素的 video 组件播放。
预览图可以用 <img> 元素覆盖，也可以用 video 元素的 poster 属性来设置，但看DJI官网的效果是使用的 poster 属性，因为切换轮播图之后并没有被预览图覆盖。

P.s. 如果不能自动播放，一般设置视频为静音就可以播放了。

相关阅读
<video>: 视频嵌入元素 - HTML（超文本标记语言） | MDN
HTMLMediaElement: play event - Web API 接口参考 | MDN
HTMLMediaElement: pause event - Web API 接口参考 | MDN

Answer 3

swiper官网有这差不多类似效果的示例，你自己稍微改改，不就能用了，先在轮播图主流使用swiper，你基本在swiper上改就行了https://www.swiper.com.cn/dem...
然后文字变化，你可以监听swiper的slideChange事件（https://www.swiper.com.cn/api... 你可以在线看看效果），这样就能更换文字效果了