本文介绍如何通过 JavaScript 动态控制 或 元素的 object-position Y 偏移量，实现多视角视频（垂直拼接）的实时切换，无需刷新页面。
本文介绍如何通过 javascript 动态控制 `
在处理垂直堆叠的多角度视频（如 1280×2160 的三段 720p 视频上下拼接）时，object-fit: none 配合 object-position 是精准裁切并切换视角的理想方案。关键在于：固定容器尺寸仅显示单个视角高度（如 720px），再通过动态修改 object-position 的 Y 值（如 0, -720px, -1440px）实现“平移视口”效果。
以下为完整、可直接运行的实现方案：
✅ HTML 结构（简洁语义化）
<video id="multiAngleVideo" width="1280" height="720" controls> <source src="family-event-stacked.mp4" type="video/mp4"> </video> <div class="angle-controls"> <button class="angle-btn" data-y="0px">主视角</button> <button class="angle-btn" data-y="-720px">宾客视角</button> <button class="angle-btn" data-y="-1440px">舞台视角</button> </div>
✅ CSS 样式（确保精确裁切）
#multiAngleVideo {
width: 1280px;
height: 720px; /* 严格等于单个视角高度 */
object-fit: none; /* 禁用缩放，启用 position 控制 */
object-position: 0 0; /* 初始显示顶部视角 */
}
.angle-controls {
margin-top: 12px;
}
.angle-btn {
padding: 8px 16px;
margin-right: 8px;
cursor: pointer;
background: #4a6fa5;
color: white;
border: none;
border-radius: 4px;
}✅ JavaScript 逻辑（事件委托 + 安全更新）
const video = document.getElementById('multiAngleVideo');
const buttons = document.querySelectorAll('.angle-btn');
// 使用事件委托，避免重复绑定
document.addEventListener('click', (e) => {
if (!e.target.classList.contains('angle-btn')) return;
const newY = e.target.dataset.y;
// 安全写法：仅更新 object-position 的 Y 值，X 保持 0
video.style.objectPosition = `0 ${newY}`;
});⚠️ 注意事项与最佳实践
-
必须设置
object-fit: none：否则object-position不生效； -
容器尺寸需严格匹配单视角分辨率（如本例中
height: 720px），否则会出现黑边或截断； - *优先使用 `data-
属性传值**，而非内联onclick`，更易维护且符合现代 DOM 操作规范； - 若视频加载延迟，可在
loadedmetadata事件后初始化按钮状态； - 对于 Safari 等旧版浏览器，可添加
video.style.webkitObjectPosition兼容前缀（但现代项目通常无需）； - 如需记忆用户上次选择，可结合
localStorage持久化data-y值。
该方案轻量、高效、无依赖，完美适配静态站点或任意前端框架环境。只需三行核心 JS，即可实现专业级多机位视频切换体验。
