谷歌 Web 开发最佳实践手册(2.2.3):自定义视频播放器

【伯乐在线提示】:① 5月6日,谷歌开发者中心推出了一个 Web 开发最佳实践手册。伯乐在线资源频道摘编该资源后,已邀请一些关注 Web 开发的朋友参与翻译手册。② 由于译者朋友几乎都是已在职,都是在工作之余参与,每位的翻译进度会不一样(请理解),所以手册中文版不会按照英文版章节顺序发布。③ 手册中文版尚不完整,请不要转载,谢谢合作。


【导读】:不同平台播放视频的方式不同。移动平台的解决方案需要考虑设备的方向(横向或者纵向视图)。使用全屏API来控制视频内容的全屏视图。

在本篇课程中:

  1. 跨设备的设备方向检测
  2. 页内或全屏播放
  3. 控制全屏内容

 

跨设备的设备方向检测

在台式显示器或者笔记本电脑上很少会考虑设备的方向,但如果要在手机和平板上做网页设计,设备的方向就尤为重要了。

iPhone上的Safari对横竖方向转换的支持就做得很好。

Screenshot of video playing in Safari on iPhone, portraitScreenshot of video playing in Safari on iPhone, landscape

而iPad与Chrome for Android对设备方向的支持则可能会出现问题。比如,在iPad的横向模式上播放无任何配置的视频就会是这个样子:

Screenshot of video playing in Safari on iPad Retina, landscape

在CSS上设置视频

或者

可以解决大部分的设备横向布局问题。你也可以使用考虑全屏的解决方案。

页内或全屏播放

不同平台播放视频的方式不一样。iPhone上的Safari会在页内显示视频元素,而播放时会进入全屏:

Screenshot of video element on iPhone, portrait

在安卓上,视频默认在页内播放,用户可以按全屏按钮请求全屏。

Screenshot of video playing in Chrome on Android, portrait

iPad上的Safari在页内播放视频:

Screenshot of video playing in Safari on iPad Retina, landscape

控制全屏内容

对于不支持全屏播放的平台,可以使用广泛支持的全屏API。用这个API去控制全屏内容或者页面。

要全屏一个元素,比如一个视频:

使整个document对象全屏

还可以监听全屏状态转换

或者检测一个元素是否正处于全屏模式

还可以用CSS伪类 :fullscreen 去改变元素在全屏模式下的样式。

在支持全屏API的设备上,可以考虑用缩略图作为视频的占位符。

译注:请在新窗口中查看视频

点击示例,看查看完整的效果。

注意:requestFullScreen() 当前还处在测试阶段,可能需要额外的代码来实现完整的跨浏览器支持。

收藏 评论

关于作者:Mxt

Think Deep, Work Lean. 个人主页 · 我的文章 · 12

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部