Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to achieve full-screen video display on the mobile phone by HTML5. It is very detailed and has a certain reference value. Friends who are interested must finish it!

The first is to enlarge the video to control it.

When the video is played, the full screen is based on the height. If the width of the video video tag is 100% and the height is 110%, the full screen can be achieved, and the excess is overflowed and hidden.

OK: the screen size of the mobile phone is not fixed, and this height of 110% is not easy to determine.

Second: use object-fit to solve the problem

Go directly to the code:

Video is not supported

After compilation, the video is played inside the page without jumping out and using the system player to play the video full screen. And the z-index attribute can also be defined normally, so that other elements can be overridden on top of the video.

Css: keep the original scale of the picture

# my-video {object-fit: cover; object-position: center center

A simple demo implementation:

Video player * {margin:0px; padding:0px;} .app {width: 100%; height:100%; position: absolute; top:0px; right:0px; bottom: 0px; left:0px; overflow: hidden;} .video {width: 100%; height:100%;} # my-video {object-fit: cover; object-position: center center;}

Video is not supported

/ / vue parses var Application = new Vue ({el: "# app", data: {videoUrl:'', video:null,}, mounted: function () {this.videoUrl = "http://gamaru.wpgcms.com/media/file/movie/dkSdfdqur5uQKV5p.mp4"; this.video = this.$refs.video" }, methods: {player:function () {console.log (this.video.clientWidth); console.log (this.video.clientHeight); if (this.video.paused) {/ / play this.video.play () } else {/ / pause this.video.pause ()};})

Explain: object-fit

Fill: the Chinese definition of "fill". Default value. The replacement content stretch fills the entire content box and is not guaranteed to maintain the original proportion.

Contain: the Chinese definition of "contains". Maintain the original size ratio. Make sure that the size of the replacement content can fit in the container. Therefore, this parameter may leave a blank space in the container.

Cover: the Chinese definition of "overlay". Maintain the original size ratio. Make sure that the size of the replacement content must be larger than the container size, and that at least one of the width and height is the same as the container. Therefore, this parameter may make parts of the replacement content, such as pictures, invisible.

None: the Chinese definition of "nothing". Maintain the original size ratio. At the same time, keep the original size of the replacement content.

Scale-down: the Chinese definition of "lower". It's as if you set none or contain in turn, and you end up with the smaller one.

The above is all the contents of the article "how to achieve full-screen video display on the mobile side of HTML5". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.