1. mobile内联播放
内联播放指的是视频在文档流中直接进行播放,不会弹出新的播放窗口的方式。
<video id="video"
style="object-fit:fill"
preload="auto"
webkit-playsinline="true"
playsinline
x5-video-player-type="h5"
x5-video-player-fullscreen="true"
x5-video-orientation="portraint"
src="video.mp4" >
</video>
属性 | 值 | 含义 |
---|---|---|
object-fit | fill 或 cover或 contain… | 视频填充模式,这三个最常用,fill会被拉伸,可以在css文件中设置。 |
preload | auto 或 metadata 或 none | 该属性在某些情况下被忽略 |
关于视频还有很多属性,请参考:
http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp
http://www.runoob.com/tags/ref-av-dom.html
剩下几个属性才是内联播放的关键,在下文中详细介绍:
(1) webkit-playsinline和playsinline
在手机浏览器和QQ等App中播放H5视频,系统会自动接管进行全屏播放。显然,在很多场景中,我们需要在H5的页面中进行播放,则需要加上webkit-playsinline
,在iOS10之后需要加上playsinline
。所以,建议同时加上这两个属性。
(2) android微信
按照上述属性设置之后,大多数情况都可以满足,唯独android的微信。它使用的是腾讯x5内核,不遵循X5web标准,会强制全屏。
这个是腾讯H5同层播放器接入规范:
https://x5.tencent.com/tbs/guide/video.html
x5-video-player-type="h5"
启用H5同层播放器
x5-video-player-fullscreen="true"
视频播放时将会进入到全屏模式。
x5-video-player-fullscreen="portraint"
声明播放器支持的方向,此属性只在声明了x5-video-player-type=”h5”情况下生效。
在其他资料中,常常到这里就结束了。亲测根本没有办法实现。播放时,上下都是黑色,视频在中间。
根据腾讯的X5同层播放器试用报告:
https://x5.tencent.com/tbs/guide/web/x5-video.html才找到了实现方式。
【强烈推荐这篇文章】还讲解了如果增加topbar等问题。
接下来,通过这篇文章提供的方法继续。
按照官方文档所述,只要修改video元素的「object-position」属性,就可以修改视频部分的显示位置,但实际上还要把video元素的宽高设成屏幕的宽高才行。
官方提供了两个事件回调:
x5videoenterfullscreen
进入全屏通知x5videoexitfullscreen
退出全屏通知
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>android wechat playsinline</title>
<style>
body{
margin: