优化H5 Vue视频：解决iOS微信预览图问题

“H5 Vue 视频 video 支持预览图 poster” 在H5页面开发中，Vue.js被广泛用于构建用户界面。在涉及到多媒体元素时，视频（video）标签是一个常用组件，它允许我们在网页中嵌入视频内容。预览图（poster）是视频标签的一个重要属性，用于在视频播放前显示一张静态图片，提高用户体验。然而，在实际应用中，尤其是在iOS的微信内置浏览器中，预览图的显示可能会出现问题，影响视觉效果。 在描述的案例中，开发者遇到了一个问题：在iOS微信内置浏览器中，视频预览图的显示不尽如人意。为了解决这个问题并提供良好的视觉体验，开发者采取了以下优化步骤： 1. 获取视频的宽高：当上传视频时，需要获取视频的实际宽度（videoWidth）和高度（videoHeight）。这可以通过在Vue中使用ref属性绑定到video元素，然后访问其属性来实现。例如，可以遍历materials数组，为每个video元素设置ref，并通过this.$refs获取到对应的video元素，从而得到视频的原始尺寸。 ```html <div v-for="(item, idx) in materials" :key="idx"> <video :ref="`videoView${idx}`" class="cover" :src="item.url" /> </div> ``` 2. 根据视频宽高缩放预览图：为了让预设的预览图适应不同尺寸的视频，需要根据视频的宽高比例调整海报图片的大小。这里使用了一个计算公式，将预览图的宽度固定为移动端video的宽度（343px），然后根据原视频的高度与宽度的比例，计算出新的高度。最后通过阿里云OSS的处理参数（x-oss-process）对图片进行缩放和填充操作。 ```javascript if (video?.poster) { const height = parseInt( 343 / materialValue.videoWidth * materialValue.videoHeight, 10 ); video.poster = `${video.poster}?x-oss-process=image/resize,m_lfit,h_${height}/resize,m_pad,w_343,h_${height}`; } ``` 3. 构建视频HTML结构：在处理完预览图后，创建一个包含video标签的HTML字符串，设置controls属性以便用户可以控制视频播放，同时保持100%的宽度以适应不同的屏幕尺寸。 ```html const videoEl = `<div> <video controls poster="${video.poster}" src="${video.url}" width="100%"></video> <p style="display:none">.</p> </div>`; ``` 经过以上优化，视频预览图在iOS微信内置浏览器中能更好地适应视频尺寸，提供更佳的视觉效果。需要注意的是，这样的解决方案可能依赖于特定的图片处理服务（如阿里云OSS），在没有类似服务的情况下，可能需要寻找其他图像处理库或服务来实现相同的功能。此外，对于其他浏览器和平台，可能还需要进行额外的兼容性测试和调整，以确保预览图在各种环境下都能正确显示。