使用video.js时,iframe内嵌视频无法全屏

最新推荐文章于 2024-08-02 10:37:52 发布
最新推荐文章于 2024-08-02 10:37:52 发布
阅读量1.9k 收藏
点赞数 2
文章标签： iframe内嵌时video.js无法全屏的解决方案
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43074269/article/details/99868103
版权

今天在做项目的时候，碰到了一个这样的问题，精外部的html引入到本页面当中，video.js的全屏不能用，后来查了一下，需要在iframe中添加一个属性 allowfullscreen=“true”，这样完美了。希望对大家有帮助。

<iframe src="web/templates/periods18/18.html" allowfullscreen="true" width="100%" height="100%" frameborder="no" border="0"  scrolling="yes"></iframe>
菜鸟zero队
关注
解决uni-app视频组件h5手机端全屏后无法横屏播放的问题
TJ1532635942的博客
07-15 4426
有兴趣的同学可以参考自己做做，效果还是挺可以，但是由于手机端分安卓和ios端，安卓端还有各种屏幕适应性问题，使用时兼容性很差，搞得很头疼，我在手机模拟器里试了就出现问题了，横屏并且全屏后整个网页居然向上移动了一段距离，难搞哦！后来看了下网上其他人写的视频网站手机端播放可以正常横竖屏全屏，于是看了下他们用的原来是iframe，顿时茅舍顿开啊，直接用iframe确实好用，自带了横竖屏切换，手机端和模拟器里切换也是正常的！最近接到需求要做一个内嵌到手机游戏里的web视频播放器，一个视频列表加一个播放页面。...
使用video.js时,iframe内嵌视频无法全屏的问题
开心就好的专栏
04-02 2万+
为iframe添加allowfullscreen属性即可, 如下所示<iframe src="video.html" frameborder="0" width="100%" height="100%" scrolling="no" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullsc
js之 H5 的 video 标签全屏功能不能用
yan263364的博客
10-16 4842
一、问题 H5 的 video 标签全屏功能不能用。 二、经过 刚开始以为 video 标签全屏功能默认没有开的。 后来发现，全屏功能在本地是好使的，服务端就打不开。 因为现在这个项目，是嵌套在一个项目的 iframe 页面。 三、结果 在 iframe 标签里面 添加 ...
解决Html iframe 内嵌video标签导致视频无法全屏展示的问题
最新发布
amoureux555的博客
08-02 675
解决Html iframe 内嵌video标签导致视频无法全屏展示的问题
iframe嵌套 video标签 全屏按钮无法使用
王永存
12-10 2455
在iframe里添加一个属性 ：allowfullscreen="true" 即可
RTSP/GB28181/SDK/Ehome协议安防视频融合平台EasyCVR集成iframe标签报fullscreen error排查过程
TSINGSEE青犀视频官方技术博客
12-17 250
安防视频云服务系统EasyCVR视频平台作为TSINGSEE青犀视频研发团队开发的视频协议融合平台，能够支持多种协议设备的接入，并且也能通过GB28181协议与第三方平台进行级联。 由于EasyCVR视频平台具备比较高的开发性，所以很多用户都在自己业务中集成EasyCVR，有客户将EasyCVR的iframe标签集成进自己的平台时，调用iframe播放视频，全屏情况下libDecoder.wasm报404错误码。报错信息为Uncaught (in promise) TypeError: fullscr
video.js在iframe中如何解决无法自动播放问题
03-12 2701
问题 使用video.js播放视频，如果集成在iframe中，无法自动播放，如何解决呢？其实很简单，设置下 allow=“autoplay” ，如下所示： &amp;lt;iframe src=&quot;test.html&quot; width=&quot;640&quot; height=&quot;360&quot; style=&quot;border:0&quot; allow=&quot;autoplay&
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
10-20
而在iframe中实现全屏化的功能，则需要使用到浏览器提供的全屏API，这个API能够让当前的元素（例如一个video、image或者其他DOM元素）进入到全屏模式。 接着我们看下文中提到的全屏API的兼容性问题。不同的浏览器...
Modal Dialog Box in Embedded YouTube Video.zip
11-08
最后，我们使用JavaScript来处理按钮点击事件，打开和关闭模态对话框，并将YouTube视频加载到`iframe`中： ```javascript function openModal() { document.getElementById("myModal").style.display = "block"; ...
android webview全屏时自动切换横屏,安卓 webview播放视频及横屏
weixin_27283495的博客
05-25 5567
问题描述：在项目中，会有在webview嵌入的网页中播放视频的需求，本来以为Android的WebView应该是默认支持视频播放的，不会有太大的问题，但是经过测试后，发现两个大问题：有些手机无法正常播放视频，出现白屏或者只有声音没有画面等，还有不能对视频进行操作(比如播放、暂停、自动播放等)视频无法全屏播放视频在webview中正常播放：这个只需要在对应的Activity中加入android:ha...
div被iframe遮住的几种情况及解决方法
09-28
类似地，当IFRAME内嵌Flash对象时，也可能出现z-index失效的问题。这时，同样需要在Flash对象中添加相应的wmode参数（wMode="transparent"），确保Flash内容不会影响到外部元素的层级关系。 此外，通过设置IFRAME的...
iframe框架嵌入网页会导致Chrome浏览器中视频不能全屏？(转)
dragoo1的专栏
03-08 2016
这次给大家分享的是iframe框架嵌入网页导致Chrome浏览器中视频不能全屏的解决方案，但在其他浏览器中似乎都很正常, 应该是 Chrome 6.0 新版本对权限的控制都越来越严格精细的原因。 其实解决办法也很简单, 就是增加一个属性allowfullscreen就行了。 不能全屏的代码如下： &lt;iframe src="himill.com/player.html" frameb...
vue, H5 播放器video 嵌入APP(andriod，IOS) 设置poster，poster显示前先出现一个 灰色 播放按钮
jdjfjgfdgdfg的博客
07-07 1658
安卓开发的app嵌入h5出现，ios未发现出现这个灰色图，手机（安卓，ios）浏览器没有发现出现这个图。 这个是安卓webview默认的播放器背景图，应在安卓开发上修改而不是在html上修改，h5上的video修改无效并且找不到位置。 webview.setWebChromeClient(new WebChromeClient() { @Override public Bitmap getDefaultVideoPoster() { return Bitma......
wangEditor使用iframe插入视频，直接在编辑器内查看视频，腾讯优酷为例
weixin_45575273的博客
06-10 3109
腾讯： 优酷： 找到视频的分享按钮，有复制通用代码，代码复制下来是这样的： 这是腾讯视频的 这个是优酷视频的：
js截取视频第一帧,Javascript如何从视频中提取帧？
weixin_39603469的博客
01-27 364
Hello I have the following JS code that creates a video from a file input:Your browser does not support the HTML5 canvas tag.Choose Videovar loadSnippetThumb = function(event) {var c = document.getEle...
vue使用原生video属性大全&个人踩坑记录
renjie123321的博客
06-29 7830
src ：视频的属性 poster：视频封面，没有播放时显示的图片 preload：预加载 autoplay：自动播放 loop：循环播放 controls：浏览器自带的控制条 width：视频宽度 height：视频高度 //audio和video都可以通过JS获取对象,JS通过id获取video和audio的对象 获取video对象 Media = document.getElementById(“media”);HTMLVideoElement和HTMLAudioElement 均继承自HTMLMed
解决video标签在ios系统播放全屏的问题
fang5211的博客
12-21 1373
<video controls="controls" webkit-playsinline="true" playsinline="true" src=""></video> webkit-playsinline="true" playsinline="true" IOS之UIWebView加上allowsInlineMediaPlayback属性为YESwebview.allowsInlineMediaPlayback=YES;
在网页中使用iframe嵌入B站视频（腾讯视频同理）
热门推荐
DSH964的博客
07-08 5万+
先上效果：首先是自己的页面：点击图片后出现一个遮罩、遮罩上显示B站的视频：这个效果很常见，例如在索尼中国的网站中：点击图中的播放图标会出现腾讯视频的iframe窗口：那么下面来看代码：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt
vue使用video.js播放视频
12-28
在Vue项目中使用video.js播放视频，可以按照以下步骤进行： 1. 首先，安装video.js和video.js的CSS样式文件。可以使用npm或者yarn进行安装： ```shell npm install video.js npm install video.js/dist/video-js....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值