在vue3中video标签默认全屏播放

在Vue3中，如果你想要让`<video>`标签默认全屏播放，你需要在组件中设置一些HTML和JavaScript属性。首先，在模板里，你可以直接给`<video>`添加`fullscreen`属性：

<template>
  <div>
    <video ref="video" :src="videoSrc" @loadedmetadata="handleLoadedMetadata" :fullscreen="isFullscreen"></video>
    <button @click="toggleFullScreen">点击进入/退出全屏</button>
  </div>
</template>

然后，在script部分中，定义`isFullscreen`的数据属性以及`toggleFullScreen`方法：

<script setup>
import { ref, onMounted } from 'vue';

const videoSrc = "your_video_source";
let isFullscreen = ref(false);

function toggleFullScreen() {
  if (document.fullscreenElement) {
    // 如果已处于全屏模式，则退出全屏
    document.exitFullscreen();
  } else if (document.mozFullScreen || document.webkitIsFullScreen) {
    // 对于Firefox和WebKit浏览器的支持
    document.mozCancelFullScreen();
    document.webkitExitFullscreen();
  } else if (isFullscreen.value) {
    // 设置或请求全屏模式
    const videoElement = ref.current;
    videoElement.requestFullscreen();
    // 或者使用其他兼容的API，如mozRequestFullScreen或webkitRequestFullscreen
    isFullscreen.value = true;
  }
}
onMounted(() => {
  // 初始加载时设置全屏状态
  toggleFullScreen();
});
</script>

在这个例子中，当用户点击按钮时，会切换视频的全屏模式。需要注意的是，全屏功能依赖于用户的浏览器支持。如果浏览器不支持全屏API，上述代码将无法正常工作。