video视频去除上下黑边

最新推荐文章于 2024-07-05 10:59:59 发布

郭芊淳

最新推荐文章于 2024-07-05 10:59:59 发布

阅读量3.1k

点赞数 1

分类专栏： vue H5移动端文章标签： vue html5

本文链接：https://blog.youkuaiyun.com/weixin_43464372/article/details/125051562

版权

vue 同时被 2 个专栏收录

7 篇文章

订阅专栏

H5移动端

3 篇文章

订阅专栏

该博客介绍如何在HTML视频元素中使用`objectFit=“cover”`属性，以确保视频封面在不同设备和屏幕尺寸下都能完美填充整个视频容器，提供一致的视觉体验。同时提到了与其他视频属性如`@fullscreenchange`、`x5-video-player-type`等的结合使用，以及在移动端的播放控制和事件监听。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在video标签上添加objectFit=“cover” 属性

  <video class="video"
		objectFit="cover"
		@fullscreenchange="playerFullScreen"
	    			 x5-video-player-type="h5"
	    			 x5-video-player-fullscreen="true"
	    			 x5-playsinline
	    			 webkit-playsinline playsinline
	    			 preload="auto"
					 muted="muted"
	    			 :poster="poster"
	    			 :playOrPause="playOrPause"
	    			 x-webkit-airplay="allow"
	    			 @click="pauseVideo"
	    			 @ended="onPlayerEnded($event)"
					 controls="controls">
					<source :src="url" type="video/mp4"></source>
					 
	    </video>