background

App sharing to wechat requires the function of making a short video. After the video is shared, the requirement is that H5 should make short video function with ##video as background. I summarize the following requirements:

  1. Control pause play
  2. You need to enable full screen disable the full screen function
  3. After the full screen function is disabled, progress synchronization is played
  4. In the next video I’m going to show you a custom suspension layer
  5. Click the video to play in full screen
  6. Scrolling automatically listens for video playback
  7. Solve the problem of compatible display in browsers of different models (highlight!!)

(You can’t do that with native video now)

Problems encountered

  1. We need to consider the built-in video playback controls of ios and Android systems, as well as the built-in X5 browser of wechat. The video controls on ios can be removed and then you can define the play pause by yourself. However, the controls in the lower row of Android video playback controls can be removed, but the pause button in the middle of the video cannot be removed
  2. The video plug-in of mobile phone browser will have the highest video level when the video is playing, and the floating layer on the video before will not be visible. No matter how much Z-index is set after positioning, it will not be used
  3. When the video is playing, different phones will display the video in full screen, which is different from the original intention of serving as the background

Based on the above reasons, it is not satisfactory to use the video tag on different devices. Meanwhile, the rendering of videos on ios and Android is also different (and hundreds of Android models are compatible with each other), so the code implementation is a little complicated

Finally, I decided to render the video on canvas and then draw the controls myself!!

Top rendering (in full screen)

Play in non-full-screen mode

html

js

After the painting is finished, there is a problem. That’s when you scroll somewhere and you need to play a video. But wechat explicitly forbids the automatic play function. So we use code clicks to get around it.

The above principle uses the timer cycle to draw video. Main idea: In Canvas, ctx.drawImage(video, x, y,width,height) can be used to draw the image of the current frame of the video, where the video parameter is the video tag in HTML5. Therefore, we can continuously obtain the current picture of the video through the dynamic effect of Canvas and render it on Canvas. And by changing the attributes of the video tag, to achieve a set of effects of video processing in Canvas. It can be understood as creating a new player in Canvas. The video source of the player is the creation of the video tag. The various methods of the player ultimately point to the change of the attributes and methods of the video tag itself. In the middle of the process, I encountered the problem of unclear frame rate, which should be the problem of compression of the width and height of the video. Finally, I enlarged the canvas to double the actual display of the video. Now the function does not support video rotation. If you need to rotate the video, add a monitor rotation width and recalculate the video width. You can also use the powerful functions of Canvas to further image processing, zoom in and out of the loading of bullets to change the video style and other operations!! ~

That’s part of the code. Have interest can discuss together!