video的全屏事件

原创已于 2023-09-15 10:34:00 修改 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

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

vue3 同时被 3 个专栏收录

20 篇文章

订阅专栏

video

3 篇文章

订阅专栏

m3u8

3 篇文章

订阅专栏

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

<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>