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 上下文 ...
随机推荐
- 03_15_interface
03_15_interface 1. 接口 接口是抽象方法和常量值的定义的集合. 从本质上讲,接口是一种特殊的抽象类,这种抽象类中只包含常量和方法的定义,而没有变量和方法的实现. 2. 接口特性 接口 ...
- GVIM——简直美如画,有没有!
"========================================== " Author: wklken " Version: 9.1 " Em ...
- centos下 将(jgp、png)图片转换成webp格式
由于项目要求需要将jpg.png类型的图片 转换成webp格式,最开始使用了php gd类库里 imagewebp 方法实现,结果发现转换成的webp格式文件会偶尔出现空白内容的情况.像创建了一个透 ...
- 一次完整的HTTP请求需要的7个步骤
HTTP通信机制是在一次完整的HTTP通信过程中,Web浏览器与Web服务器之间将完成下列7个步骤: 1:建立TCP连接 在HTTP工作开始之前,Web浏览器首先要通过网络与Web服务器建立连接,该连 ...
- (转)Windows 支持 DirectX 和 OpenGL,为什么大多数 PC 游戏还是 DirectX 开发?
事实上在早年OpenGL即使在游戏领域也是对DirectX压倒性的优势.John Carmack曾嘲讽DirectX是"horribly broken" 的API.直到Direct ...
- JZOJ 5838. 旅游路线 最大子段和
5838. 旅游路线 Time Limits: 1000 ms Memory Limits: 131072 KB Detailed Limits Goto ProblemSet Descrip ...
- Elizabeth Taylor【伊丽莎白·泰勒】
Elizabeth Taylor People fell in love with Elizabeth Taylor in 1944, when she acted in the movie Nati ...
- poj 3258 跳房子问题 最大化最小值
题意:奶牛跳房子,从n块石头中移除M块,使得间距最小的最大值?思路:“转换” 从N块中选择n-m块使得两两之间的间距尽可能大 c(d) 是间距最大的满足条件,即第一块 放在 xi的位置 下一块就要放在 ...
- 【java】实体类中 Set<对象> 按照对象的某个字段对set排序
Java利用hibernate进行一对多查询时,把另一张表作为一个属性存进这张表的字段中,返回的类型是set类型,要对返回的set类型进行排序 user表 package onlyfun.caterp ...
- Java面向对象---面向对象
程序的发展历程:面向过程-->面向对象 面向过程:不去想怎么做,边做边看 面向对象:先想好怎么做,然后再做 修饰符(访问权限) 访问级别 访问控制修饰符 同类 同包 子类 不同的包 公开 pub ...