西瓜播放器全屏功能源码分析

2024-06-30 04:23:14

H5业务中使用了西瓜播放器，嵌入各个APP，全屏时候会有相应的差异。

带着好奇心，阅读一下xgpplayer全屏功能部分源代码。

源码地址

一、工具方法

其他方法看名称就知道是dom操作相关，无需多说，上面这两个工具方法主要用来检测视频的播放形式，分别代表画中画，在页面中播放以及全屏播放。

二、绑定全屏事件

这里根据用户是否配置roateFullScreen来决定进入和退出全屏执行的方法，执行的方法略有差异，下面详细说明。

看看这个配置的作用是啥：

三、进入全屏和退出全屏

此处接受到播放器的包裹元素，尝试调用requestFullScreen方法，该方法作用和用法如下：

剩下的else if语句主要针对，firefox, webkit类型webview，ie浏览器进行兼容，如果都不支持requestFullScreen方法，就通过给播放器的包裹元素添加样式的方式实现全屏效果。样式代码如下，比较简洁。

退出全屏相对应的，请求exitFullscreen()方法就可以了。

四、进入样式横屏全屏和退出样式横屏全屏

箭头部分配置作用如下：

设置流式布局，相对应的样式全屏样式需要特殊处理，这里专门做了区分。

样式横屏全屏添加了红框样式，

对包裹元素进行了旋转处理。

五、监听全屏事件变动

此处针对不同浏览器对fullscreenchange进行监听，toggle css 和进入退出全屏事件。注意如果配置了弹幕，切换全屏会对弹幕进行resize。

六、监听展现mode

自定义事件 webkitpresentationmodechanged 相对的处理，这个事件会在画中画相对应操作触发，退出全屏删除全屏样式，触发exitFullScreen()方法。

七、销毁

自定义destroy事件，播放器实例销毁，移除绑定事件。

-- END --

西瓜播放器全屏功能源码分析相关推荐

video 满屏显示_HTML5 video播放器全屏(fullScreen)实现的方法
这篇文章主要介绍了HTML5 video播放器全屏(fullScreen)方法实例,本文直接给出一个完整代码实例,需要的朋友可以参考下首先来说,这个标题具有误导性,但这样设置改标题也是主要因为vid ...
React-Native之播放器全屏播放
React-Native之播放器全屏播放前言我们要在react-native中实现一个音/视频的播放器,首先就要使用大名鼎鼎的react-native-video库,该库在github上有5.3k ...
html5播放器自动全屏,HTML5 video播放器全屏(fullScreen)实现的方法
这篇文章主要介绍了HTML5 video播放器全屏(fullScreen)方法实例,本文直接给出一个完整代码实例,需要的朋友可以参考下首先来说,这个标题具有误导性,但这样设置改标题也是主要因为vid ...
2023-01-18 ClickHouse之聚合功能源码分析
前言聚合分析是从海量数据中提取数据的基本方法,对于OLAP数据库而言,聚合分析是其关键能力之一,ClickHouse在这方面也做了很多设计和优化,正如ClickHouse在文档中所述: 本文将分析展 ...
android播放器全屏,Android端实现全屏播放的解决办法
之前碰到过视频播放全屏的问题,但是并没有很好解决,后面做网站时用到过一款视屏播放插件jwplayer,后面把它嵌入mui中实现全屏播放了,仅Android端测试,ios未测试. Loading the ...
video 满屏显示_HTML5 video播放器全屏(fullScreen)方法实例
首先来说,这个标题具有误导性,但这样设置改标题也是主要因为video使用的比较多在html5中,全屏方法可以适用于很多html 元素,不仅仅是video 复制代码代码如下: 全屏问题 *{ padd ...
html视频播放器全屏,HTML5 video播放器全屏(fullScreen)方法实例
首先来说,这个标题具有误导性,但这样设置改标题也是主要因为video使用的比较多在html5中,全屏方法可以适用于很多html 元素,不仅仅是video 复制代码代码如下: 全屏问题 *{ padd ...
uniapp web-view 网页 video播放器全屏后无法横屏解决办法
加微信:13436042714 备注uniapp ,解决uniapp开发疑难杂症使用uni-app 框架的 web-view 组件加载网页,在播放网页视频的时候,点击全屏不能自动切换横屏情况一:用 ...
jquery video全屏_video播放器全屏兼容方案
播放视频 video全屏 var Features = {}; var target = $('#video')[0]; // Get DOM element from jQuery collecti ...

最新文章

热门文章