html5视频video不全屏播放

最近项目用到了html5 的video 视频播放。但是视频在我们的div 中居然是左右占满，上下居中的。
这效果如图：

丑不拉几的。效果也不好。满心的纠结啊。
怎么办了。我们通过css 样式进行解决

     <div class="spoy" ><!-- 合作伙伴1y --><video class ="video"  loop="loop" autoplay="autoplay" controls><source src="mov_bbb.mp4" type="video/mp4"><source src="mov_bbb.ogg" type="video/ogg">Your browser does not support HTML5 video.</video></div>

 .video{width: 100% ;height: 100%; object-fit: fill;}

上面的loop的属性为自动播放video视频

在这里我们用到了object-fit （image,video）自适应

替换元素其内容不受CSS视觉格式化模型（中文释义参见这里）控制的元素，比如image, 嵌入的文档(iframe之类)或者applet。比如，img元素的内容通常会被其src属性指定的图像替换掉。替换元素通常有其固有的尺寸：一个固有的宽度，一个固有的高度和一个固有的比率。比如一幅位图有固有用绝对单位指定的宽度和高度，从而也有固有的宽高比率。另一方面，其他文档也可能没有固有的尺寸，比如一个空白的html文档。CSS渲染模型不考虑替换元素内容的渲染。这些替换元素的展现独立于CSS。object, video, textarea, input也是替换元素，audio和canvas在某些特定情形下为替换元素。使用CSS的content属性插入的对象是匿名替换元素。
为何需要object-position/object-fit?适配响应式布局

.fill { object-fit: fill; }
.contain { object-fit: contain; }
.cover { object-fit: cover; }
.none { object-fit: none; }
.scale-down { object-fit: scale-down; }

fill: 中文释义“填充”。默认值。替换内容拉伸填满整个content box, 不保证保持原有的比例。
contain: 中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此，此参数可能会在容器内留下空白。
cover: 中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让替换内容（如图片）部分区域不可见。
none: 中文释义“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。
scale-down: 中文释义“降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。

启发的代码如下：

h2 {font-family: Courier New, monospace;font-size: 1em;margin: 1em 0 0.3em;
}div {width:302px;height:202px;border:1px solid #000;
}.narrow {width: 100px;height: 150px;margin-top: 10px;
}.fill {object-fit:fill;
}img{width:100%;height:100%;
}.contain {object-fit: contain;
}.cover {object-fit: cover;
}.none {object-fit: none;
}.scale-down {object-fit: scale-down;
}

<html>
<head><link rel="stylesheet" type="text/css" href="object-fit.css">
</head>
<body>
<div><img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1526212574&di=d7da79bec27769a727d6dbc7c4668d4d&src=http://img1.cache.netease.com/catchpic/C/C7/C7F6DDD628AF0834C677072B06BBE2C8.jpg" alt="MDN Logo" class="contain"/>
</div>
</body>
</html>

html5视频video不全屏播放相关推荐

video在微信和QQ浏览器中不全屏播放解决
最近公司做一个视频活动的HTML5页面,页面并不复杂,但是要求视频播放的时候不全屏.在网上看到好论坛类似的基本问题,以前有申请白名单的,在白名单的视频链接或者腾讯旗下的视频链接是原生播放,否则安卓会被 ...
HTML5 视频 Video
文章目录 HTML5 视频 Video Web站点上的视频浏览器支持 HTML5 (视频)- 如何工作视频格式与浏览器的支持视频格式 HTML5 \<video> - 使用 DOM ...
html5 video 在线视频,HTML5 视频(Video)
HTML5 视频(Video) 为了更好的展示内容,很多站点都会使用到视频, HTML5 提供了展示视频的标准. 检测您的浏览器是否支持 HTML5 视频: 检测互联网上的视频一直到现在,还没有一 ...
解决html5中video标签无法播放mp4问题的办法
解决html5中video标签无法播放mp4问题的办法参考文章: (1)解决html5中video标签无法播放mp4问题的办法 (2)https://www.cnblogs.com/it-tsz/p ...
iOS APP 中H5视频默认全屏播放
问题描述:在Android中,视频可以正常在H5页面局部播放,iOS中则自动切换至全屏模式,需要禁止视频自动全屏播放. 解决方法: H5端: iOS10以上H5视频不自动全屏播放识别 playsinl ...
解决UE编辑器中iframe内添加视频无法全屏播放的问题
我在网上找到,要使iframe标签中视频可以全屏播放需要在标签中增加allowfullscreen="true" allowtransparency="true" ...
Chromium为视频标签 video 全屏播放的过程分析
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 在Chr ...
Chromium为视频标签video全屏播放的过程分析
在Chromium中,<video>标签有全屏和非全屏两种播放模式.在非全屏模式下,<video>标签播放的视频嵌入在网页中显示,也就是视频画面作为网页的一部分显示.在全屏模式 ...
JS,VUE检测Video视频是否全屏播放
检测video视频是否正在全屏播放,如果正在全屏播放将会返回 var isRouterAlive = ref(true) function reload() {//刷新页面isRouterAlive. ...

html5视频video不全屏播放

html5视频video不全屏播放相关推荐

最新文章

热门文章