HTML VIDEO视频标签高度自适

这篇具有很好参考价值的文章主要介绍了HTML VIDEO视频标签高度自适。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

视频是可以按比例缩放显示的,现在大部分视频的宽度与高度比例是16:9,我们可以通过CSS将视频按照这个比例进行缩放显示。

通过百分比设置宽度,根据宽高比16:9,计算出高度的百分比数值,设置内边距为高度的数值,最后用绝对定位把视频百分百填充到设置的区域里面文章来源地址https://www.toymoban.com/news/detail-541292.html

<style>
.video-box {
    padding-bottom: 56.25%;
    width: 100%;
    position: relative;
}

.video-box video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
}
</style>

<div class="video-box">
    <video src="video.mp4"></video>
</div>

到了这里,关于HTML VIDEO视频标签高度自适的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【HTML5】HTML5 多媒体标签 ② ( 视频标签 <video> | 视频标签常见属性 | autoplay 属性 | controls 属性 | poster 属性 | 设置多个格式视频 )

    HTML 5 的 video 视频标签 , 支持 ogg / mpeg 4 ( mp4 ) / webM 三种格式的音频 , 不同的浏览器支持的音频格式不同 ; IE 浏览器 : 9.0 以上版本支持 mp4 格式 ; Firefox 浏览器 : 3.5 以上版本支持 ogg 格式 ; 4.0 以上版本支持 webM 格式 ; Opera 浏览器 : 10.5 以上版本支持 ogg 格式 ; 10.6 以上版本支持

    2024年02月09日
    浏览(70)
  • 实现html页面插入视频的自动播放、视频播放结束后的事件触发(video标签)

    要实现自动播放需要同时使用autoplay和muted属性,简单示例代码如下: html代码: css代码: 要实现视频播放结束后的事件触发需要使用addEventListener(“ended”, function () {})进行事件监听,简单示例代码如下: html代码: css代码: js代码: (1)菜鸟网址:https://www.runoob.com/tags/t

    2024年02月05日
    浏览(48)
  • HTML5中关于解决video标签禁止右键和下载视频的办法

    近期做了一个关于在线文件管理的项目,类似网盘,基本功能包含用户、消息、项目、分享、文件提取、收藏、回收站等主要功能,领挖还有一些office、压缩包、图片、文本、音频和视频的预览功能。 音频我使用的是APlayer,视频使用的是DPlayer,为了做个兼容,视频还有htm

    2024年02月11日
    浏览(67)
  • HTML5中使用video标签

    隐藏下载: nodownload 隐藏播放速度: noplaybackrate 隐藏画中画: disablePictureInPicture=\\\"true\\\" 隐藏三个点: controlslist=\\\"nodownload noplaybackrate\\\" 隐藏音量按钮:

    2024年02月07日
    浏览(44)
  • HTML5 Video(视频)

    当前, video 元素支持三种视频格式: MP4, WebM, 和 Ogg: 浏览器 MP4 WebM Ogg Internet Explorer YES NO NO Chrome YES YES YES Firefox YES YES YES Safari YES NO NO Opera YES (从 Opera 25 起) YES YES MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件 WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件 Ogg = 带有

    2024年01月25日
    浏览(51)
  • Html代替<iframe>标签的三种方法<object>, <embed>和<video>

    某平台对 iframe 标签做了些许限制但是前端代码有bug导致提交不了代码, 最开始想着是不是能够在本地替换 js 文件从而绕过bug 简单搜索后找到了 chrome浏览器F12调式,修改替换js文件这篇博客, 简单试了下虽然能替换成功但是效果不理想, 改不了平台就只能适应平台了, 反手就改

    2024年02月15日
    浏览(64)
  • html 中video实现切换视频自动播放

    vue2实现的网页中播放视频,主要代码如下: 现在遇到的问题的,视频切换后要手动点击才能播放,是否可以实现切换视频后会自动播放不用手动点击 增加 autoplay 属性就可以了。 要实现切换视频后自动播放,您需要在 video 元素上使用 autoplay 属性。该属性会告诉浏览器在视频

    2024年01月22日
    浏览(37)
  • html+css+Jquery 实现 文本域 文字数量限制、根据输入字数自适应高度

    先看效果:初始的效果,样式多少有点问题,不重要!重要的是功能! 输入后: 根据文字长度,决定文本域长度 + 限制文字数量 1 .样式请自行调整! 2 .此处代码为了方便测试,使用的是线上的jquery地址,使用时,请更换自己的路径地址!

    2024年02月02日
    浏览(49)
  • 【NodeJS】html通过video和canvas同时播放视频

    在某些特殊情况下,会使用Canvas作为容器展示视频,但是不是简单的为了播放视频,而是使用Canvas传递鼠标、键盘事件,发生了一个事件,事件则是传递到NodeJS服务器上,而做出相应的回复。本文只是做了一个例子,通过Canvas播放视频。 1、html页面:index.html 2、javascript:scri

    2024年01月19日
    浏览(44)
  • html-video:计算视频是否完整播放 / 计算视频完播率

    一、video 播放视频  二、视频播放上报参数 序号 参数 备注 1 videoId 视频id 2 duration 视频的总时长,timeupdate事件中获取,e.mp.detail.duration 3 currentTime 当前视频播放的时间,timeupdate事件中获取,e.mp.detail.currentTime 每隔10秒调用接口上报一次,可根据需求具体确定 三、计算视频是

    2024年01月17日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包