js让页面某个元素全屏(比如视频)的方法

2 years ago

source link: https://blog.p2hp.com/archives/9377
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

js让页面某个元素全屏(比如视频)的方法 | Lenix Blog

var elem = document.getElementsByTagName("video")[0];

function openFullscreen() {

if (elem.requestFullscreen) {

elem.requestFullscreen();

} else if (elem.mozRequestFullScreen) { /* Firefox */

elem.mozRequestFullScreen();

} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */

elem.webkitRequestFullscreen();

} else if (elem.msRequestFullscreen) { /* IE/Edge */

elem.msRequestFullscreen();

// openFullscreen();

</script>

<video src="a.mp4" muted autoplay></video>

    <a onclick="openFullscreen();">full</a>
    <script>

var elem = document.getElementsByTagName("video")[0];

function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) { /* Firefox */
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE/Edge */
    elem.msRequestFullscreen();
  }
}

// openFullscreen();

    </script>

Recommend

掘金 juejin.im 5 years ago
Cache

Flutter 实现视频全屏播放逻辑及解析

一、前言相信做过移动端视频开发的同学应该了解，想要实现视频从普通播放到全屏播放的逻辑并不是很简单，比如在 GSYVideoPlayer 中的动态全屏切换效果，就使用了创建全新的 Surface 来替换实现: 创建全新的 Surface ，并将对于的 Vie

www.lujun9972.win 3 years ago
Cache

查看某个字符的Unicode的方法

查看某个字符的Unicode的方法有时候想要查看某个特殊符号的Unicode，在Emacs中你只需要将光标移动到符号上，然后按下 C-x = 或者 M-x what-cursor-position,就能在echo area中看到符号对应的Unicode了。比如想我想知道 © 的...

segmentfault.com 3 years ago
Cache

js全屏模式轻松掌握[局部元素全屏展示]

js全屏模式轻松掌握[局部元素全屏展示]发布于 2018-12-03 我第一次对网页全屏模式有概念，是那种网页播放视频的全屏播放的那种。感觉很强，前几个星期有个需求也...

lindexi.gitee.io 3 years ago
Cache

WPF 稳定的全屏化窗口方法

WPF 稳定的全屏化窗口方法本文来告诉大家在 WPF 中，设置窗口全屏化的一个稳定的设置方法。在设置窗口全屏的时候，经常遇到的问题就是应用程序虽然设置最大化加无边框，但是此方式经常会有任务栏冒出来，或者说窗口没有贴屏幕的边。本文的方法是基于 Win32...

www.v2ex.com 3 years ago
Cache

有没有好用的 PHP 给第三方网站页面全屏截图的组件

V2EX › PHP 有没有好用的 PHP 给第三方网站页面全屏截图的组件 guke01857 · 1 天前 · 596 次...

www.v2ex.com 3 years ago
Cache

Python 列表踢出某个元素上机作业题

V2EX › Python Python 列表踢出某个元素上机作业题 going · 6 小时 58 分钟前 · 909 次...

blog.csdn.net 3 years ago
Cache

DataV构建大屏（全屏）数据展示页面

官方文档地址：DataV 1.安装组件库 npm安装 npm install @jiaminghi/data-view 2.使用按需引...

lindexi.gitee.io 3 years ago
Cache

WPF 全屏窗口将让 Chrome 97 视频停止播放

WPF 全屏窗口将让 Chrome 97 视频停止播放无论是使用 WPF 全屏窗口，还是高性能全屏透明窗口，都会在 Chrome 97 以及使用 chromium 对应版本内核的应用的视频停止播放。这是 chromium 的一个优化，因为 chromium 认为，如果有全屏窗口盖在上面，...

www.v2ex.com 2 years ago
Cache

有一个困惑：比如看 reversed 方法的源码里面的实现都是 pass，为什么会这样？如何才...

V2EX › Python 有一个困惑：比如看 reversed 方法的源码里面的实现都是 pass，为什么会这样？如何才能看到源码呢？

www.fly63.com 2 years ago
Cache

js生成随机数的方法 - 比如生成1-100随机数

js生成随机数主要用到了内置的Math对象的random()方法。用法如：Math.random()。它返回的是一个 0 ~ 1 之间的随机数。有了这么一个方法，那生成任意随机数就好理解了。比如实际中我们可能会有如下的需...

Recommend

About Joyk