带你读《2022技术人的百宝黑皮书》——短视频无尽流前端开发指南(5)

简介: 带你读《2022技术人的百宝黑皮书》——短视频无尽流前端开发指南(5)

带你读《2022技术人的百宝黑皮书》——短视频无尽流前端开发指南(4) https://developer.aliyun.com/article/1243498?groupCode=taobaotech



swiper入参配置可参考:


// swiper 6.x版本 和 8.x版本 使用上会有一定区别,注释中会将不同点标注出来
import * as React from 'react';
// [swiper 8.x] 引入 swiper
import { Virtual } from 'swiper';
// [swiper 6.x] 引入 swiper
// import SwiperCore, { Virtual } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';
import type { FC } from 'react';
import type { IVideoCardItem } from '../../types
import styles from './index.module.less';
// [swiper 6.x] 加载 Virtual 模块
// SwiperCore.use([Virtual]);
const VideoSwiper: FC = () => {
 return (
 <Swiper
 className={styles.videoSwiperContainer}
 // 切换方向
 direction="vertical"
 // 初始索引
 initialSlide={0}
 // 切换角度,防止误切
 touchAngle={30}
 // [swiper 8.x] 加载 Virtual 模块
 modules={[Virtual]}
 // virtual配置,如下配置会保证至多有5 slide
 virtual={{
 // 在active的slide前多渲染1个slide
 addSlidesBefore: 1,
 // 在active的slide后多预渲染1个slide
 addSlidesAfter: 1,
 }}
 >
 {/* ... */}
 </Swiper>
 );
};


tips:移动端swiper切换时可能存在闪屏/抖动的异常情况,可以使用如下代码开启硬件加速,可以解决大部分异常情况。


.videoSwiperContainer :global {
 .swiper-wrapper {
 transform: translate3d(0, 0, 0);
 .swiper-slide {
 transform: translate3d(0, 0, 0);
 }
 }
}


视频播放器实例管理


上述中提到只需要屏幕当中的那一个内容卡片渲染播放器,其余展示封面图占位即可。在轮播容器完成一次切换即 onTransitionEnd 时销毁上一个内容卡片的播放器,同时激活当前内容卡片的播放器,保证始终只有一个播放器处于激活状态。


tips:当前内容卡片的播放器激活后,由于还需要加载视频资源,因此切换后会有短暂的等待时间。为了提升用户体验,可以配合视频资源的预加载,优先使用端侧提供的预加载能力,若没有该支持,可以尝试使用blob等预加载方案。


image.png



带你读《2022技术人的百宝黑皮书》——短视频无尽流前端开发指南(6) https://developer.aliyun.com/article/1243496?groupCode=taobaotech

相关文章
|
17天前
|
前端开发 JavaScript 持续交付
前端技术趋势:2024年值得关注的几个方面
【10月更文挑战第9天】前端技术趋势:2024年值得关注的几个方面
|
3天前
|
Cloud Native 前端开发 JavaScript
前端开发者必看:不懂云原生你就OUT了!揭秘如何用云原生技术提升项目部署与全栈能力
【10月更文挑战第23天】随着云计算的发展,云原生逐渐成为技术热点。前端开发者了解云原生有助于提升部署与运维效率、实现微服务化、掌握全栈开发能力和利用丰富技术生态。本文通过示例代码介绍云原生在前端项目中的应用,帮助开发者更好地理解其重要性。
18 0
|
27天前
|
前端开发 JavaScript API
前端技术探索:从基础到未来趋势的深度剖析
前端技术探索:从基础到未来趋势的深度剖析
60 1
|
19天前
|
存储 前端开发 JavaScript
前端技术趋势:在动态变化中寻求稳定
【10月更文挑战第7天】前端技术趋势:在动态变化中寻求稳定
33 0
|
19天前
|
前端开发 数据可视化 JavaScript
现代前端开发:掌握关键技术与趋势
【10月更文挑战第7天】现代前端开发:掌握关键技术与趋势
39 0
|
1天前
|
运维 前端开发 JavaScript
前端技术深度探索:从基础到现代的演进
【10月更文挑战第23天】前端技术深度探索:从基础到现代的演进
12 1
|
10天前
|
前端开发 JavaScript 安全
JavaScript前端开发技术
JavaScript(简称JS)是一种广泛使用的脚本语言,特别在前端开发领域,它几乎成为了网页开发的标配。从简单的表单验证到复杂的单页应用(SPA),JavaScript都扮演着不可或缺的角色。
16 3
|
11天前
|
人工智能 前端开发
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
|
17天前
|
前端开发 JavaScript 开发者
探索现代Web前端技术:React框架入门
【10月更文挑战第9天】 探索现代Web前端技术:React框架入门
|
20天前
|
存储 缓存 监控