当前位置:站长啦网站目录 » 站长资讯 » 站长新闻 » 技术文档 » 文章详细 订阅RssFeed

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

来源:video 浏览:904次 时间:2018-01-15
简介:[解决问题]安卓系统下iframe中video没有全屏按钮,视频不能全屏的解决方法

[解决问题]安卓系统下iframe中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 下,开发者工具 -&gt; setting -&gt; Preferences -&gt; Elements -&gt; 勾选 "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元素不能被设置为全屏模式。

 

分享一下更健康,本文地址: http://www.cnzzla.com/artinfo/44631.html

推荐站点

  • 站长啦工具箱-站长喜欢的网站工具大全站长啦工具箱-站长喜欢的网站工具大全

    站长啦工具箱提供二维码生成,dns解析查询,短网址生成,icp备案查询,ip定位,全民k歌解析,在线ping,端口扫描,子域名扫描,QQ在线状态,在线运行,时间戳转换,ua查询,whois查询,字符加解密等优质的小工具,站长喜欢的网站工具大全

    www.cnzzla.com/gongjuxiang/
  • 天晴主机_代理价格买主机天晴主机_代理价格买主机

    天晴主机,提供虚拟主机,网站建设,景安云主机,腾讯云,阿里云,百度云,VPS云主机|动态拨号ADSL等全球知名云计算产品。IDC服务器租用,服务器托管等,高防服务器IDC代理加盟等,我们以高性价比、一流服务和强大的管理功能赢得数十万客户!Hlapi晏宇科技 嘉和云计算管理平台

    zhuji.42824.com
  • 官网之家官网之家

    官网之家-官方网站大全收录企业、品牌、机构、团体或个人的官方网站,通过这里网民可以直接登陆官方网站,让网民的网络生活远离钓鱼网站,每一个官方网址都附有相关的图片和文字介绍。认准官方网站jd27.com,谨防钓鱼欺骗!

    jd27.com
  • Msvod魅思CMS V10|Msvod魅思CMS V10|

    Msvod魅思CMS V10,MSVOD v10,魅思视频系统V10演示网站msvod魅思视频系统,msvod v10 小视频系统合适用于各种教育、培训、教程、直销、搞笑、自拍、福利、写真、素材、广告、美容、健身、料理等N多视频行业的网站投入使用。 一个后台管理N个网站数据互通,每个网站可以单独绑定域名,单独设置SEO信息,单独设置LOGO,单独广告等 视频打赏 用户可以对视频上传作者进行各种礼物打赏,打赏所得金额作者可拿到对应的提成收入,所得收入可人民币提现 三级分销 三级分销商可以拥有独立的分销商网站独立的管理后台,并且可以自定义绑定域名,可统计每天收益基本设置等 多线路播放 支持多服务器线路播放视频,不同的会员级别可指定观看不同的播放线路解决宽带负荷,从而提高会员的积极消费 视频上传提成 用户在线上传的视频,如该视频被其他用户比如10个金币消费了,发布视频者可得到如3个金币的奖励 视频试看限制 PC端可自定义设置视频试看时间超出时间提示购买VIP,手机采取每天试看次数超出次数提示购买VIP 自动转码 结合云转码软件实现站长/用户上传视频支持任意格式转码,生成视频图片、名称、播放地址、完全自动 防盗链加密 结合云转码可现实防盗链,从而不用担心自己视频资源被盗链,除此之外播放地址我们还做了加密使资源更安全 每天签到 用户每天签到可得到系统自动奖励的金币,24小时允许签到一次,从而提高用户对网站的黏贴度哦 分享奖励 用户登陆会员中心获取宣传地址分享到QQ、论坛、微信等,不同IP被点击一次奖励指定的消费金币 卡密充值 用户可凭卡密在会员中心进行充值获取金币,后台可生成卡密的金币数直接到发卡平台销售 播放器广告 整合Ckplay播放器,后台可控制加入播放前载入广告,暂停播放广告可开启/关闭广告 支付体系 整合流行支付接口,比如微信支付,支付宝支付等以及第三方支付平台 APP应用 封装安卓APP应用以及苹果APP应用,封装手机端数据同步自动更新 会员在线上传 用户可通过电脑、手机端在线上传视频以及发布图片小说等,实时分享到网站 上传视频奖励 用户上传视频一经站长后台审核通过,该用于将得到系统奖励的金币 MSVOD V10 功能远不止这些,以上只是介绍较为特色的功能简介,更详细的功能体验请亲自体验~!

    v10.meisivod.com
  • 有的看有的看

    有的看提供最新电影在线观看,手机电影在线播放,VIP电影免费观看,同时还有电视剧、动漫、综艺等在线观看

    udkan.42824.com