background

Recently in the development of small program encountered a demand, is in the small program page embedded in an advertising video, the customer to the video play horizontal screen, but the UI display is required to play vertical screen, here to record the realization of this effect on the whole process of pit

CSS Transform Rotate video component

Transform: rotate(90deg) without thinking much at first; transform-origin: 0 100%; I rotated the video 90°, which worked on Android, but it still played landscape on ios

Fixed video not rotating on ios

The initial

  • First I went online and looked up the reason why ios can’t rotate, and it said to be intransformFor use on-webkit-The prefix, however, I added does not rotate, I tried to usetransformTo rotate oneviewThe component is found to be rotatable, so this is not the cause
  • I continue to search small program video rotation, found that there are several articles have mentioned this problem, but there is no useful reply, small program official personnel also said in these questionsvideoIt uses native components and has little to do with applets

The transition

Since the small program has been abandoned, it has nothing to do with them, so the video cannot be rotated from the code level, so I came up with a compromise plan to make the video play in full screen, which can make the video turn sideways, but the client did not accept this plan, saying that the full screen would block the title of the small program. Only landscape in non-full-screen mode can occupy the entire body area

In the end

The customer is the father, and the customer does not accept the full-screen solution, so we have to continue to find a solution. At this time, I suddenly thought that since video is a native component, it should be the problem of ios system itself. When I searched for information related to ios video rotation, Finally found the following an article www.cnblogs.com/alby/p/4610… As mentioned in the article, ios determines whether a video should play landscape or portrait based on the Rotation metadata in the video file. If the Rotation value is 0, the video should play landscape, and if the Rotation value is 90, the video should play portrait. The article also stolen the following command to add Rotation property to the video file

 ffmpeg -i input.mp4 -c copy -metadata:s:v:0 rotate=90 output.mp4
Copy the code

After adding the Rotation=90, the video on the computer will be played in portrait. When adding the video component to the mini program, the video will be played in portrait by 90° without having to rotate the video component

Other problems

The video of the applet is a native component with a very high level, so the level of the video cannot be modified by setting z-index. In general, it cannot cover images on the video. The applet provides cover-view, and the cover-image component wants to achieve the effect of coverage. For example, in ios10 and ios12, cover-view and cover-image can not be overwritten, but in ios11, they can be overwritten. I wonder why things supported by 11 are lost in 12. Similarly, binding events such as TouchStart and Touchend to cover-image and cover-view does not take effect on ios12 and ios10, but on ios11. The above problems have not been found on Android, and relevant solutions will be studied later