36氪+

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

曾子嶒 发表于 2012/02/04-22:00 HTML5 /johndyer /tool

前两天我们报道了最新发布的 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代码。


文章评论
截至 共收到 8 条评论
登录 后发表评论。 还没有帐号 现在注册 也可以使用 新浪微博QQ帐号 直接登入。
snpstudios
为什么不按F11来实现呢?
Normal
匿名@# 喜欢+1 [修改] 2楼
F11只是浏览器全屏,隐藏菜单栏地址栏之类的东西,并没有把网页内容真正的全屏(比如放大内容,鼠标锁定等)
Normal
匿名@# 喜欢+1 [修改] 3楼
用户体验
Normal
匿名@# 喜欢+1 [修改] 4楼
楼上正解 这是一个突破 HTML5全屏将会带来交互内容的变革
Normal
匿名@# 喜欢+1 [修改] 5楼
前两天才看到一个说HTML5目前不能做到的五件事,其中就有不能播放全屏视频,结果现在就出现了,这个速度呀
Normal
匿名@# 喜欢+1 [修改] 6楼
html5真是好东西。
Normal
匿名@# 喜欢+1 [修改] 7楼
不同于F11,HTML5全屏会产生一个事件,JS可以捕获的吧。
Normal
匿名@# 喜欢+1 [修改] 8楼
恩,视频Demo 里边的视频全屏,F11 就做不到了。