video js 全屏时，遇到18:9的长屏幕时，画面被切割

最新推荐文章于 2024-03-25 10:30:58 发布
最新推荐文章于 2024-03-25 10:30:58 发布
阅读量652 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： video 文章标签： videojs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/tangkthh/article/details/113869376
博客内容讲述了在使用videojs时遇到的全屏显示问题，特别是在18:9比例屏幕下，视频画面会被切割。作者发现该问题与16:9的视频比例有关，并指出可能是老版本videojs的兼容性问题。通过将旧版videojs替换为7.11版本的video.js和video.css，问题得到了解决。这表明更新到最新版本可以改善视频播放的兼容性和显示效果。

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

video js 全屏时，遇到18:9的长屏幕时，画面被切割

设置.vjs-fluid padding-top 为0

.videoPlayExecute-dimensions.vjs-fluid {
    padding-top: 56.25%;
}

查找解决全屏视频画面被切割这个问题，的确和16:9有关系，但最终把老版本的videojs，替换成立新版的7.11的video.js和video.css就正常了，应该是老版本兼容问题。

React Native学习资源汇总
xiangzhihong8的专栏
08-01 2550
目前主流的移动跨平台技术方案大体可以分为三类，一类是使用原生内置浏览器加载HTML5的Hybrid技术方案，采用此种方案的主要有Cordova、Ionic和微信小程序；另一类是使用JavaScript语言进行开发，然后使用原生组件进行渲染，采用此方案的主要有React Native、Weex和快应用；最后一类是使用自带的渲染引擎和自带的原生组件来实现跨平台，采用此种方案的主要是Flutter。 对于其他的浏览器方案，基本可以抛弃了，现在我们讨论移动跨平台开发主要说的是React Native和Flutter
html全屏播放js,使用html5中video自定义播放器必备知识点总结以及JS全屏API介绍
weixin_33275503的博客
06-22 1004
一、video的js知识点：controls(控制器)、autoplay(自动播放)、loop(循环)==video默认的；自定义播放器中一些JS中提供的方法和属性的记录：1、play()控制视频的播放2、pause()控制视频的停止3、currentTime控制视频的当前时间4、muted控制视频是否静音(赋值true or false)5、volume控制音量的大小(赋值0-1)6、durat...
JS判断视频Video的播放、暂停、结束完成及获取长度事件监听处理
A-Select °
10-14 1403
在日常应用场景中，可能会遇到这么一个情况，需要判断用户是否完整的观看完了一部视频，在这个场景中，和视频相关的事件大体涉及到几个部分，获取视频长度，视频开始播放，暂停播放和播放结束，下面来看下如何通过JavaScript来监听获取视频的这几种状态。 （1）html页面视频标签大体如下 <video id="video" controls="controls"> <source type="video/mp4" src="mi.mp4"> </video> （2）视
HTML5中Video.js自定义播放器必备知识点总结以及JS全屏API介绍
杨春建的博客
08-28 1万+
原文地址：http://blog.sina.com.cn/s/blog_a5c3565f0102xg0o.html 一、video的js知识点： controls(控制器)、autoplay(自动播放)、loop(循环)==video默认的； 自定义播放器中一些JS中提供的方法和属性的记录： 1、play()控制视频的播放 2、pause()控制视频的
js 设置video宽度_video设置视频的宽高
weixin_35105950的博客
12-24 8160
一般情况下但当设置video的宽高时，发现视频宽高并没有发生变化，因此设置 source的父元素宽高，让其填充video父元素。需要给video标签添加 style=“width:100%;height:300px;object-fit: fill”，即可。object-fit属性的属性值：object-fit: fill |contain |cover|none |scale-downobjec...
【记录处理Vue项目中Video.js播放不了MP4视频Bug】
CH_Y的博客
03-07 4880
在Vue项目中使用Video.js播放MP4视频。视频采集上来存在数据库，前端使用Video.js对视频进行播放。并发现前一时间段采集到的MP4视频可以播放，最近的采集的视频不能播放。记录处理Video.js不能播放MP4的bug。
动态设置video的宽高的方法，js设置和CSS设置
涂涂
11-27 2万+
一、csss设置 html: class="wrap"> controls="controls" class="videoBox" #iframeurl> src="3a1be272f8b.mp4" type="video/mp4" /> css: .wrap{ width:100%; position:relative;
jsmpeg 全屏_安卓微信视频播放全屏问题处理+利用ffmpeg转ts视频，通过jsmpeg.js播放...
weixin_30152861的博客
02-01 988
或者这篇文章安卓全屏问题视频全屏的H5专题十分收到业界喜欢, 虽然iOS下全屏自动播放并没有太大问题, 然而在安卓手机上，video组件全屏的时候会在顶层，好像”漂浮”在整个浏览器上面, 体验起来非常差. 除此之外, 即便采用JS给video设定为容器的宽高这方案, 也会出现难看的播放器控件,这时候不得不人为给视频底部加空白,在通过JS计算适合的高度以挡掉丑陋的播放器控件, 实在苦恼.JSMpeg...
视频播放器构建指南：实现DASH和m3u8视频播放
根据提供的信息，我们可以生成一个详细的IT知识点文档，内容涉及视频播放器构建、DASH与m3u8视频格式、以及video.js和dash.js这两个JavaScript库的应用。 ### 视频播放器构建 构建一个视频播放器是一个多方面的...
6种SVG遮罩层动画效果展示HTML5全屏菜单过渡
“用户点击汉堡包按钮间隙全屏菜单显示时，页面的切换采用SVG图形变形的方式进行过渡动画”这一描述，涉及到的是交互式动画触发。汉堡包按钮（通常为三条水平线组成的小图标）常用于触发移动设备上的菜单栏，用户...
javaScript入门基础知识点
m0_63262511的博客
12-21 1284
声明了变量，但是没有赋值2.2.1、特殊情况：0：如果前面的数字是由0x开头的转换为16进制，由0开头转换为8进制，正常数字转为10进制，非数字转为NaN1：如果为1，则不管前面是不是数字都转换为NaN​​​// 12​// 12​// NaN​// NaN​//NaN​//NaN​//NaN​//NaN​//NaN//0//0为真时// 3// 10为假时// 0// 0。
video.js设置播放视频自适应
五颜六色的白
04-24 5245
https://www.5yun.org/15011.html
html5 vedio 抓取,HTML5 js控制vedio视频和分段播放
weixin_36477469的博客
05-31 560
HTML5 vedio常用的js操作1、选择本地资源播放视频html:js:var myVid=document.getElementById("video1");function setMediaFile() {var file = document.getElementById('file').files[0];if(!file){alert("Please upload file.");re...
HTML5中js控制video视频和分段播放
杨春建的博客
10-20 2万+
原文地址：http://blog.youkuaiyun.com/tuposky/article/details/41488403 HTML5 vedio常用的js操作 1、选择本地资源播放视频 html: [html] view plain copy input type="file" id="file" onchange="setMe
video.js分段自动加载视频【html5视频播放器】
weixin_34015860的博客
01-15 2298
突发奇想的需求，要在官网上放一个一个半小时的视频教程…… 然而，加载成了问题，页面是cshtml的.net混合网站，不知道哪儿的限制，导致视频加不出来。 没有办法，只能前端想办法了。 于是将视频切割成4个 依次加载自动播放。效果还可以。 代码： 引入：<link rel="stylesheet" href="//cdn.bootcss.com/video.js/6.0.0-RC....
JS控制视频的播放
angnai5032的博客
01-12 514
在用js定时器控制视频时， html部分： <video id="video_1"> <source id="source_1" src="video.mp4"/> </video> js部分： //定义一个定时器 var time = null, //定义一个变量，通过id找到video标签 video_cha...
video.js自定义预览组件-旋转、下载、画中画、放大缩小功能
最新发布
weixin_42418774的博客
03-25 2251
提醒自己：这是有段时间之前的代码逻辑了，或许明天的你就有不一样的想法呢！后面如果接触到新需求有优化会持续更新哒。
JS自定义多媒体Video控制条（控制视频播放、进度、全屏案例）
热门推荐
weixin_41105030的博客
01-31 3万+
案例参考 先来看一下一些视屏控件 需求 点击按钮实现视频的播放和暂停 按钮切换全屏和退出全屏功能 进度条和时间 前期准备 HTML DOM Video 对象文档 图标字体库下载和文档 案例目录 HTML代码 我们自定义实现控制条，所以video不要使用controls属性 从其他网站视频播放，一般都是要自己实现控制条来达到我们想要的效果，使用video提供的控制条相关属性就很难修改，也...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值