[解决问题]安卓系统下iframe中video没有全屏按钮,视频不能全屏的解决方法

发布时间：2018-01-15 阅读：9959 来源：video

雨过天晴工作室最近在研究安卓APP封装手机电影网站，遇到一个问题

通过ckplayer解析m3u8，安卓APP下播放只有音量按钮，没有全屏按钮，就是不能用全屏。那样手机APP看视频就没有任何意义了，经过多方测试后可以直接调用<video controls="" src='.$url.' id=\"ckplayer_a1\" width=\"100%\" height=\"100%\" autoplay=\"autoplay\"></video >就可以支持m3u8的播放，不需要直接调用ckplayer。而且有全屏按钮。这个问题得以解决。

还有一个情况是iframe下没有全屏，因为部分视频是通过解析才能观看的，比如优酷，需要用框架的形式去解析，这样在video在iframe下也是没有全屏按钮，经过《iframe中video没有全屏按钮》一文的启发，直接在框架里面加allowfullscreen="true" 就可以实现全屏按钮了，整个过程折腾了整整一天。最后的代码是< iframe src=http://api2.tv6.com/?id=http://v.youku.com/v_show/id_" . $url . ".html scrolling=no marginheight=0 marginwidth=0 frameborder=0 height=\"100%\" seamless id=\"mainFrame\" width=\"100%\" allowfullscreen=\"true\"></iframe >

另外，video这个在html5下只有一个标签 controls ，至于用法就很简单

定义和用法
controls 属性规定浏览器应该为视频提供播放控件。
如果设置了该属性，则规定不存在作者设置的脚本控件。
浏览器控件应该包括：
播放
暂停
定位
音量
全屏切换
字幕（如果可用）
音轨（如果可用）
HTML 4.01 与 HTML 5 之间的差异
controls 属性是 HTML 5 中的新属性。
语法
<video controls="controls" />

可以直接通过这个测试HTML 5 <video> controls 属性点击就可以测试

还有一篇文章不错，也让我测试了不少时间：如何修改 video 样式

我们这里说的“修改 video 样式”并不是要自己实现一套 controls，而是尝试修改 video 的默认样式

隐藏全屏按钮

这个很容易查到

video::-webkit-media-controls-fullscreen-button{ display: none; }

那么，video::-webkit-media-controls 是什么？还可以用它来定义哪些元素的样式，见下文

自定义其它样式

为什么用一个 video 标签就可以播放视频呢，它内部是怎么实现的呢？

我们来看一下 video 的内部构造：

chrome 下，开发者工具 -> setting -> Preferences -> Elements -> 勾选 "Show user agent shadow DOM"

再回来看，已经可以看到 video 的内部结构了

瞄一眼，有没有看到很熟悉的 -webkit-media-controls-fullscreen-button ？

确实如此，其他的按钮，包括播放按钮、播放进度条、静音按钮、音量条等，都可以像全屏按钮一样自定义样式。不止是隐藏噢，其他的样式同样适用，比如。。

下载按钮

是不是感觉从此 video 尽在掌控，想让它啥样就啥样了？大部分情况下，确实如此。

然而，还有个不听讲的妖孽，就是下载按钮。尝试用 video::-internal-media-controls-download-button 定义隐藏，并不生效

怎么办？有两种方式：

1. controlsList

在 video 上加属性 controlsList="nodownload"，就可以隐藏下载按钮。

就这么简单？当然不是。。。这种方式需要 Chrome 58+ 才支持，不能用于生产环境

2. overflow: hidden

video::-webkit-media-controls-enclosure{ overflow: hidden; }

video::-webkit-media-controls-panel{ width: calc(100% + 30px); }

就是将控制条面板设的长一些，超出的隐藏。。。这种方式还是勉强可以用于生产环境的，因为没有别的更好的办法。。。

参考

1. https://googlechrome.github.io/samples/media/controlslist.html HTMLMediaElement controlsList Sample

2. http://www.cnblogs.com/coco1s/p/5711795.html 神秘的 shadow-dom 浅析

3. http://www.cnblogs.com/kevinxue/p/6638733.html h5的video下载按钮如何隐藏

移动端环境险恶，上线前警惕自测！

还有一篇是直接加个按钮实现全屏的，这个也是不错的一个解决方法，

http://robnyman.github.io/fullscreen/

HTML内联框架元素 <iframe>

iframe默认不允许全屏, 如果内嵌了video那么控制条上将不显示全屏按钮, 通过添加allowfullscreen属性可以开启全屏功能.

mozallowfullscreen
使用allowfullscreen属性代替。在Gecko9.9及更高版本上，如果允许通过调用element.mozRequestFullScreen() 方法，设置frame为全屏模式，该属性被设置为true。如果该属性未被设置，iframe元素不能被设置为全屏模式。

webkitallowfullscreen
使用 allowfullscreen 属性代替。在Chrome 17及更高版本上（或者更早），如果允许通过调用element.webkitRequestFullScreen() 方法，设置iframe为全屏模式，该属性被设置为true，如果该属性未被设置，iframe元素不能被设置为全屏模式。