将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. Bootstrap 历练实例-轮播(carousel)插件方法

    方法 下面是一些轮播(Carousel)插件中有用的方法: 方法 描述 实例 .carousel(options) 初始化轮播为可选的 options 对象,并开始循环项目. $('#identifi ...

  2. Java基础面试题:String 和StringBuffer的区别

    package com.swift; import java.util.Date; public class Getclass_Test extends Date { public static vo ...

  3. nginx反向代理后端web服务器记录客户端ip地址

    nginx在做反向代理的时候,后端的nginx web服务器log中记录的地址都是反向代理服务器的地址,无法查看客户端访问的真实ip. 在反向代理服务器的nginx.conf配置文件中进行配置. lo ...

  4. <%%>用法初步认识

    <%%>是用于向客户端插入服务器代码所使用的一种标记 例如为了在HTML页面上展示由服务器提供的当前用户的某条信息或名字等便可使用 前台 <a href="home.asp ...

  5. 【CodeBase】PHP立即输出结果

    利用ob_flush输出缓冲区内容 /* *Author:YunGaZeon *usage:streamout($str) */ function streamout($str) { echo str ...

  6. 宏基笔记本升级bios(2012-12-28-bd 写的日志迁移

    首先到宏基官网下载中心 去下载你需要的新版本的bios安装包如图: 我的是宏基4750g的win7旗舰版64位,这里一定要根据自己的电脑的型号和安装的系统来选择,你可以选择最新的版本也可以选择老的版本 ...

  7. php中 为什么验证码 必须要开启 ob_clean 才可以显示

    用ob_clean(),将前面的输出都清除就OK了 这表示你的程序前面有输出,<?php 前有空格.空行.文件有BOM头 ob_clean(); header("content-typ ...

  8. web项目中信息显示不全

    如果页面的信息加载不全: 1. 可能是SQL写的不对,查的SQL写错了会导致信息展示问题 2. 或者是分页的初始化设置 过小导致,关于分页xxxPage.java的实体类初始值的pageSize设置的 ...

  9. 如何将emoji表情存放到mysql数据库中

    昨晚在爬取猫眼电影评论时在将评论信息插入到数据库中时出现问题,总是在插入一条数据时就会报错: 看着应该时字符编码的问题,比如新建的数据库新建的表,默认字符编码是:Latin1, 这种编码是无法插入中文 ...

  10. Database returned an invalid datetime value. Are time zone definitions for your database installed?

    在做文章归档的会后,打印结果时报了这个错误 ret = models.Article.objects.filter(user=user).annotate(month=TruncMonth('crea ...