<video>全屏状态下视频没有铺满屏幕

最新推荐文章于 2024-06-09 21:59:09 发布

weixin_30627341

最新推荐文章于 2024-06-09 21:59:09 发布

阅读量1.6k

点赞数 1

文章标签： java 前端 javascript ViewUI

原文链接：http://www.cnblogs.com/65Seeker/p/11347708.html

版权

在使用videojs初始定宽高或者给<video>写定宽高后，在全屏状态下会导致视频在左上角展开，保持着之前写定的宽高，而没有实现真正全屏。

如果通过JS在点击全屏按钮后改变video的宽高，需要查阅videojs文档，实现方式比较复杂（原因还是太菜）。

其实通过CSS实现全屏是最方便的，只需要在video外部套一个<div class="videoWrap">，

然后把原本需要的宽高写在videoWrap上，对于<video>我们只要给一个{width:100%}，不需要写定高度。

这样就不会出现因为<video>写定宽高而导致全屏不能真正铺满屏幕。

转载于:https://www.cnblogs.com/65Seeker/p/11347708.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30627341

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

解决小程序视频无法占满整个video的问题

weixin_42037672的博客

08-18

2867

很简单只要在video标签里面加个objectFit='cover' 就可以了

当视频文件video比列不符合盒子大小，需要充满盒子时解决方案。

CHENC0518的博客

10-27

3478

当视频文件video比列不符合盒子大小，需要充满盒子时解决方案。

参与评论您还未登录，请先登录后发表或查看评论

HTML,img,video无法铺满屏幕解决方法，同视频做网页背景无法全屏的解决方法

最新发布

FENGZXCjjjjj的博客

06-09

1267

object-fit 一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。video标签默认不是铺满的，即使手动设置宽高100%也不会生效，所以当需要video铺满div时，需要加上一个css样式。object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。关键是这个“object-fit: fill”，这样就可以解决了！fill: 默认，不保证保持原有的比例，内容拉伸填充整个内容容器。

Flutter：基于video_player实现视频相关手势控制、全屏播放

m0_66264673的博客

02-03

1071

4.1. 定义属性这里定义了三种读取视频的方式network、asset、file，分别对应网络视频、工程视频、本地视频文件： class VideoPlayerUI extends StatefulWidget { VideoPlayerUI.network({ Key key, @required String url, // 当前需要播放的地址 this.width: double.infinity, // 播放器尺寸（大于等于视频播放区域） this.height: double.infinity

Android全屏播放视频~包括刘海屏、隐藏时间状态栏

wuqingsen1的博客

07-26

2023

需求是全屏播放视频，刘海屏上面也要播放。下面是我实现的方式：首先创建 CustomVideoView 工具类： import android.annotation.TargetApi; import android.content.Context; import android.util.AttributeSet; import android.widget.VideoView; /...

wpf MediaElement 全屏播放视频

08-21

<MediaElement x:Name="mediaPlayer" Source="path_to_your_video.mp4" /> ``` MediaElement具有播放、暂停、停止等基本操作，这些可以通过绑定到其内部命令或直接调用相应的API来实现。例如： ```csharp ...

android使用videoview 全屏方法,android-如何使VideoView全屏显示

weixin_39709194的博客

05-27

875

我想在我的活动中使用VideoView播放视频,并在单击按钮时使其成为全屏和横向模式(带有隐藏的虚拟按钮和状态栏).但是它无法隐藏虚拟按钮,并且底部有一条白线.This my activity code:public class VideoActivity extends Activity {private VideoView mVideoView;private String mUrl;priv...

jQuery商城网站全屏图片切换代码.zip

11-21

通过设置适当的宽度、高度、位置属性，可以实现图片铺满整个屏幕的效果。使用`position`（如`absolute`或`fixed`）、`z-index`来管理层叠顺序，确保图片正确显示。同时，CSS3的过渡（`transition`）和动画（`@...

设置vue-video-player视频铺满不留黑边

卫可冬的博客

11-19

1917

::v-deep .video-js .vjs-tech { object-fit: fill; } ::v-deep .vjs-poster { background-size: cover; }

微信H5视频全屏/不全屏/自动播放等相关问题解决

阿酷tony

09-23

3319

转载内容。做过微信H5视频的大胸弟们肯定受到过成吨的伤害甚至多到怀疑人生的地步，自动全屏，不能全屏，不能自动播放，Android，IOS，巴拉巴拉……多到令人发指！今天整理了一下相关的解决办法，以上并不是全部解决了，但是起码能打个60分…… 第一步:设置 x5videoplayertype 启用Ｈ5同层播放器通过video属性“x5videoplayertype”声明启用同层H5播放器 x5videoplayertype支持的值类型：h5 <video src="h.

H5 video安卓默认点击不能全屏播放解决办法

weixin_34050389的博客

06-26

3007

调用方法： autoFullScrenn(obj) 还有一篇：使用MediaElement.js构建个性的HTML5音频和视频播放器 var fullscreen = function(elem) { var prefix = 'webkit'; if ( elem[prefix + 'EnterFullScreen'] ) { ...

移动端关于video标签视频全屏播放的兼容适配问题

linxner的博客

02-15

9158

之前做一个项目，需要在两个大屏之间加一屏的视频，效果类似三屏竖方向的翻页，只是中间是一个视频，本以为如此简单三两下搞定。没想到。。。原因在于，IOS与Android对video标签的支持不同，在IOS运行的好好的，放到Android中就各种问题。一般video标签长这样： <video id="start_video" class="start_v...

HTML5 video自动播放不完全解决方案

webFrontEndDev的博客

04-08

4882

<video> 设置了aotoplay="autoplay" 后偶发不自动播放，加上一个 muted 属性就可以解决这个问题。 <video muted src="../video.mp4" width="100%" autoplay="autoplay"> 但这样会导致静音。 ...

vue接入海康4G版摄像头通过萤石云平台推送视频流教程

renkai721的专栏

01-06

4044

vue-video-player接入海康视频,videojs-contrib-hls,vue播放视频

h5使用video标签解决自动全屏问题

qq_24978681的博客

10-19

9937

h5使用video标签解决自动全屏问题

videojs 全屏后视频没有铺满屏幕怎么解决

06-09

在使用 Video.js 播放视频时，可能会出现全屏后视频没有铺满屏幕的情况。这通常是由于视频的宽高比...在全屏模式下，将视频的 `object-fit` 属性设置为 `fill`，可以让视频铺满屏幕。希望这些方法能够解决你的问题。