vue3 自定义Video播放器

本文介绍了一个自定义的HLS视频播放器组件，该组件支持播放、暂停、录制、下载和显示速率等功能。主要特点包括： 播放控制：实现播放/暂停按钮、音量调节和静音功能 录制功能：支持视频录制并显示录制时长，可下载录制的视频文件 状态监测：实时显示网络状态（加载中、播放出错、播放结束等） 性能监控：显示当前视频播放速率 组件采用Vue3和HLS.js技术实现，支持HLS视频流播放。使用方式简单，只需传入视频URL即可完成调用。组件还提供了完善的错误处理和状态反馈机制，增强了用户体验。

1 效果

2 调用方法

  <div class=" w-760px h-500px " >  
               
     <GlobalVideoHls  :video-url="videoUrl" ></GlobalVideoHls>
                
  </div>  

3 封装组件

<template>
  <div class="w-full h-full video-wrapper">
    <video
      ref="videoRef"
      v-show="isPlay > 3"
      muted
      autoplay
      :controls="false"
      class="video-player"
      @timeupdate="updateTime"
      @loadedmetadata="onLoadedMetadata"
      @waiting="onWaiting"
      @playing="onPlaying"
      @error="onError"
      @ended="onEnded"
    ></video>
    <div class="video-overlay" v-if="networkStatus !== 'ok'">
      <div class="loading-spinner"></div>
      <span v-if="networkStatus === 'loading'" class="status-text"
        >加载中...</span
      >
      <span v-else-if="networkStatus === 'error'" class="error-anim"
        >播放出错,网络异常</span
      >
      <span v-else-if="networkStatus === 'ended'" class="end-anim"
        >播放结束</span
      >
      <span v-else-if="networkStatus === 'null'" class="end-anim"
        >视频源未配置</span
      >
    </div>
    <div v-if="isPlay > 3" class="video-controls">
 
      <div class="video-controls-left">
        <button @click="togglePlay">
          <span v-if="!playing">▶️播放</span>
          <span v-else>⏸️暂停</span>
        </button>
        <button @click="stopVideo">⏹️停止</button>
        <button @click="toggleRecording">
          <span v-if="!recording">⏺️ 录制</span>
          <span v-else>⏹️ 停止录制 {
  { formatRecordTime(recordingTime) }}</span>
        </button>
        <button @click="toggleMute" :title="muted ? '取消静音' : '静音'">
          <span v-if="muted">🔇</span>
          <span v-else>🔊</span>
        </button>
        <input
          type="range"
          min="0"
          max="1"
          step="0.01"
          v-model.number="volume"
          @input="changeVolume(volume)"
          class="volume-slider"
        />

          <!-- @input="changeVolume($event.target.valueAsNumber)" -->
        <span v-if="false" class="recording-time"
          >录制时长：{
  { formatRecordTime(recordingTime) }}</span
        >
        <div v-if="false" class="progress-bar">
          <input
            type="range"
            min="0"
            :max="duration"
            step="0.1"
            v-model<