js之 H5 的 video 标签全屏功能不能用

最新推荐文章于 2024-03-12 19:16:55 发布
最新推荐文章于 2024-03-12 19:16:55 发布
阅读量4.7k 收藏 2
点赞数 3
分类专栏： js 文章标签： video 全屏按钮点击失效
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yan263364/article/details/102585039
版权

一、问题

H5 的 video 标签全屏功能不能用。

二、经过

刚开始以为 video 标签全屏功能默认没有开的。
后来发现，全屏功能在本地是好使的，服务端就打不开。
因为现在这个项目，是嵌套在一个项目的 iframe 页面。

三、结果

在 iframe 标签里面 添加
在这里插入图片描述

柒仔不安
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
HTML5 video播放器全屏(fullScreen)方法实例
01-19
首先来说，这个标题具有误导性，但这样设置改标题也是主要因为video使用的比较多 在html5中，全屏方法可以适用于很多html 元素，不仅仅是video 复制代码代码如下:<!doctype html><html><head><meta charset=”utf-8″ /><title>全屏问题</title><meta http-equiv=”content-type” content=”text/html; charset=utf-8″/><meta http-equiv=”imagetoolbar” content=”no”/><meta name=”apple-mobile-web
iframe嵌套 video标签 全屏按钮无法使用
王永存
12-10 2368
在iframe里添加一个属性 ：allowfullscreen="true" 即可
HTML中 video标签样式铺满全屏
最新发布
qq_63608386的博客
03-12 1234
video标签默认不是铺满的，即使手动设置宽高100%也不会生效，所以当需要video铺满div时，需要加上一个css样式stylewidth100%;height100%;
vue播放m3u8真机播放不了 vue-video-player 播放不了 m3u8如何在真机上播放h5
01-03
开始 在做项目有播放m3u8的需求 我就开始就随便找了个 这个我在我这里就不讲了 别人都讲的够多了 什么vue-video-player video.js 等等然后需要可以在电脑上播放导入videojs-contrib-hls就可以 问题 我是本地用的npm然后呢就在手机上直接去看效果 然后很快我这块写完了 但发现安卓机子上能播放ios不能就显示这样 然后最后发现 因为我是直接没发布在本地通过一个局域网下直接去看的 这个问题直接发布了放在服务器上就能解决了 放在服务器上看 放在服务器上看 放在服务器上看 重要的事情说三遍 另外还有有个在真机下全屏的问题》》请移步【vue-vid
hello-muiplayer::light_bulb: 一款优秀的 H5 视频播放器框架
07-23
玩耍、专注、联系、分享和自由 :triangular_flag: | 介绍 MuiPlayer是一款HTML5视频播放插件，默认配置了精美可操作的播放控件，涉及常见的播放场景，如全屏播放、播放快进、循环播放、音量调节、视频解码等功能。 支持mp4、m3u8、flv等媒体格式播放，解决大部分兼容性问题，适配PC和手机播放。 MuiPlayer 拥有丰富的参数自定义播放器实例，通过简单的配置即可完成自定义场景的视频播放。 特征 MuiPlayer帮助我们解决了日常H5视频应用开发中的一些常见问题： 不同浏览器平台的ui无法统一 ui扩展和状态处理之间容易发生冲突 在不同的环境（android、ios、pc）下，h5视频api可能会在不同的时间触发事件 媒体格式存在各种兼容性问题，在不同环境下播放时，muiplayer处理了大部分兼容性问题 在开发h5视频的过程中反复踩过一些坑，我们提供了完整的解决方案，让开发者少走一
自定义video播放组件-可全屏可加速兼容移动端
10-21
自定义video播放组件，自写控制条，可全屏观看，可调节播放倍速，兼容移动端
Android WebView H5视频播放实现全屏播放功能、全屏按钮不显示、灰显、点击无效问题解决方案
weixin_44158429的博客
04-18 5303
Android WebView H5视频播放实现全屏播放功能。问题全屏按钮不显示、灰显、点击无效解决方案。HTML5 Video Support。 1. 打开硬件加速(3.0以上版本支持) ，防止h5重新加载，切换横屏时，屏幕的H5内容始终以竖屏显示。 2. set一个WebChromClient，实现onShowCustomView() 方法和onHideCustomView()方法。 3. 全屏支持。
video标签隐藏全屏按钮
qq_42294411的博客
03-07 5895
video标签默认是不显示控制条的，在video标签添加controls可显示视频播放器的控制条,包含视频的播放控制按钮、进度条、全屏按钮等。 css隐藏按钮 //全屏按钮 video::-webkit-media-controls-fullscreen-button { display: none; } //播放按钮 video::-webkit-media-controls-play-button { display: none; } //进度条 video::-webkit-media-contro
Android WebView 视频播放，全屏按钮不显示或灰显解决方案
NAME_CJF的博客
10-21 8773
Android WebView 视频播放，全屏按钮不显示或灰显解决方案背景问题定位 背景 在Android开发中，遇到了如下问题：Activity内嵌WebView，加载有视频的页面时，视频无法全屏播放。全屏按钮不显示或者灰显。 故记录一下此次问题解决过程。 问题定位 在Android官方文档上对问题所述场景有如下解释： 其大意为： 1. 要打开硬件加速 2. 设置 WebChromeCli...
解决video更多选项按钮点击无反应以及操控video标签的控制按钮
Mine____的博客
05-07 4155
在一个项目中使用原生video时， 点击右下侧 更多按钮时无反应，找了很多文章没有发现类似问题的解决方案 后面就想把更多按钮隐藏掉，但是只能找到隐藏 全屏按钮 和 画中画的隐藏方式 后面找到了可以通过shadow DOM 看到被隐藏的 DOM ，发现更多选项按钮其实是被点击了，但是弹出的菜单定位发生了问题，导致无法看到，如下图把bottom改为0，更多选项的菜单就会出现，但是我没有找到修改样式的方法，只能去掉视频的下载和画中画功能，让更多选项按钮消失 下面是其他按钮的样式操作以及shadow DOM s
h5，video禁止拖动进度条，禁止快进
03-24
利用jq简单控制h5视频播放进度条，让使用者不能快进，可以后退。原理是每500毫秒记录一次进度条时间，如果下一个500毫秒的进度减去上一个500毫秒的进度大于1秒，那么就让视频返回到上一个进度，因项目开发中对于视频播放只有这么一个要求，所以搞得比较简单。代码仅作参考。大神轻喷。
手机页面强制横屏显示 html5 h5页面 强制横屏 可更改竖屏
02-08
手机页面强制横屏显示 竖屏会有手机旋转遮罩提示 之前整理的文件 现在清理电脑，先上传，以备下次使用...
使用vue-video-player 方法 视频全铺满以及过程中遇到的问题
阿……莫西林杀菌室
04-02 5783
安装、调试、修改效果：安装插件及环境问题：1、安装vue-video-player2、组件使用（全部）还需调整的地方： 效果： 安装插件及环境问题： 1、安装vue-video-player npm install vue-video-player -save 使用中遇到的环境问题： 1、Failed to resolve loader: sass-loader You may need to install it 安装sass-loader cnpm install sass-loader -D cn
android 全屏按钮不见了,[解决问题]安卓系统下iframe中video没有全屏按钮,视频不能全屏的解决方法...
weixin_39945475的博客
05-26 1996
[解决问题]安卓系统下iframe中video没有全屏按钮,视频不能全屏的解决方法雨过天晴工作室最近在研究安卓APP封装手机电影网站，遇到一个问题通过ckplayer解析m3u8，安卓APP下播放只有音量按钮，没有全屏按钮，就是不能用全屏。那样手机APP看视频就没有任何意义了，经过多方测试后 可以直接调用就可以支持m3u8的播放，不需要直接调用ckplayer。而且有全屏按钮。这个问题得以解决。还...
h5隐藏video控制按钮controls（腾讯云点播禁用video音量全屏等按钮）
热门推荐
jiajia199470的博客
12-27 1万+
前言 昨天app的同事（ios跟安卓）发现webview的video全屏按钮有问题，他们想禁用掉全屏、音量控制的按钮，前端同事A在根据api设置disable_full_screen=1（pc端falsh平台生效），但全屏按钮依旧存在，觉得腾讯api没做好坚持要换掉一直在用的腾讯云点播。个人觉得移动端采用video浏览器控件，换哪个云点播都一样，故帮忙解决禁用隐藏video内部controls功能...
来了来了！Chrome 高级玩法，秒变摸鱼神器（提前尝鲜还未发布的功能）
Java之间
04-08 302
点击上方“Java之间”，选择“置顶或者星标”你关注的就是我关心的！来源：电手上一篇：可怕！3.83 亿开房记录遭泄露，这家酒店竟然又被爆泄露520万用户数据了正文Chrome 作为地...
html5视频退出全屏死机,HTML5 video进入全屏和退出全屏的实现方法
weixin_39710561的博客
06-04 132
这篇文章主要介绍了HTML5 video进入全屏和退出全屏的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧当我们使用video标签的时候，有时候因为更多的需要，我们要自己自定义控制栏，而进入和退出全屏也是其中的一部分不同的浏览器有不同的实现方法// Webkitelement.webkitRequestFullScre...
h5video标签不能全屏
05-24
H5 的 video 标签是支持全屏播放的，可以通过 JS 控制来实现。以下是一个简单的示例代码： ```html <video id="myVideo" controls> <source src="video.mp4" type="video/mp4"> </video> ()">全屏 function ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值