视频预览 JavaScript

在网页开发中，经常需要在页面中展示视频。视频预览功能就是指当鼠标悬停在视频上时，预览该视频的内容。本文将介绍如何实现视频预览功能的 JavaScript 代码。

实现步骤

HTML

首先需要在 HTML 中添加视频元素和预览元素：

<video src="video.mp4" controls poster="poster.jpg"></video>
<div class="preview">
  <video></video>
</div>

其中，src 属性指定视频地址，controls 属性表示视频控制条可见，poster 属性指定视频封面。预览元素中的 video 元素不需要设置任何属性，用于放置预览视频。

CSS

接着需要为预览元素设置 CSS 样式：

.preview {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 120px;
  z-index: 1;
  pointer-events: none; /* 指定元素不接受鼠标事件，让下面的视频元素可以响应鼠标事件 */
  display: none; /* 初始状态为不可见 */
}

position 属性指定元素的定位方式为绝对定位，top 和 left 属性指定元素的位置，width 和 height 属性指定元素的大小，z-index 属性指定元素的层级，pointer-events 属性指定元素不接受鼠标事件，display 属性指定元素的初始状态为不可见。

JavaScript

最后需要编写 JavaScript 代码来实现预览功能：

const video = document.querySelector('video');
const preview = document.querySelector('.preview video');

video.addEventListener('mouseover', () => {
  preview.src = video.src;
  preview.currentTime = video.currentTime;
  preview.play();
  preview.parentElement.style.display = 'block';
});

video.addEventListener('mouseout', () => {
  preview.pause();
  preview.parentElement.style.display = 'none';
});

代码中首先获取视频元素和预览元素，然后为视频元素添加鼠标移入和移出事件。鼠标移入时，将预览视频的 src 属性和 currentTime 属性设置为视频元素的属性，然后播放预览视频并将预览元素的父元素设置为可见。鼠标移出时，暂停预览视频并将预览元素的父元素设置为不可见。

总结

本文介绍了如何使用 JavaScript 实现视频预览功能。需要注意的是，在预览元素中的 video 元素不需要设置任何属性，而在样式中设置 pointer-events: none; 可以让下面的视频元素响应鼠标事件。