网站视频过大,加载缓慢解决方法【分段加载视频】

上班无聊的时候写了一个个人网站,加了个视频,发现加载的特别慢,必应搜了一下,大部分建议都是增加服务器带宽,那为何不使用分段加载。因为优点能解决影响,缺点也会带来一个新的影响

优点能将大视频分割成多个小视频后。在播放时,先加载第一段视频,当观看第一段时,后续的视频可以在后台加载。从而减少用户等待的时间。缺点是如果视频在分割或播放切换时处理不当,会导致播放不连贯。在片段之间的过渡可能会出现明显的停顿感,影响观看。所以分段加载更适合个人使用或者要求不高的网站使用。


以下代码只是初步代码,如需使用可正常运行后根据自身想法修改

/* HTML */

<div class="video-container">  
	<video id="video1" controls preload="auto"><source src="shipin/1.mp4" type="video/mp4"></video>
	<video id="video2" style="display:none;" controls preload="auto"><source src="shipin/2.mp4" type="video/mp4"></video>
	<video id="video3" style="display:none;" controls preload="auto"><source src="shipin/3.mp4" type="video/mp4"></video>
	<video id="video4" style="display:none;" controls preload="auto"><source src="shipin/4.mp4" type="video/mp4"></video>
</div>

/* JAVA */

<script>  
document.addEventListener('DOMContentLoaded', (event) => {
    const videos = [
        document.getElementById('video1'),
        document.getElementById('video2'),
        document.getElementById('video3'),
        document.getElementById('video4')
    ];
  
    let currentIndex = 0;
    const totalVideos = videos.length;
	
    videos.forEach((video, index) => {
		video.addEventListener('ended',()=>{
			// 隐藏当前视频
            videos[index].style.display = 'none';
			// 更新以指向下一个视频
            currentIndex = (index + 1) % totalVideos;
			// 显示下一个视频,但不播放
            videos[currentIndex].style.display = 'block';
            // 不是第一个视频,则播放它   是第一个视频,则不播放,保持停止状态
            if(currentIndex !== 0){
				videos[currentIndex].play();
            }
        });
    });
	
    // 初始播放第一个视频
    videos[currentIndex].style.display = 'block';
    videos[currentIndex].play();
});
</script>

/* STYLE */

<style>
    .video-container{
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 56.25%;
        overflow: hidden;  
    }
	
    .video-container video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }  
</style>
相关推荐
孟秋与你1 分钟前
【spring】spring单例模式与锁对象作用域的分析
java·spring·单例模式
菜菜-plus5 分钟前
java 设计模式 模板方法模式
java·设计模式·模板方法模式
萨达大6 分钟前
23种设计模式-模板方法(Template Method)设计模式
java·c++·设计模式·软考·模板方法模式·软件设计师·行为型设计模式
tian-ming7 分钟前
(十八)JavaWeb后端开发案例——会话/yml/过滤器/拦截器
java·开发语言·前端
不能只会打代码10 分钟前
大学课程项目中的记忆深刻 Bug —— 一次意外的数组越界
java·github·intellij-idea·话题博客
深海呐13 分钟前
Android 从本地选择视频,用APP播放或进行其他处理
android·音视频·从本地选择视频,用app播放·从本地选择视频,并拿到信息·跳转到本地视频列表
快意咖啡~17 分钟前
java.nio.charset.MalformedInputException: Input length = 1
java·开发语言·nio
IT枫斗者44 分钟前
如何解决Java EasyExcel 导出报内存溢出
java·服务器·开发语言·网络·分布式·物联网
爱编程的小生1 小时前
Easyexcel(4-模板文件)
java·excel
求积分不加C1 小时前
Kafka怎么发送JAVA对象并在消费者端解析出JAVA对象--示例
java·分布式·kafka·linq