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

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

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 2334
目前主流的移动跨平台技术方案大体可以分为三类，一类是使用原生内置浏览器加载HTML5的Hybrid技术方案，采用此种方案的主要有Cordova、Ionic和微信小程序；另一类是使用JavaScript语言进行开发，然后使用原生组件进行渲染，采用此方案的主要有React Native、Weex和快应用；最后一类是使用自带的渲染引擎和自带的原生组件来实现跨平台，采用此种方案的主要是Flutter。 对于其他的浏览器方案，基本可以抛弃了，现在我们讨论移动跨平台开发主要说的是React Native和Flutter
2021前端面经-看这篇就够了（笔者靠这个拿到阿里和字节的offer）
爱前端也爱恋爱
04-30 1892
面试题梳理 梳理前端常见面试题及答案。 一、web 前端性能优化 性能评级工具（PageSpeed 或 YSlow） css CSS优化、提高性能的方法有哪些 多个css合并，尽量减少HTTP请求 将css文件放在页面最上面 移除空的css规则 避免使用CSS表达式 选择器优化嵌套，尽量避免层级过深 充分利用css继承属性，减少代码量 抽象提取公共样式，减少代码量 属性值为0时，不加单位 属性值为小
JS判断视频Video的播放、暂停、结束完成及获取长度事件监听处理
A-Select °
10-14 1264
在日常应用场景中，可能会遇到这么一个情况，需要判断用户是否完整的观看完了一部视频，在这个场景中，和视频相关的事件大体涉及到几个部分，获取视频长度，视频开始播放，暂停播放和播放结束，下面来看下如何通过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 7816
一般情况下但当设置video的宽高时，发现视频宽高并没有发生变化，因此设置 source的父元素宽高，让其填充video父元素。需要给video标签添加 style=“width:100%;height:300px;object-fit: fill”，即可。object-fit属性的属性值：object-fit: fill |contain |cover|none |scale-downobjec...
video.js设置播放视频自适应
五颜六色的白
04-24 5140
https://www.5yun.org/15011.html
html全屏播放js,使用html5中video自定义播放器必备知识点总结以及JS全屏API介绍
weixin_33275503的博客
06-22 961
一、video的js知识点：controls(控制器)、autoplay(自动播放)、loop(循环)==video默认的；自定义播放器中一些JS中提供的方法和属性的记录：1、play()控制视频的播放2、pause()控制视频的停止3、currentTime控制视频的当前时间4、muted控制视频是否静音(赋值true or false)5、volume控制音量的大小(赋值0-1)6、durat...
jsmpeg 全屏_安卓微信视频播放全屏问题处理+利用ffmpeg转ts视频，通过jsmpeg.js播放...
weixin_30152861的博客
02-01 921
或者这篇文章安卓全屏问题视频全屏的H5专题十分收到业界喜欢, 虽然iOS下全屏自动播放并没有太大问题, 然而在安卓手机上，video组件全屏的时候会在顶层，好像”漂浮”在整个浏览器上面, 体验起来非常差. 除此之外, 即便采用JS给video设定为容器的宽高这方案, 也会出现难看的播放器控件,这时候不得不人为给视频底部加空白,在通过JS计算适合的高度以挡掉丑陋的播放器控件, 实在苦恼.JSMpeg...
javaScript入门基础知识点
m0_63262511的博客
12-21 1173
声明了变量，但是没有赋值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。
前端2020面试题195道
weijieyuhyt的博客
01-13 1万+
HTML5面试题 一、 Doctype的作用? 严格模式和混杂模式的区分，以及如何触发这2种模式? <!DOCTYPE> 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。 DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。 严格模式就是浏览器根据web标准去解析页面，是一种要求严格的DTD，不允许使用任何表现层的语法， 混杂模式...
html5 vedio 抓取,HTML5 js控制vedio视频和分段播放
weixin_36477469的博客
05-31 520
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.csdn.net/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 2172
突发奇想的需求，要在官网上放一个一个半小时的视频教程…… 然而，加载成了问题，页面是cshtml的.net混合网站，不知道哪儿的限制，导致视频加不出来。 没有办法，只能前端想办法了。 于是将视频切割成4个 依次加载自动播放。效果还可以。 代码： 引入：<link rel="stylesheet" href="//cdn.bootcss.com/video.js/6.0.0-RC....
JS控制视频的播放
angnai5032的博客
01-12 474
在用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 1497
提醒自己：这是有段时间之前的代码逻辑了，或许明天的你就有不一样的想法呢！后面如果接触到新需求有优化会持续更新哒。
JS自定义多媒体Video控制条（控制视频播放、进度、全屏案例）
热门推荐
weixin_41105030的博客
01-31 3万+
案例参考 先来看一下一些视屏控件 需求 点击按钮实现视频的播放和暂停 按钮切换全屏和退出全屏功能 进度条和时间 前期准备 HTML DOM Video 对象文档 图标字体库下载和文档 案例目录 HTML代码 我们自定义实现控制条，所以video不要使用controls属性 从其他网站视频播放，一般都是要自己实现控制条来达到我们想要的效果，使用video提供的控制条相关属性就很难修改，也...
js 控制浏览器 实现全屏 和 退出全屏功能
拿回忆下酒
03-08 1650
在工作中我们偶尔遇到不需要浏览器，需要将整个项目的情况，虽然有一些，但我们更希望项目中有类似的功能，可以让用户任意切换。
动态设置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;
C#实现视频时长获取：LibVLCSharp方法解析
资源摘要信息:"C#通过LibVLCSharp得到视频文件的播放时长信息" 在进行多媒体应用开发时，获取视频文件的基本信息是一项常见的需求。传统上，某些系统可能不支持使用shell32.dll这类系统级组件来获取媒体信息，因此...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值