vue3+TS 视频播放 这个视频只需要显示界面 下方的按钮和进度条都不要 提供代码案例

Vue3 结合 TypeScript 的视频播放组件通常会专注于展示视频的实际播放区域，而隐藏不必要的控制如按钮和进度条。下面是一个简单的 Vue3 + TypeScript 的代码片段示例，展示如何创建这样的视频播放组件：

// 定义 VideoPlayer 组件 interface
interface VideoPlayerProps {
  src: string; // 视频源 URL
}

// 实现 VideoPlayer 组件
import { Component, Prop } from 'vue-property-decorator';

@Component({
  template: `
    <div class="video-player">
      <video :src="src" controls></video>
    </div>
  `,
})
export default class VideoPlayerComponent extends Vue {
  @Prop() src!: string;

  mounted() {
    // 如果需要，可以在此处添加视频预加载或错误处理等逻辑
  }
}

在这个例子中，`<video>` 元素包含了 `controls` 属性，这会默认显示播放、暂停、全屏等按钮以及进度条。为了仅显示视频内容，你可以通过 CSS 隐藏这些元素，例如：

.video-player video {
  display: block;
  width: 100%;
  height: auto;
  /* 隐藏控制 */
  -webkit-playsinline: true; /* 移除默认内嵌播放模式 */
  -moz-playsinline: true;
  -ms-playsinline: true;
  playsinline: true;
  position: relative;
  overflow: hidden;
}

.video-player .controls {
  display: none;
}

然后在父组件中使用这个 `VideoPlayerComponent`，只传递视频源URL即可：

<template>
  <div>
    <VideoPlayerComponent :src="videoSrc" />
  </div>
</template>

<script lang="ts">
import VideoPlayerComponent from '@/components/VideoPlayer.vue';

export default {
  components: {
    VideoPlayerComponent,
  },
  data() {
    return {
      videoSrc: 'your-video-url.mp4',
    };
  },
};
</script>