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 上下文 ...
随机推荐
- 问题007:JDK版本与JRE版本不同导致java.exe执行类文件错误 java.lang.UnsupportedClassVersionError错误
版本不同的原因是,Windows 系统之前安装了JRE 是别的版本的 解决方法,将其卸载,卸载后可以正常使用,不再错误提示.
- mount: no medium found on /dev/sr0 找不到介质
在VMware虚拟机中配置yum源时,执行 mount /dev/cdrom /mnt/cdrom 出现 mount: no medium found on /dev/sr0. 首先在/mnt 目录下 ...
- 零基础快速掌握Python系统管理视频课程【猎豹网校】
点击了解更多Python课程>>> 零基础快速掌握Python系统管理视频课程[猎豹网校] 课程目录 01.第01章 Python简介.mp4 02.第02章 IPython基础.m ...
- 常用的几个JQuery代码片段
1. 导航菜单背景切换效果 在项目的前端页面里,相对于其它的导航菜单,激活的导航菜单需要设置不同的背景.这种效果实现的方式有很多种,下面是使用JQuery实现的一种方式: //注意:代码需要修饰完善 ...
- JS进阶篇--JS数组reduce()方法详解及高级技巧
基本概念 reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值. reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被 ...
- ZOJ 3231 Apple Transportation 树DP
一.前言 红书上面推荐的题目,在138页,提到了关键部分的题解,但是实际上他没提到的还有若干不太好实现的地方.尤其是在这道题是大家都拿网络流玩弄的大背景下,这个代码打不出来就相当的揪心了..最后在牛客 ...
- 关于RelativeLayout设置垂直居中对齐不起作用的问题
直接上代码 1.原有代码:(红色字体部分不起作用,无法让RelativeLayout中的textview居中) <RelativeLayout Android:id="@+id/aut ...
- Redis实现之字符串
简单动态字符串 Redis中的字符串并不是传统的C语言字符串(即字符数组,以下简称C字符串),而是自己构建了一种简单动态字符串(simple dynamic string,SDS),并将SDS作为Re ...
- 关于前后端日期处理 开发注意事项 jquery.tmpl()函数的使用
1当后端将日期传到前段的时候 我们通常会需要将日期转为制定格式 除了平常我们使用的前段插件将日期转好 spring @datetimeFormat 注解 这些形式外 我们还可以在实体里通过get方法进 ...
- mongoTemplate学习笔记
mongoTemplate的andExpression表达式 Aggregation<Post> agg = Aggregation.newAggregation( Record.clas ...