上班无聊的时候写了一个个人网站,加了个视频,发现加载的特别慢,必应搜了一下,大部分建议都是增加服务器带宽,那为何不使用分段加载。因为优点能解决影响,缺点也会带来一个新的影响
优点能将大视频分割成多个小视频后。在播放时,先加载第一段视频,当观看第一段时,后续的视频可以在后台加载。从而减少用户等待的时间。缺点是如果视频在分割或播放切换时处理不当,会导致播放不连贯。在片段之间的过渡可能会出现明显的停顿感,影响观看。所以分段加载更适合个人使用或者要求不高的网站使用。
以下代码只是初步代码,如需使用可正常运行后根据自身想法修改
/* 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>