vue3 自定义Video播放器

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

1 效果

2 调用方法

3 封装组件

  

    
    

      

      加载中...
      播放出错,网络异常
      播放结束
      视频源未配置
    
    

 
      

        
          ▶️播放
          ⏸️暂停
        
        ⏹️停止
        
          ⏺️ 录制
          ⏹️ 停止录制 {
  { formatRecordTime(recordingTime) }}
        
        
          🔇
          🔊
        
        
          
        录制时长：{
  { formatRecordTime(recordingTime) }}