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

news/2024/11/15 3:08:50/

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

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


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

/* 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>


http://www.ppmy.cn/news/1546738.html

相关文章

QT-column小节一下

在C语法里面 在 Qt 框架中&#xff0c;"column"&#xff08;列&#xff09;这一术语主要与表格相关的控件紧密相关。 这些控件&#xff0c;例如 QTableWidget 和 QTableView&#xff0c;通常被用于以二维表格的形式展示数据。在这样的上下文中&#xff0c;"co…

【JAVA基础】JVM双亲委派

JVM双亲委派 双亲委派机制为什么进行双亲委派&#xff1f;为什么要设计这种机制&#xff1f; 双亲委派机制 双亲委派是一个孩子向父亲方向&#xff0c;然后父亲向孩子方向的双亲委派过程总结&#xff1a;自下&#xff08;从 App 开始&#xff09;而上进行检查&#xff0c;自上…

非线性数据结构之图

一、无环图&#xff08;Acyclic Graph&#xff09; 1. 定义 无环图是一种没有环路的图&#xff0c;图中的路径不会形成封闭回路。如果无环图是有向的&#xff0c;则称为 有向无环图&#xff08;DAG, Directed Acyclic Graph&#xff09;。 2. 特点 无环性&#xff1a;无环图…

【机器学习】突破分类瓶颈:用逻辑回归与Softmax回归解锁多分类世界

&#x1f497;&#x1f497;&#x1f497;欢迎来到我的博客&#xff0c;你将找到有关如何使用技术解决问题的文章&#xff0c;也会找到某个技术的学习路线。无论你是何种职业&#xff0c;我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章&#xff0c;也欢…

HarmonyOS NEXT:模块化项目 ——修改应用图标+启动页等

涉及官方文档 应用配置文件应用/组件级配置图标资源规范 涉及到app.json5配置文件和module.json5配置文件 1、 icon和label的校验。 IDE从5.0.3.800版本开始&#xff0c;不再对module.json5中的icon和label做强制校验&#xff0c;因此module.json5与app.json5只需要选择其一…

2024年11月10日系统架构设计师考试题目回顾

综合知识 案例分析 试题一&#xff1a;质量属性 基于描述填空是什么质量属性&#xff0c;常规题。&#xff08;性能&#xff0c;功能&#xff0c;安全&#xff0c;可用等等&#xff09; 可用性而言&#xff0c;王工建议采用 ping/echo 机制检测&#xff0c;不过从资源使用角度&…

Linux:网络协议socket

我们之前学的通信是本地进程间通信&#xff0c;如果我们想在网络间通信的话&#xff0c;就需要用到二者的ip地址&#xff0c;分别被称为源IP地址和目的IP地址&#xff0c;被存入ip数据包中&#xff0c;其次我们还需要遵循一些通信协议。 TCP协议&#xff1a;传输层协议&#x…

CKA认证 | Day1 k8s核心概念与集群搭建

第一章 Kubernetes 核心概念 1、主流的容器集群管理系统 容器编排系统&#xff1a; KubernetesSwarmMesos Marathon 2、Kubernetes介绍 Kubernetes是Google在2014年开源的一个容器集群管理系统&#xff0c;Kubernetes简称K8s。 Kubernetes用于容器化应用程序的部署&#x…