春节前后接到了一个需求，直播流播放，点击切换直播流，具体的展示形式是翻页显示，每页显示3个，设计如图。
拿到需求后，我第一个想到的是videojs 组件，先实现不翻页的直播流播放和点击切换功能，这个项目是vue框架。 第一步：安装videojs组件，npm i videojs 第二步：在页面中引入videojs
下面的两个文件分别是videojs 中控制条js和video 的css文件 第三步：获取数据，实例化三个videojs对象（这里页面要求一页显示三个），我使用的方法是把实例化的videojs对象放到一个数组中暂存
第四步：更具要求，我们要让第一个直播自动播放，使用videojs中提供的play方法和volume属性，play方法控制播放，volume属性控制音量，这里就是把videojs实例化对象的数组的第1项src赋值和播放
第五步：实现视频播放点击切换功能，这个功能和第一个直播播放的原理相同，把点击的直播的序号保存，然后把videojs播放数组的对应下标的直播调用play方法。
到这里基本实现直播流的播放和切换功能。 然后是实现第二个需求，翻页，首先想到的是用swiper组件来实现。
第一步：安装swiper npm install swiper
第二步：引入swiper，这里包括它的css文件
第三步：实现swiper页面结构，因为3个一页，这里就要把刚才的直播数组改造成二维数组，每一项是包含3个元素的数组，使用两次循环的方法，让每一个直播正常显示，这里每一个直播的id不能重复，可以通过外层和内层循环的index来计算，两次循环如下图
第四步：当swiper翻页的时候，如果页面有播放的直播，暂停播放的直播，然后调用videojs的创建当页的3个直播对象，让当页的第一个直播自动播放。
在这次开发中，首先遇到的问题是一维数组不太好解决3个一页的问题，所以变为二维数组，每三个一组。然后是翻页的时候清空videojs数组，塞入当页的videojs 对象数组，然后自动让当页的第一个直播自动播放。
总结一下之前开发过的需求，如果大家有更好的办法，欢迎回复哈~
