视频

自定义视频播放器

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

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

跨设备的设备方向检测

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

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

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

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

Screenshot of video playing in Safari on iPad Retina, landscape

在CSS上设置视频 width: 100% 或者max-width: 100%可以解决大部分的设备横向布局问题。你也可以使用考虑全屏的解决方案。

页内或全屏播放

不同平台播放视频的方式不一样。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去控制全屏内容或者页面。

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

elem.requestFullScreen();

使整个document对象全屏:

document.body.requestFullScreen();

还可以监听全屏状态转换:

video.addEventListener("fullscreenchange", handler);

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

console.log("In full screen mode: ", video.displayingFullscreen);

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

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

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

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

除非另有说明,本网页的内容采用知识共享署名3.0许可和代码示例都基于Apache2.0许可。如需详细资讯,请参阅我们的网站政策

回到顶部