前端如何实现视频预览

前端实现视频预览通常涉及HTML、CSS以及JavaScript的配合。以下是基本步骤：

1. **HTML结构**：
使用`<video>`标签来嵌入视频文件，可以设置一个占位图片作为预览，如`<img>`或`<figure>`, 内部包含`<video>`。

   <div class="preview-container">
     <img src="thumbnail.jpg" alt="Video Preview">
     <video controls></video>
   </div>

2. **CSS样式**：
预设样式可以设置图片和视频的大小，位置和显示效果。同时，为视频添加一些基础的播放控制样式，比如默认隐藏。

   .preview-container {
     position: relative;
   }
   video {
     display: none; /* 隐藏视频直到用户交互 */
     width: 100%;
     height: auto;
   }
   img {
     max-width: 100%;
     cursor: pointer; /* 显示悬停指针提示用户点击 */
   }

3. **JavaScript处理**：
当用户点击图片或视频元素时，切换`<video>`的`display`属性，显示视频。也可以使用`addEventListener`监听用户的事件，如`click`或`mouseover`。

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

   preview.addEventListener('click', function() {
     video.style.display = 'block';
   });

4. **兼容性和性能优化**：
考虑浏览器兼容性问题，尤其是对于旧版浏览器可能需要引入一些polyfill。同时，为了提高用户体验，可以使用懒加载（如`Intersection Observer API`）来延迟加载完整视频内容。