将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切换到横屏全屏的更多相关文章

  1. h5 video 点击自动全屏

    加上如下属性 https://blog.csdn.net/weixin_40974504/article/details/79639478 可阻止自动全屏播放,感谢 https://blog.csdn ...

  2. Android:webView加载h5网页视频,播放不了,以及横屏全屏的问题和实现自定义加载进度条的效果

    1.webView加载h5网页视频,播放不了,android3.0之后要在menifest添加硬件加速的属性 android:hardwareAccelerated="true". ...

  3. 【极品代码】一般人我不告诉他,手机端h5播放时不自动全屏代码

    已测适用于ios,某些安卓手机微信下播放视频会出现播放器控件(这个实在是无力吐槽噢,因为之前还遇到过微信播放完视频后竟然无法退出全屏出现广告的情况,只有播放完后刷新页面并且要放到框架页里才能屏蔽微信视 ...

  4. 如何禁止 iPhone Safari video标签视频自动全屏?

    最近做一个移动端微信页面项目,在微信页面中有视频播放,但是需要禁止IOS的自动全屏播放(前提必须使用video标签).如: <video id="post" autoplay ...

  5. Android强制横屏+全屏的几种常用方法

    全屏: 在Activity的onCreate方法中的setContentView(myview)调用之前添加下面代码 1 requestWindowFeature(Window.FEATURE_NO_ ...

  6. video标签的视频全屏

    按钮: <div class="fullScreen" @click="fullScreen"><i class="el-icon- ...

  7. H5中用js让页面全屏

    概述 意外的发现一个网页有一个按钮能使网页全屏,查了下代码发现是H5的全屏api,于是就查了下资料,记录下来供以后开发时参考,相信对其他人也有用. 参考资料: 利用js如何做到让页面全屏和不全屏功能 ...

  8. Qt实用技巧:界面切换使用Dialog全屏切换

    需求 在做应用程序的过程中,需要使用界面切换,界面切换到下一个界面使用new一个界面并显示,如系统设置,相关信息展示等等. (注意:本技巧适用的条件是,主界面不需要相关的信号与槽做消息循环,因为主界面 ...

  9. uni-app设置 video开始播放进入全屏状态

    有一video标签 <video id="myVideo" :src="videoUrl"></video> 获取 video 上下文 ...

随机推荐

  1. CSVDE

    csvde -f C:\export_OrganizationalUnit.csv -r '(objectClass=organizationalUnit)' -l 'displayName,prox ...

  2. 微服务SpringCloud+Docker入门到高级实战(目录)

    第一章 课程介绍和学习路线 1.微服务架构SpringCloud课程介绍 简介:课程介绍和课程大纲讲解,讲课风格和重点内容理解技巧2.技术选型和学后水平 简介:课程所需基础和技术选型讲解,学完课程可以 ...

  3. c++ 作业 10月13日 进制转换最简单方法,控制c++输出格式方法 教材50的表格自己实践一下 例题3.1 setfill() setw()

    #include <iostream> #include <iomanip> using namespace std; int main(){ // int i; // cou ...

  4. 驾考试题的json代码

    { "statusCode": "000000", "desc": "请求成功", "result" ...

  5. 第三篇、Swift基础学习

    1.常量与变量 什么是常量和变量 在Swift中规定:在定义一个标识符时必须明确说明该标识符是一个常量还是变量 使用let来定义常量,定义之后不可以修改 使用var来定义变量,定义之后可以修改 变量的 ...

  6. 在Linux下搜索文件

    在Linux下搜索文件============================= 1,which 查找可执行文件的绝对路径 [root@aminglinux ~]# which cat /bin/ca ...

  7. Linux 系统性能:观察、测试、调优

    一个完整运行的 Linux 系统包括很多子系统(介绍,CPU,Memory,IO,Network,…),监测和评估这些子系统是性能监测的一部分.我们往往需要宏观的看整个系统状态,也需要微观的看每个子系 ...

  8. jQuery实现复选框的全选、反选功能

    <ul id="list"> <li><label><input type="checkbox" value=&quo ...

  9. CSS3小知识

    1.边框圆角,边框阴影 border-radius:6px; // border-radius:50%; //圆形 box-shadow: 1px 1px 1px #666; //box-shadow ...

  10. GoF23种设计模式之结构型模式之桥接模式

    一.概述         将类的抽象部分与实现分部分离开来,使它们都可以独立地变化. 二.适用性 1.你不希望在抽象和实现之间有一个固定的绑定关系的时候.例如:在程序运行时实现部分应可以被选择或切换. ...