小程序视频旋转的坑

2024-01-09 01:27:23

作为一名技术博主，我时刻关注着小程序开发领域的最新动态。最近在开发小程序时遇到个需求，就是在小程序页面中嵌入一个广告视频，客户给的视频是横屏播放的，但是 UI 显示却要求是竖屏播放。本篇文章将记录我解决这个需求的全过程，分享其中的踩坑经验。

踩坑记录

坑 1：CSS 旋转无效

刚开始时，我尝试使用 CSS transform 属性来旋转视频，代码如下：

video {
  transform: rotate(90deg);
}

然而，这种方法并没有奏效。原因在于，视频元素在小程序中是一个特殊的组件，它不受 CSS transform 属性的影响。

坑 2：使用 canvas 绘制

接下来，我尝试使用 canvas 来绘制视频。具体做法是将视频内容绘制到一个 canvas 元素上，然后将 canvas 元素旋转 90 度。

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0);
canvas.style.transform = 'rotate(90deg)';

这种方法虽然可以实现视频旋转，但是它有一个明显的缺点：视频质量会受到影响。这是因为 canvas 绘制是一个像素化的过程，它会导致视频内容失真。

坑 3：使用第三方库

在网上搜索了一番后，我发现有一些第三方库可以实现小程序视频旋转。其中，我选择了 mpvue-video-rotate 这个库。

这个库提供了两个方法：rotate 和 reverse，分别用于旋转和反转视频。使用方式也很简单：

import VideoRotate from 'mpvue-video-rotate';

const videoRotate = new VideoRotate(video);
videoRotate.rotate(90);

最终解决方案

经过一番尝试，我最终找到了一个既能实现视频旋转又不会影响视频质量的方法。具体做法如下：

使用 <video> 标签创建视频元素。
使用 JavaScript 创建一个新的 video 对象，并将 <video> 标签的 src 属性值赋值给该对象。
将 video 对象的 videoWidth 和 videoHeight 属性交换。
将 video 对象的 webkit-playsinline 属性设置为 true。

const video = document.createElement('video');
const newVideo = new Video();
newVideo.src = video.src;
newVideo.videoWidth = video.videoHeight;
newVideo.videoHeight = video.videoWidth;
newVideo.webkit-playsinline = true;