优化H5 Vue视频:解决iOS微信预览图问题
版权申诉
22 浏览量
更新于2024-08-23
收藏 124KB PDF 举报
“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),在没有类似服务的情况下,可能需要寻找其他图像处理库或服务来实现相同的功能。此外,对于其他浏览器和平台,可能还需要进行额外的兼容性测试和调整,以确保预览图在各种环境下都能正确显示。
2018-09-28 上传
2020-10-16 上传
2021-05-09 上传
2020-10-16 上传
2020-10-14 上传
2020-10-14 上传
2021-12-06 上传
2024-02-29 上传
2024-10-09 上传
一诺网络技术
- 粉丝: 0
- 资源: 2万+
最新资源
- Material Design 示例:展示Android材料设计的应用
- 农产品供销服务系统设计与实现
- Java实现两个数字相加的基本代码示例
- Delphi代码生成器:模板引擎与数据库实体类
- 三菱PLC控制四台电机启动程序解析
- SSM+Vue智能停车场管理系统的实现与源码分析
- Java帮助系统代码实现与解析
- 开发台:自由职业者专用的MEAN堆栈客户端管理工具
- SSM+Vue房屋租赁系统开发实战(含源码与教程)
- Java实现最大公约数与最小公倍数算法
- 构建模块化AngularJS应用的四边形工具
- SSM+Vue抗疫医疗销售平台源码教程
- 掌握Spring Expression Language及其应用
- 20页可爱卡通手绘儿童旅游相册PPT模板
- JavaWebWidget框架:简化Web应用开发
- 深入探讨Spring Boot框架与其他组件的集成应用