video的全屏事件

努力进阶的快快~

已于 2023-09-15 10:34:00 修改

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： video m3u8 vue3 文章标签：前端 javascript

于 2023-09-15 10:33:39 首次发布

本文链接：https://blog.youkuaiyun.com/m0_69439101/article/details/132896947

vue3 同时被 3 个专栏收录

20 篇文章

订阅专栏

video

3 篇文章

订阅专栏

m3u8

3 篇文章

订阅专栏

文章介绍了如何使用Vue.js结合JavaScript在HTML5视频上实现全屏状态的监听，当视频进入全屏或退出全屏时，会触发相应的控制台日志输出。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<video
  height="150px"
  width="100%"
  controls
  :src="src"
  v-on:fullscreenchange="onFullscreenChange"
  v-on:webkitfullscreenchange="onFullscreenChange"
></video>

<script setup>
const onFullscreenChange = () => {
  if (document.fullscreenElement || document.webkitFullscreenElement) {
    // 全屏状态
    console('video全屏时触发')
  } else {
    console('video还原时触发')
  }
};
</script>