The html5 video tag realizes full-screen display of video playback on mobile phones

<video preload='auto' id='my-video'  
src='cuplayer.mp4'  webkit-playsinline='true' 
playsinline='true'x-webkit-airplay='true' 
x5-video-player-type='h5' 
x5-video-player-fullscreen='true'
x5-video-ignore-metadata='true'  
width='100%' height='100%'>
<p> 不支持video</p> 
</video>
.fill { object-fit: fill; }
.contain { object-fit: contain; }
.cover { object-fit: cover; }
.none { object-fit: none; }
.scale-down { object-fit: scale-down; }

 

fill: Chinese interpretation of "filling". Defaults. The replacement content is stretched to fill the entire content box, and the original ratio is not guaranteed.
contain: Chinese paraphrase "contains". Keep the original size ratio. Ensure that the replacement content size must fit inside the container. Therefore, this parameter may leave blanks inside the container.
cover: Chinese interpretation of "cover". Keep the original size ratio. Ensure that the replacement content size must be larger than the container size, and at least one of the width and height is consistent with the container. Therefore, this parameter may make parts of the replaced content (such as images) invisible.
none: Chinese interpretation of "nothing". Keep the original size ratio. While maintaining the original size of the replaced content.
scale-down: Chinese interpretation of "lower". It is as if none or contain are set in turn, and the one with the smaller size is finally presented


 

My Popular Article Recommendations

My video article recommendation

Guess you like

Origin blog.csdn.net/suny2020/article/details/120021983#comments_24339903