将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. 操作DOM -------JavaScrip

    本文摘要:http://www.liaoxuefeng.com/ 经常用到. 由于HTML文档被浏览器解析后就是一棵DOM树,要改变HTML的结构,就需要通过JavaScript来操作DOM. 始终记 ...

  2. Perl_实用报表提取语言

    Perl 语法 - 基础   perl语言的核心是正则表达式,在文本处理上非常有优势,与python类似,但语法不同,perl的语法很灵活,用多了才会觉得好用. 常用知识点总结: perl语法类似于C ...

  3. 实用小工具不定期合集(textarea 高度自适应、自动计算Y轴刻度、json转table)

    1.textarea高度自适应 这个非常有用,但是网上的解决方案都不尽人意,话不多说,上代码. function auto (elem) { var minHeight = 30 var change ...

  4. ZendFramework-2.4 源代码 - 关于服务管理器

    // ------ 决定“服务管理器”配置的位置 ------ // 1.在模块的入口类/data/www/www.domain.com/www/module/Module1/Module.php中实 ...

  5. 16.VUE学习之-v-show的使用与v-if的差异对比

    v-show的使用与v-if的差异对比 相同点: 都可以达到隐藏和显示的效果. 不同点: v-show 会用display:none 来隐藏元素节点,推荐使用这种方式 v-if 会移除节点,可以配合v ...

  6. python3 练习题100例 (八)

    题目八:暂停一秒输出,并格式化当前时间. #!/usr/bin/env python3 # -*- coding: utf-8 -*- """ 题目八:暂停一秒输出,并格 ...

  7. 简单聊聊四层/七层模型到HTTP

    本文内容借鉴这篇博客:https://blog.csdn.net/agzhchren/article/details/79173491 但是这篇博客也是该博主转载的,文章具体出处我没有找到,如果有人知 ...

  8. 使用JFreeChart生成报表

    1.JFreeChart简介    JFreeChart是JAVA平台上的一个开放的图表绘制类库.它完全使用JAVA语言编写,是为applications,servlets以及JSP等使用所设计.  ...

  9. Dialogue between Jack and Rose【jack 和 Rose的对话】

    Dialogue between Jack and Rose Rose : It's getting quiet. 越来越安静了 Jack : It's gonna take a couple of ...

  10. A1055 The World's Richest(25 分)

    A1055 The World's Richest(25 分) Forbes magazine publishes every year its list of billionaires based ...