需求分析
一般对于一个播放器,应该支持如下几种显示模式:
- 等比例,最大化区域显示,不裁剪
- 等比例,最大区域显示,裁剪
- 拉伸显示,铺满全屏
要实现这几种显示模式。其实只要对播放控件的布局进行些许调整即可。那EasyPlayer是怎么实现的呢?
EasyPlayer几乎涵盖了开发者所需的全部平台,尤其是在web端的EasyPlayer.js,极大地方便了开发者在解决B/S型业务开发时遇到的播放器接入的问题,比如:不懂前端的js代码、没有公网服务器放置这些js脚本和网页、微信对接入IP播放地址有限制等。EasyPlayer.js适时地推出了一款非常优秀的工具页面,集 rtmp, hls, flv, websocket 于一身的网页直播/点播播放器, 使用简单, 功能强大,不论是测试,还是被集成,都很方便。
EasyPlayer.js解决手机微信弹窗播放
提出问题
我们知道EasyPlayer系列产品可以作为独立的产品使用,同时可以嵌入到自己的业务系统中,比如微信、视频平台中,最近有用户反映在使用EasyPlayer.js进行手机微信弹窗播放时,微信中播放界面不能全屏观看,希望进行此功能的开发。
分析问题
接到此问题反馈,我们根据用户需求,测试通过在微信浏览器中内置的z-index高度进行调整。
解决问题
Video标签加两个属性:x5-playsinline playsinline webkit-playsinline=“true”
解决EasyPlayer.js微信播放的全屏播放问题。