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图片颜色

时间: 2024-10-05 12:23:07

h5 video切换到横屏全屏的相关文章

h5 video 点击自动全屏

加上如下属性 https://blog.csdn.net/weixin_40974504/article/details/79639478 可阻止自动全屏播放,感谢 https://blog.csdn.net/weixin_40974504/article/details/79639478 原文地址:https://www.cnblogs.com/zonglonglong/p/10015623.html

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

已测适用于ios,某些安卓手机微信下播放视频会出现播放器控件(这个实在是无力吐槽了,因为之前还遇到过微信播放完视频后竟然无法退出全屏出现广告的情况,只有播放完后刷新页面并且要放到框架页里才能屏蔽微信视频广告!),之前用canvans渲染,感觉不够太完美,又弄成背景切换形式得(用背景切换形式可以完美解决当一个容器有transform:rotate(90deg)属性时自适应百分比问题,若是canvans需去计算高宽太麻烦还需考虑不同系统). 想要手机端h5播放时不自动全屏比想象的简单,看加粗部分,一

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

最近做一个移动端微信页面项目,在微信页面中有视频播放,但是需要禁止IOS的自动全屏播放(前提必须使用video标签).如: <video id="post" autoplay loop preload="auto"> <source src="foo.mp4" type="video/mp4"> </video> 在iPhone safari 点击视频会弹出播放器进行全屏播放. 在网上看了看

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

全屏: 在Activity的onCreate方法中的setContentView(myview)调用之前添加下面代码 1 requestWindowFeature(Window.FEATURE_NO_TITLE);//隐藏标题 2 getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, 3 WindowManager.LayoutParams.FLAG_FULLSCREEN);//设置全屏 横屏: 方法1:按照下面代码示例

Android WebView播放视频(包括全屏播放)

最近项目开发中用到了WebView播放视频的功能,总结了开发中犯过的错误,这些错误在开发是及容易遇到的,所以我这里总结了一下,希望大家看到后不要再犯类似的错误,尽可能提高开发效率: 这个Demo我这里也参考了网上写的一个比较好的一个Demo,经过总结修改,写出来的. 以下是相应代码: MainActivity: package com.androidwebviewdemo; import android.app.Activity; import android.app.ProgressDialo

video 全屏,播放,隐藏控件。

requestFullscreen全屏具体实现 1.进入全屏 function full(ele) { if (ele.requestFullscreen) { ele.requestFullscreen(); } else if (ele.mozRequestFullScreen) { ele.mozRequestFullScreen(); } else if (ele.webkitRequestFullscreen) { ele.webkitRequestFullscreen(); } el

html5 video全屏实现方式

首先来说,这个标题具有误导性,但这样设置改标题也是主要因为video使用的比较多 在html5中,全屏方法可以适用于很多html 元素,不仅仅是video <!doctype  html> <html> <head> <meta charset="utf-8" />     <title>全屏问题</title>     <meta http-equiv="content-type" co

21款大气的全屏图片切换代码

html5全屏背景切换点击按钮svg背景滑动切换特效 jQuery全屏响应式手指滑动图片轮播代码 jquery商城网站全屏多张图片滑动切换代码 jQuery仿瑞丽全屏透明遮罩图片轮播滚动代码 html5响应式全屏滚动图片切换幻灯片特效 jQuery全屏带进度条图片轮播特效 jQuery仿音悦台网站全屏带标题的焦点图轮播代码 jQuery背景和banner图片一起切换全屏焦点图切换代码 jquery html5响应式幻灯片插件网站响应式全屏幻灯片轮播代码 JQuery自适应全屏图片滚动鼠标上下滑动

远程桌面退出全屏/不能全屏/全屏切换的技巧

远程桌面退出全屏/不能全屏/全屏切换的技巧退出全屏 问:我的电脑远程登录到服务器上并且切换到了全屏状态,全屏后发现桌面顶部没有浮动工具栏了,想退出全屏状态,不知如何退出了,最后,只有重启电脑.想知道如何退出远程桌面的全屏方法? 答:退出远程桌面全屏状态方法,按下"Ctrl+Alt+Break"组合键,即可切换到普通屏幕状态. 全屏消失 问:Windows 7 下,远程桌面连接前,可以在属性中设置全屏,连接成功后也是全屏,可是如果切换回本地后,全屏就消失了,似乎再也回不去全屏了. 答:方