西瓜播放器全屏功能源码分析
创始人
2024-06-01 07:26:03
H5业务中使用了西瓜播放器，嵌入各个APP，全屏时候会有相应的差异。
带着好奇心，阅读一下xgpplayer全屏功能部分源代码。
源码地址
一、工具方法
其他方法看名称就知道是dom操作相关，无需多说，上面这两个工具方法主要用来检测视频的播放形式，分别代表画中画，在页面中播放以及全屏播放。
二、绑定全屏事件
这里根据用户是否配置roateFullScreen来决定进入和退出全屏执行的方法，执行的方法略有差异，下面详细说明。
看看这个配置的作用是啥：
三、进入全屏和退出全屏
此处接受到播放器的包裹元素，尝试调用requestFullScreen方法，该方法作用和用法如下：
剩下的else if语句主要针对，firefox, webkit类型webview，ie浏览器进行兼容，如果都不支持requestFullScreen方法，就通过给播放器的包裹元素添加样式的方式实现全屏效果。样式代码如下，比较简洁。
退出全屏相对应的，请求exitFullscreen()方法就可以了。
四、进入样式横屏全屏和退出样式横屏全屏
箭头部分配置作用如下：
设置流式布局，相对应的样式全屏样式需要特殊处理，这里专门做了区分。
样式横屏全屏添加了红框样式，
对包裹元素进行了旋转处理。
五、监听全屏事件变动
此处针对不同浏览器对fullscreenchange进行监听，toggle css 和 进入退出全屏事件。注意如果配置了弹幕，切换全屏会对弹幕进行resize。
六、监听展现mode
自定义事件 webkitpresentationmodechanged 相对的处理，这个事件会在画中画相对应操作触发，退出全屏删除全屏样式，触发exitFullScreen()方法。
七、销毁
自定义destroy事件，播放器实例销毁，移除绑定事件。
-- END --
相关内容
热门资讯
应用未安装解决办法 平板应用未...
---IT小技术，每天Get一个小技能！一、前言描述苹果IPad2居然不能安装怎么办？与此IPad不...
脚上的穴位图 脚面经络图对应的...
人体穴位作用图解大全更清晰直观的标注了各个人体穴位的作用，包括头部穴位图、胸部穴位图、背部穴位图、胳...
长白山自助游攻略 吉林长白山游...
昨天介绍了西坡的景点详细请看链接：一个人的旅行，据说能看到长白山天池全凭运气，您的运气如何？今日介绍...
世界上最漂亮的人 世界上最漂亮...
此前在某网上，选出了全球265万颜值姣好的女性。从这些数量庞大的女性群体中，人们投票选出了心目中最美...
demo什么意思 demo版本...
618快到了，各位的小金库大概也在准备开闸放水了吧。没有小金库的，也该向老婆撒娇卖萌服个软了，一切只...
猫咪吃了塑料袋怎么办 猫咪误食...
你知道吗？塑料袋放久了会长猫哦！要说猫咪对塑料袋的喜爱程度完完全全可以媲美纸箱家里只要一有塑料袋的响...
应用未安装解决办法 平板应用未...
---IT小技术，每天Get一个小技能！一、前言描述苹果IPad2居然不能安装怎么办？与此IPad不...
北京的名胜古迹 北京最著名的景...
北京从元代开始，逐渐走上帝国首都的道路，先是成为大辽朝五大首都之一的南京城，随着金灭辽，金代从海陵王...
应用未安装解决办法 平板应用未...
---IT小技术，每天Get一个小技能！一、前言描述苹果IPad2居然不能安装怎么办？与此IPad不...
世界上最漂亮的人 世界上最漂亮...
此前在某网上，选出了全球265万颜值姣好的女性。从这些数量庞大的女性群体中，人们投票选出了心目中最美...
北京的名胜古迹 北京最著名的景...
北京从元代开始，逐渐走上帝国首都的道路，先是成为大辽朝五大首都之一的南京城，随着金灭辽，金代从海陵王...
世界上最漂亮的人 世界上最漂亮...
此前在某网上，选出了全球265万颜值姣好的女性。从这些数量庞大的女性群体中，人们投票选出了心目中最美...
苗族的传统节日 贵州苗族节日有...
【岜沙苗族芦笙节】岜沙，苗语叫“分送”，距从江县城7.5公里，是世界上最崇拜树木并以树为神的枪手部落...
长白山自助游攻略 吉林长白山游...
昨天介绍了西坡的景点详细请看链接：一个人的旅行，据说能看到长白山天池全凭运气，您的运气如何？今日介绍...
怎么样的桃花 桃花近看远看的样...
今年的“三八”妇女节，阳光明媚，踏青赏花正当时。遂与姐妹们共赴十里蓝山，与花海来一场春天的约会。十里...
世界上最漂亮的人 世界上最漂亮...
此前在某网上，选出了全球265万颜值姣好的女性。从这些数量庞大的女性群体中，人们投票选出了心目中最美...
demo什么意思 demo版本...
618快到了，各位的小金库大概也在准备开闸放水了吧。没有小金库的，也该向老婆撒娇卖萌服个软了，一切只...
demo什么意思 demo版本...
618快到了，各位的小金库大概也在准备开闸放水了吧。没有小金库的，也该向老婆撒娇卖萌服个软了，一切只...