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 上下文 ...
随机推荐
- 一次线上CPU高的问题排查实践
一次线上CPU高的问题排查实践 前言 近期某一天上班一开电脑,就收到了运维警报,有两台服务CPU负载很高,同时收到一线同事反馈 系统访问速度非常慢,几乎无响应. 一个美好的早晨,最怕什么就来什么.只好 ...
- vue-cli npm run build 打包问题 webpack@3.6
1, vue-router 路由 有两个模式 (mode) hash (默认模式) 使用URL来模拟一个完整的URL 但是没个URL都会带上 "#/'' 支持所有浏览器 这个模式使用 red ...
- 64位系统InlineHook
APIHook64Class.h #ifndef APIHOOK64CLASS_H_ #define APIHOOK64CLASS_H_ #include <Windows.h> clas ...
- js数组中去重对象
var allCourses = new Array();var coursesId = new Array();function findCourses() { Courses.data().eac ...
- A1025 PAT Ranking (25)(25 分)
A1025 PAT Ranking (25)(25 分) Programming Ability Test (PAT) is organized by the College of Computer ...
- poj 2139 奶牛拍电影问题 floyd算法
题意:奶牛拍一系列电影,n头牛拍m部电影,同一部电影种的搭档们距离为1,求最小距离? 思路:Floyd 图 最短路径 存图: 初始化图 for (int i = 0; i <= n; i++) ...
- greenplum-时间处理
工作中遇到,需要改变两周以前的数据状态,于是查了下资料,原来数据库直接就可以处理,所以分享给大家! 在PostgreSQL中可以直接对时间进行加减运算:. SELECT now()::timestam ...
- Java文件 ---流
分类 根据数据走向,分为输入流.输出流 根据处理的数据类型,分为字节流.字符流 字节流 可以处理所有类型的数据,如MP3.图片.文字.视频等.在读取时,读到一个字节就返回一个字节. 在Java中对应的 ...
- day19 Dgango进阶 路由系统及 ORM 详解
完成一个完整的网页服务,需要有以下: 再次回顾一下Django 的完成开发流程: 一些值的获取: 对于性别,为互斥属性: 爱好则为多选: 需要使用新的方法 getlist 来获取多个爱好: 单选下拉框 ...
- maven学习(十二)——maven聚合与继承实战
聚合与继承实战 创建四个Maven项目,如下图所示: