当前代码适用于加载MP4和flv格式的视频流
先看下完整的功能图
功能讲解
- 1.四宫格与一屏的切换（现在浏览器最多只支持6屏，我测试了下四屏的话差不多就是极限了最好不要再超过了）
- 2.实现video多屏同时播放
- 3.实现翻页功能
屏幕的宫格如何实现（四宫格）
我使用了两个div嵌套 外层的div控制纵向的个数内层的div控制横向的个数 如下图
黄色的为纵向div 粉红的为横向div可以结合代码看
那么一屏和四屏是如何切换的呢
data() {
return {
howmany: 1, // 1 为1屏 //2 为四屏 // 3为9屏（浏览器最多支持6屏所以这里删除了）
};
},
<div v-for="i in howmany" :key="i" class="horizontal">
<div v-for="j in howmany" :key="j" class="vertical">
这里面放video标签
</div>
</div>
.horizontal {
display: flex;
flex: 1;
flex-direction: row;
margin-bottom: 1px;
}
.vertical {
display: flex;
flex: 1;
margin-right: 1px;
}
切换的话只需要改变howmany 这个字段的值就行了，拷过去就可以使用。
开发到这里如果你没接触过video你会大概率遇到以下问题↓
1.video如何充满父容器？
上篇文章已经提到过了这里不做过多讲解不知道的点这里
2.为什么我的video只能展示一屏？
这是一个特别基础但又特别让人忽略的问题。大方的说我当时就没注意到那个点导致一晚上没想通。等一觉醒来时才发现真特么蠢。
- 1.如果你用到了flv去加载视频那么你就需要使用到id或者class 去获取这个element
- 2.你很可能只用了一个id 或者相同的class导致不管加载多少屏都只能加载第一屏。
解决多屏只加载一个视频的方法
需要给多个video赋予不同的id值。
3.为什么翻页的时候会报错各种错误层出不穷。下面是折磨了我一天的精华
- 1.一屏切换到4屏 或者 4屏切换的1屏 时第一个视频始终不改变
这个是因为浏览器的缓存导致的解决方法也简单
// 加个耗时操作就阔以啦。
fourScreen() {
this.restScreen();
setTimeout(() => {
this.howmany = 2;
}, 50);
},
restScreen() {
this.pages = 0;
this.howmany = 0;
},
- 2.切换页面时画面没有变化。
1.如果切换的视频流相同那么没变化是正常的
2.如果视频流不同那么是因为你没有在自定义的video标签中处理二次监听。操作做法如下
watch: {
sources: {
deep: true,
// immediate: true,// 千万不要加这一行代码加里就完蛋
handler(newSources, oldSources) {
var videoElement = document.getElementById(this.id);
if (!videoElement) {
if (this.player !== null) {
// attachMediaElement(mediaElement: HTMLMediaElement): void;
this.player.pause();
this.player.unload();
this.player.detachMediaElement();
}
}
if (!this.loading) {
this.loading = true;
}
if (flv.isSupported()) {
this.player = flv.createPlayer({
type: "mp4/flv",
url: newSources
// url: this.sources
});
}
var videoElement = document.getElementById(this.id);
this.player.attachMediaElement(videoElement);
this.player.load();
}
}
},
- 3.当你切换视频到最后一页，而恰好后几个容器没有视频流加载然后你切回来这时啪GG思密达？
这时你会发现一堆的bug想摔了电脑的心都有了
1.那是因为你没有做好占位符工作。（当video的url为空时一定不要加载video否则那错误想跑火车一样一路报红）
好啦上代码吧很简单 很多细节在代码的注释里面一定要看注释
https://gitee.com/wukong2/video-flv
