H5播放器使用方法。
1.使用webkit-playsinline playsinline 在iOS微信webview中视频不会弹出来,直接播放。
<video id="test_video" class="test_video"
webkit-playsinline playsinlinesrc="http://res.imtt.qq.com/qqbrowser/js/advideo.mp4"controls="controls" x5-video-player-type="h5"
x5-video-player-fullscreen="true" x5-video-orientation="portrait"></video>
2.使用object-position: 0px 0px;设置视频的位置。
.test_video {display: block;object-position: 0px 0px;width: 100%;/* display: none; */}
x5-video-player-fullscreen全屏方式
视频播放时将会进入到全屏模式
如果不申明此属性,页面得到视口区域为原始视口大小(视频未播放前),比如在微信里,会有一个常驻的标题栏,如果不声明此属性,这个标题栏高度不会给页面,播放时会平均分为两块(上下黑块)
注: 声明此属性,需要页面自己重新适配新的视口大小变化。可以通过监听resize 事件来实现
<video id="test_video" src="xxx" x5-video-player-type="h5" x5-video-player-fullscreen="true"/>
需要监听窗口大小变化(resize)实现全屏
window.onresize = function(){test_video.style.width = window.innerWidth + "px";test_video.style.height = window.innerHeight + "px";}
注: : 1. 为了让视频真正铺满全屏,可以适当让video的显示区域大于视口区域,这样在显示时在视口外的部截掉后,不会出四周黑边的情况
x5-video-orientation 控制横竖屏
功能:声明播放器支持的方向
可选值: landscape 横屏, portraint竖屏
默认值:portraint
e.g: http://res.imtt.qq.com/qqbrowser/js/test_video_orientation_attr.html
横屏
<video ... x5-video-player-type=”h5” x5-video-orientation="landscape"/>
竖屏
<video ... x5-video-player-type="h5" x5-video-orientation="portrait"/>
跟随手机自动旋转
<video x5-video-player-type="h5" x5-video-orientation="landscape|portrait"/>
注: 此属性只在声明了x5-video-player-type=”h5”情况下生效
事件回调
x5videoenterfullscreen进入全屏通知
支持版本: TBS中从>=036900开始支持,QB中是>=7.2开始支持
x5videoenterfullscreen: 表示播放器进入全屏状态
示例:
<video id=“myVideo".../>
通过JS监听事件
myVideo.addEventListener("x5videoenterfullscreen", function(){alert("player enterfullscreen");})
x5videoexitfullscreen退出全屏通知
x5videoexitfullscreen: 表示播放器退出了全屏状态
使用方法与x5videoenterfullscreen类似
使用同层播放器的一些建议
1. 监听resize 事件实现自适应视口大小变化,视频播放时会调整视口大小
2. 在视频播放期间的交互,弹框,字幕在视频视频区域中,不要在视频区域外
3. 对于直播类全屏视频,最好不要在最顶部放交互性元素
交互性视频实现建议
允许视频区域(video元素)之上的操作
1. 对于需要全屏交互的,可以将video区域设置为视口大小>
同层播放器支持版本
TBS微信:
TBS内核>=036849 后开始支持
UA示例:
Mozilla/5.0 (Linux; Android 4.4.4; OPPO R7 Build/KTU84P) AppleWebKit/537.36 (KHTML,like Gecko) Version/4.0 Chrome/37.0.0.0 Mobile MQQBrowser/6.8 TBS/036849 Safari/537.36 MicroMessenger/6.3.27.861 NetType/WIFI Language/zh_CN
TBS手Q:
TBS内核>= 036855
Android QQ浏览器:
浏览器版本>=7.1
UA示例:
UserAgent: Mozilla/5.0 (Linux; U; Android 4.4.4; zhcn; OPPO R7 Build/KTU84P) AppleWebKit/537.36 (KHTML, like Gecko)Version/4.0 Chrome/37.0.0.0 MQQBrowser/7.1 Mobile Safari/537.36
视频显示位置控制
默认视频在指定区域的居中显示,可以通过css object-position 属性控制视频(左上角) 显示位置
示例: http://res.imtt.qq.com/qqbrowser/js/testx5videoplayertype.html
置顶:
myVideo.style["object-position"]= "0px 0px"
效果图:
底部显示:
var offsetY = myVideo.clientHeight - (myVideo.clientWidth * myVideo.videoHeight / myVideo.videoWidth)myVideo.style["object-position"]= "0px " + offsetY + "px"
效果:
H5播放器使用方法。相关推荐
- 熊猫TV直播H5播放器架构探索
本文来自熊猫TV音视频技术专家姜雨晴在LiveVideoStackCon 2017上的分享,并有LiveVideoStack整理成文.当下,打造一款播放器已经有比较好的开源实现,但熊猫TV为什么还要自 ...
- 直播播放器API(播放器调用方法、参数、接口和事件)
直播播放器API(播放器调用方法.参数.接口和事件): 播放器调用方法 <div class="player"></div> <script src= ...
- H5播放器内置播放视频(兼容绝大多数安卓和ios)
关于H5播放器内置播放视频,这个问题一直困扰我很长一段时间,qq以前提供白名单已经关闭,后来提供了同层属性的控制,或多或少也有点差强人意. 后来一次偶然发现一个非常简单的方法可以实现. 只需要给vid ...
- 酷播云H5播放器与JS之间交互的实例
酷播云H5播放器与JS之间交互的实例 <!doctype html> <html> <head> <meta charset="utf-8" ...
- 酷播云H5播放器倍速播放功能
大家好,我是小酷,小酷今天来说说H5播放器倍速播放功能: 酷播云是支持HTML5播放器及Flash播放器,两者兼容,可自由切换.其中,H5播放器自带倍速播放功能,用户可选择视频的播放速度. 酷播云Ht ...
- 免费视频直播、点播H5播放器SkeyeWebPlayer播放常见问题
免费视频直播.点播H5播放器SkeyeWebPlayer使用常见问题 1.用常见问题--配置iframe允许自动播放和全屏 SkeyeWebPlayer播放器在PC上正常情况下单击播放器的全屏按钮是可 ...
- SkeyeWebPlayer.js H5播放器使用文档说明
SkeyeWebPlayer.js H5播放器,是一款能够同时支持HTTP.HTTP-FLV.HLS(m3u8)视频直播与视频点播等多种协议, 支持H.264.H.265.AAC等多种音视频编码格式, ...
- 免费视频直播、点播H5播放器SkeyeWebPlayer 结合百度地图sdk实现电子地图播放功能
免费视频直播.点播H5播放器SkeyeWebPlayer 结合vue-baidu-map百度地图组件实现电子地图播放功能,最终效果如图所示: SkeyeWebPlayer播放器如何在vue-baidu ...
- php获取h5视频直链,一种H5播放实时视频的方法与系统与流程
本发明涉及播放实时视频,尤其涉及一种h5播放实时视频的方法与系统. 背景技术: h5是指第5代html,也指用h5语言制作的一切数字产品.所谓html是"超文本标记语言"的英文缩写 ...
最新文章
- 热点 | Excel不“香”了,数据分析首选Pyhton!
- 对比直立车模控制中的互补滤波、Karlman滤波和参考滤波方案
- 菜鸟学习计划浅谈之Linux系统
- linux下shell编程
- 怀旧服新开服务器最新,暴雪官方发大招,怀旧服新开11个新服务器
- 在 Kubernetes 上弹性深度学习训练利器 -- Elastic Training Operator
- 我提出辞职,老板竟然让我做选择题(转)
- Python基础之函数与装饰器
- 企业选择 多云管理平台 六大注意事项
- word List37
- DPDK | 如何在用户空间使用大页内存hugepage
- mysql 登录的权限设置_MySQL 登录权限设置SQL语句
- 海豚湾在哪_前任3再见前任里的海豚湾在哪 电影拍摄取景地点介绍
- Aras Innovator: 如何快速的装多份innovatorSample数据到不同的数据库
- linux克隆机器IP问题
- F - Assassin’s Creed
- VisionPro如何引用VPP?
- Person Search
- 机械臂力控----积分自适应导纳控制
- VSTO中Word的查找方式