h5 video切换到横屏全屏
将video设置为屏幕大小,覆盖其他元素,想到这种操作我也是震惊的
function() {
let startIcon = document.getElementById('start-icon');
startIcon.src = '/static/icon/icon-ctrl-stop.png';
let myVideo = document.getElementById('myVideo');
myVideo.controls = 'auto';
let w = document.documentElement.clientWidth || document.body.clientWidth;
let h = document.documentElement.clientHeight || document.body.clientHeigth;
let cha = Math.abs(h - w) / 2;
myVideo.width = h;
myVideo.height = w;
myVideo.style.zIndex = 2000;
myVideo.style.top = 0
myVideo.style.transform = 'translate(-' + cha + 'px,' + cha + 'px) rotate(90deg)';
}
精灵图点亮星星的这种操作

将图片右移一格

也是震惊的,以前都改svg图片颜色
h5 video切换到横屏全屏的更多相关文章
- h5 video 点击自动全屏
加上如下属性 https://blog.csdn.net/weixin_40974504/article/details/79639478 可阻止自动全屏播放,感谢 https://blog.csdn ...
- Android:webView加载h5网页视频,播放不了,以及横屏全屏的问题和实现自定义加载进度条的效果
1.webView加载h5网页视频,播放不了,android3.0之后要在menifest添加硬件加速的属性 android:hardwareAccelerated="true". ...
- 【极品代码】一般人我不告诉他,手机端h5播放时不自动全屏代码
已测适用于ios,某些安卓手机微信下播放视频会出现播放器控件(这个实在是无力吐槽噢,因为之前还遇到过微信播放完视频后竟然无法退出全屏出现广告的情况,只有播放完后刷新页面并且要放到框架页里才能屏蔽微信视 ...
- 如何禁止 iPhone Safari video标签视频自动全屏?
最近做一个移动端微信页面项目,在微信页面中有视频播放,但是需要禁止IOS的自动全屏播放(前提必须使用video标签).如: <video id="post" autoplay ...
- Android强制横屏+全屏的几种常用方法
全屏: 在Activity的onCreate方法中的setContentView(myview)调用之前添加下面代码 1 requestWindowFeature(Window.FEATURE_NO_ ...
- video标签的视频全屏
按钮: <div class="fullScreen" @click="fullScreen"><i class="el-icon- ...
- H5中用js让页面全屏
概述 意外的发现一个网页有一个按钮能使网页全屏,查了下代码发现是H5的全屏api,于是就查了下资料,记录下来供以后开发时参考,相信对其他人也有用. 参考资料: 利用js如何做到让页面全屏和不全屏功能 ...
- Qt实用技巧:界面切换使用Dialog全屏切换
需求 在做应用程序的过程中,需要使用界面切换,界面切换到下一个界面使用new一个界面并显示,如系统设置,相关信息展示等等. (注意:本技巧适用的条件是,主界面不需要相关的信号与槽做消息循环,因为主界面 ...
- uni-app设置 video开始播放进入全屏状态
有一video标签 <video id="myVideo" :src="videoUrl"></video> 获取 video 上下文 ...
随机推荐
- ElasticSearch High Level REST API【4】多搜索
1.Multi-Search多搜索请求 Multi-Search可同时添加多个search搜索请求,并行地在一个http请求中执行多个搜索请求,相较多次单请求查询可提升查询效率.ES客户掉通过mget ...
- 详解----memcache服务端与客户端
Memcache是danga.com的一个项目,用这个缓存项目来构建自己大负载的网站,来分担数据库的压力. 它可以应对任意多个连接,使用非阻塞的网络IO.由于它的工作机制是在内存中开辟一块空间,然后建 ...
- Microsoft .Net framework 4.0出现 安装不成功,错误代码0x80240037 的解决方法
,安装Microsoft .Net framework 时出现 解决方法:用QQ管家 之后 以上就解决了
- Java - BigDecimal四舍五入注意事项
如上图,精度后只有一位时,是五舍六入. 如上图,精度后只有第一位不为0时,也是五舍六入. 如上图,精度后至少有两位不为0时,才是四舍五入.
- 问题:Could not install packages due to an EnvironmentError: [Errno 13] Permission denied:
1.安装django 执行pip3 install --user django 2.解决方法:加--user 执行pip3 install --user django
- 项目实战2.3-Nginx的“远方表哥”—Tengine
本文收录在Linux运维企业架构实战系列 今天想起当初研究nginx反向代理负载均衡时,nginx自身的upstream后端配置用着非常不舒服: 当时使用的淘宝基于nginx二次开发的Tengine, ...
- 致敬wusir懒孩子自有懒孩子的生存之道之二
https://www.cnblogs.com/wupeiqi/ https://www.cnblogs.com/Eva-J/ https://www.cnblogs.com/wupeiqi/p/90 ...
- 线程之sleep(),wait(),yield(),join()等等的方法的区别
操作线程的常用方法大体上有sleep(),join(),yield()(让位),wait(),notify(),notifyAll(),关键字synchronized等等. 由于这些方法功能有些 ...
- 笔记-python-lib-内置函数
笔记-python-lib-内置函数 注:文档来源为Python3.6.4官方文档 1. built-in functions abs(x) 返回绝对值 all(iterable) re ...
- luogu3810 【模板】三维偏序(陌上花开)
ref1 ref2 ref3 ref4 #include <algorithm> #include <iostream> #include <cstdio> usi ...