将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. java面向对象思想2

    1.主函数是一类特殊的函数,作为程序入口,可被虚拟机调用.主函数格式是固定的.public:函数访问权限最大.static:代表函数随着类的加载已经存在.void:主函数没有具体返回值.main:不是 ...

  2. nginx下配置Yii2 rewrite、pathinfo等

    环境说明: 我试用的lnmp安装包安装的nginx,nginx版本是1.14.1 server { listen ; server_name www.baidu.com; #access_log /d ...

  3. 笔记-python-standard library-8.1 data types-datetime

    笔记-python-standard library-8.1 data types-datetime 1.      Datatimes 本章节内容为日期和时间处理类和方法. 1.1.    date ...

  4. input框中的必填项之取消当前input框为必填项

    html5新增了一个required属性,可以使用这个属性对文本框设置必填项,直接在input文本框上添加required即可 . 效果如图:   

  5. 【Best Time to Buy and Sell Stock II】cpp

    题目: Say you have an array for which the ith element is the price of a given stock on day i. Design a ...

  6. cookie注意事项

    cookie是在 HTTP 协议下,服务器或脚本可以维护客户工作站上信息的一种方式. 四种会话跟踪技术(URL重写.隐藏表单域.Cookie.Session) 服务端技术:URL重写,Session, ...

  7. _cdecl _stdcall

    __cdecl程序的压栈方式为C风格__stdcall为PASCAL风格 举个例子:(1)   C函数  Fun1(a,b,c)   函数调用时,参数压栈顺序为 c , b , a(2)   PASC ...

  8. Mybatis使用-Error attempting to get column 'type' from result set. / '255' in column '4' is outside valid range for the datatype TINYINT.

    一.遇到的问题是这样的: [RemoteTestNG] detected TestNG version 6.9.10log4j: Parsing for [root] with value=[DEBU ...

  9. 后缀数组(SA)学习记录

    一只只会后缀自动机却不会后缀数组的弱鸡做了一下HDU - 1403,结果SAM被卡内存了,然后学习了一下SA. 以下两道题都是求LCS,区别在于字符串长度. 参考blog:https://www.cn ...

  10. 数据结构设计 Stack Queue

    之前在简书上初步总结过几个有关栈和队列的数据结构设计的题目.http://www.jianshu.com/p/d43f93661631 1.线性数据结构 Array Stack Queue Hash ...