WeChat video and email video

Video and email video

<video width="320" height="240" controls>    <source src="movie.mp4" type="video/mp4"></video>

This is a normal video writing method. Let's check what style it is.

 

 

This video control style is not what we want. We need to write the video cover style by ourselves.

 

Common method: Set the video album art style by yourself.

Step 1: Find a video cover and set the size.

Step 2: Hide video.

Step 3: Use js to monitor whether users click images. When you click an image, video is displayed and the play () method is used to play the video. (elements obtained by jq cannot be called ).

Step 4: monitor whether the video is exited. If you exit, the video is hidden. (Because videos are played in full screen on ios and some Android devices ).

var video = document.getElementById('');video.addEventListener('pause',function () {         video.style.display = 'none'    });

Jq calls a video playback event. This method can be called by $ ('# video'). trigger ('play.

The above is simulated video playback.

 

However, the video is disgusting, and some Android phones (such as the 360 mobile phone) play videos in inline mode.

What is inline playback: the video is played within the width and height of the video instead of full screen playback.

Some Android phones:

Is full screen playback.

360 mobile phone:

This type of playing is inline (also known as embedded playback), and the video width and height I set is 300*360.

 

There are two solutions:

First, all mobile phones are played online.

Set the three attributes to enable inline playback.

playsinline webkit-playsinline x5-playsinline

Second, full screen playback on mobile phones

The above mobile phones are full screen by default. 360. How can I enable full screen without full screen. You can use video. js (this method is my solution ).

We introduce the video. js file.

<link rel="stylesheet" href="css/video-js.css"><script src="js/video.min.js"></script><video width='300' height='300'  id='video' playsinline webkit-playsinline x5-playsinline>    <source src="heibao.mp3" type="video/mp4"></video><script>  var myPlayer = videojs('video');   myPlayer.requestFullscreen();     </script>

This solves the inconsistency of various mobile phone videos. But !!! Android is disgusting.

 

I didn't set the price control attribute for controls, so there is space such as progress bar, pause, and full screen in the video. I have read some materials (if you have any bosses, please do not spray me --). The video tag of android is actually hijacked. The control of the video tag should be used like this, and the control of video playback is obviously different. So I think the video is hijacked, put the video in your own player for playback.

 

Not to mention how to remove the video control: the following attributes do not support ios. (If you want to set the style of the progress bar, you basically use the x5 playing at the same layer. Remove the progress bar and add the progress bar yourself)

To remove the control, you can use the same layer mode of x5.x5-video-player-type="h5"Andx5-video-player-fullscreen="true"

This is a player style with the same layer of x5. No end controls, details can see the https://x5.tencent.com/tbs/guide/video.html official site content.

 

Later I used the first method. All mobile phones played videos in full screen mode. No video study. It is quite convenient to play the x5 at the same layer. I have not studied it too deeply.

 

I have just written a blog, so the article's literary talent is not good. Sorry.