HTML5原生video标签支持五种点播实现：一、基础内嵌播放；二、JS动态切换视频源；三、source元素多格式兼容；四、自定义控件精准跳转；五、localStorage断点续播。
如果您希望在网页中实现视频点播功能，HTML5 提供了原生的 <video> 标签配合 JavaScript 控制能力，可直接加载指定视频资源并支持播放、暂停、跳转等交互操作。以下是几种具体实现方式：
一、基础 video 标签内嵌点播
该方法利用 HTML5 原生 video 元素直接加载单个视频文件，无需额外 JS 即可完成基本点播播放，适用于固定资源场景。
1、在 HTML 中插入 <video> 标签，并设置 controls 属性启用默认控件。
2、通过 src 属性指定视频文件的绝对或相对路径，如 mp4、webm 或 ogg 格式。
立即学习“前端免费学习笔记（深入）”；
3、添加 preload="metadata" 属性以预加载视频元信息（时长、尺寸），提升首帧响应速度。
4、可选添加 poster 属性指定封面图，在视频未播放前显示。
二、JS 动态设置 video 源实现多视频点播
该方法通过 JavaScript 修改 video 元素的 src 属性或 innerHTML，实现在同一播放器中切换不同视频资源，适合列表式点播界面。
1、为 <video> 元素设置 id，例如 id="player"，便于 JS 获取 DOM 引用。
2、准备多个视频地址数组，如 const videos = ["video1.mp4", "video2.mp4"];
3、为每个视频项绑定点击事件，触发 player.src = videos[index];
4、调用 player.load() 重新加载媒体资源，再执行 player.play() 启动播放。
三、使用 source 元素切换多格式源实现兼容点播
该方法通过 <source> 子标签提供多种编码格式的视频资源，由浏览器自动选择最优支持格式，增强跨设备兼容性。
1、保留 <video> 标签，移除 src 属性，改用多个 <source> 子元素。
2、每个 <source> 设置 src 和 type 属性，如 type="video/mp4" 或 type="video/webm"。
3、通过 JS 获取 video 元素后，遍历其 children 或 sources 集合，动态替换子节点内容。
4、调用 video.load() 确保新 source 生效，避免缓存导致旧资源残留。
四、自定义控件 + 时间轴跳转实现精准点播控制
该方法绕过浏览器默认控件，使用 JS 监听进度条拖动事件，手动设置 currentTime 实现任意时间点播放，满足精确定位需求。
1、隐藏原生 controls，添加自定义 range 类型 input 元素作为进度条。
2、监听 video 的 timeupdate 事件，实时更新 input.value = (video.currentTime / video.duration) * 100;
3、监听 input 的 input 事件，计算目标时间：video.currentTime = (input.value / 100) * video.duration;
4、在 video 加载元数据后（loadedmetadata 事件）设置 input.max = 100，并启用拖动功能。
五、结合 localStorage 记录播放位置实现断点续播点播
该方法在用户离开页面前保存当前播放时间戳，下次访问相同视频时自动跳转至上次位置，提升连续观看体验。
1、为 video 元素绑定 timeupdate 事件，每秒检查是否需更新 localStorage。
2、使用 setInterval 或 requestAnimationFrame 控制保存频率，避免高频写入。
3、将播放时间存入 localStorage，键名格式为 "video_resume_" + 视频 src 的哈希值。
4、在 video 加载完成（canplay 节点）后读取对应键值，若存在则执行 video.currentTime = savedTime;
