Webkit中HTML5 Video的实现分析(六) - Safari视频机制分析

Safari中的视频相关操作封装在QuickTime Plugin里面,存放于/Library/Internet Plugin目录下。
 
下图是相关类的class diagram:


其中的QuickTime Plugin是通过已淘汰的Apple之前定义的Webkit Plugin协议来实现的,而不是现在支持的Netscape API的机制。
可以参考以下文档:
 
Safari/WebKit 的源代码里仍然有对WebKit Plugin 的支持, 也就是为了视频的插件。

另外Safari并不是通过HTMLMediaElement::platformLayer()提供的CALayer,而是通过Widget::platformWidget()来返回CALayer的。


 
以下是几张时序图帮助理解交互过程:
 
创建过程:



点击play按钮的操作序列:



释放的时序图:



下面是FigPluginView的类图,方便理解它内部的实现:


*最新UML图可以到GitHub中下载。

上一篇:  Webkit中HTML5 Video的实现分析(五) - WebKit中视频事件的传递


转载请注明出处: http://blog.youkuaiyun.com/horkychen


在Vue项目中实现video-video-player视频播放器的全屏功能通常需要借助HTML5 Video API。你可以按照以下步骤操作: 1. 首先,在HTML结构中添加video元素,并给它一个ref属性,以便后续在JavaScript中引用它。例如: ```html <template> <div> <button @click="enterFullScreen">全屏</button> <video ref="player" :src="videoSrc" /> </div> </template> ``` 2. 然后,在Vue组件的script部分,获取这个refs并设置进入全屏的函数: ```js export default { data() { return { videoSrc: 'your_video_source.mp4', isFullScreen: false, }; }, methods: { enterFullScreen() { const player = this.$refs.player; if (player.requestFullscreen) { // 对于支持fullscreen API的浏览器 player.requestFullscreen(); } else if (player.webkitRequestFullscreen) { // 对于WebKit内核的浏览器(如Safari) player.webkitRequestFullscreen(); } else if (player.mozRequestFullScreen) { // 对于Firefox player.mozRequestFullScreen(); } this.isFullScreen = true; }, exitFullScreen() { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } this.isFullScreen = false; }, }, }; ``` 3. 当需要退出全屏时,可以添加一个退出全屏的事件监听器,比如点击屏幕外区域: ```js mounted() { document.addEventListener('fullscreenchange', () => { this.exitFullScreen(); }); }, ```
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值