HTML5全屏来袭:支持浏览器原生全屏的JavaScript代码发布

曾子嶒·2012年02月04日 22:00
前两天我们报道了最新发布的<a href="http://www.36kr.com/p/79550.html" target="_blank">FireFox 10</a>开始支持全屏API。可能很多人暂时不清楚能把这个全屏API用在什么地方,但是已经有人把调用这个功能的JavaScript代码发布出来,并且已经能与HTML5的“video”标签组合应用。 在这个jQuery插件的<a href="http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/" target="_blank">主页</a>上,发布了一个<a href="http://johndyer.name/lab/fullscreenapi/" target="_blank">全屏演示</a>和一个应用“video”标签的<a href="http://mediaelementjs.com/" target="_blank">视频演示</a>。同时提醒除FireFox 10外,仅Chrome 15与Safari 5.1或更高版本的浏览器支持原生全屏API。也就是说,你的浏览器版本不满足这个条件,可就不能正常运行这个功能。目前所有的IE浏览器都暂不支持,该Demo在检测出来后会给你相应提示。

前两天我们报道了最新发布的
FireFox 10开始支持全屏API。可能很多人暂时不清楚能把这个全屏API用在什么地方,但是已经有人把调用这个功能的JavaScript代码发布出来,并且已经能与HTML5的“video”标签组合应用。

在这个jQuery插件的
主页上,发布了一个
全屏演示和一个应用“video”标签的
视频演示。同时提醒除FireFox 10外,仅Chrome 15与Safari 5.1或更高版本的浏览器支持原生全屏API。也就是说,你的浏览器版本不满足这个条件,可就不能正常运行这个功能。目前所有的IE浏览器都暂不支持,该Demo在检测出来后会给你相应提示。

经测试,首次运行全屏Demo时浏览器会出现一个浏览器的授权提示,在你允许后下次再运行就不会再出现。Demo在全屏后只能按“ESC”键退出,在页面中没有显示或隐藏的退出全屏接口,在代码的实际应用时建议还是加上。

如果浏览器支持HTML5,你应该可以看到
这段视频。如果同时还是上述版本的浏览器,可以试着将其全屏播放。需要再次提醒的是,这段视频由“video”标签载入,而非Flash。

另还有“audio”标签加载的音频,感兴趣的朋友可以去他们的
网站了解详情,或者是去
GitHub查看实现全屏的JavaScript代码。

+1
0

好文章,需要你的鼓励

参与评论
评论千万条,友善第一条
后参与讨论
提交评论0/1000

下一篇

<p align="left">27岁的扎克伯格打算兑现其2005年担任CEO时所获的股票期权,期权兑现后他将获利50亿美元,相应地,需要按照美国个人所得税的最高税率35%纳税,总额将超过15亿美元,这使得他成为美国有史以来纳税额最高者之一。</p>

2012-02-04

36氪APP让一部分人先看到未来
36氪
鲸准
氪空间

推送和解读前沿、有料的科技创投资讯

一级市场金融信息和系统服务提供商

聚焦全球优秀创业者,项目融资率接近97%,领跑行业