vue 监听video标签全屏
时间: 2023-08-16 12:04:02 浏览: 155
videoview全屏
5星 · 资源好评率100%
回答: 在Vue中监听video标签的全屏事件可以通过使用第三方插件vue-video-player来实现。首先,你需要在Vue组件中引入vue-video-player插件,并对其进行样式改造以满足你的需求。然后,在methods中监听video的loadeddata事件,在事件处理函数中使用player.on('fullscreenchange', () => {})来监听全屏状态的变化。在这个回调函数中,你可以根据player.isFullscreen_的值来判断视频是否处于全屏状态。\[2\]\[3\]
#### 引用[.reference_title]
- *1* [video标签使用(全屏的进入和监听)](https://blog.csdn.net/ys_dd/article/details/122347988)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [vue 视频播放插件vue-video-player自定义样式、自动播放设置、设置一开始全屏播放视频、监听全屏事件](https://blog.csdn.net/DarlingYL/article/details/130441908)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]
阅读全文