easyplayer-pro播放器学习

背调

查询官方文档，EasyPlayer-pro支持ws-flv, http-flv, hls, webrtc（webrtc://xxx）格式，电子放大、水印(动态水印、幽灵水印)、显示上一个视频最后一帧、播放器快照截图、视频录制(WebM格式(音频+视频)、MP4格式(视频),FLV格式(音频+视频))、超时、断网重连、异常暂停播放等

属性配置 

调用方法和事件回调

应用

npm install easyplayerpro

import { createApp } from 'vue';
import App from './App.vue';
import EasyPlayerPro from 'easyplayerpro';

const app = createApp(App);

// 将 EasyPlayerPro 挂载到全局属性
app.config.globalProperties.$EasyPlayerPro = EasyPlayerPro;

app.mount('#app');

<template>
  <div class="container">
    <div class="row">
      <div class="col-md-8">
        <!-- 播放器容器 -->
        <div ref="videoContainer" id="video" class="player-container"></div>
      </div>
      <div class="col-md-4">
        <!-- 配置选项 -->
        <div class="config-options">
          <label>
            <input type="checkbox" v-model="config.useMSE" /> MSE 硬解
          </label>
          <label>
            <input type="checkbox" v-model="config.useSIMD" /> WASM 解码
          </label>
          <label>
            <input type="checkbox" v-model="config.hasAudio" /> 渲染音频
          </label>
          <label>
            <input type="checkbox" v-model="config.websocket1006ErrorReplay" /> 自动重连
          </label>
          <label>
            延迟重播时间：<input type="number" v-model.number="config.reconnectTime" /> ms
          </label>
          <label>
            水印配置：<input type="text" v-model="config.watermark.text" />
          </label>
          <label>
            视频封面 URL：<input type="text" v-model="config.poster" />
          </label>
          <label>
            播放地址：<input type="text" v-model="config.url" id="playHref" />
          </label>
        </div>

        <!-- 控制按钮 -->
        <div class="control-buttons">
          <button id="play" @click="createPlayer">播放</button>
          <button id="rePlay" @click="rePlay">重播</button>
          <button id="destroy" @click="destroyPlayer">销毁</button>
          <button @click="screenshotFn">截图</button>
        </div>
      </div>
    </div>
  </div>
</template>

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

// 获取全局属性
const { proxy } = getCurrentInstance();

// 初始化播放器配置
const config = reactive({
  useMSE: false,
  useSIMD: false,
  hasAudio: false,
  websocket1006ErrorReplay: false,
  reconnectTime: 5000, // 5秒重连
  watermark: {
    text: ''
  },
  poster: '',
  url: 'http://192.168.1.37:8888/live/001.live.flv'
});

// 声明
let easypro;
const videoContainer = ref(null);
const playHref = ref(null);

// 实例初始化
function createPlayer () {
  if (easypro) {
    easypro.destroy(); // 销毁存在的实例
    console.log('Existing player destroyed');
  }

  easypro = new proxy.$EasyPlayerPro({
    container: videoContainer.value,
    videoBuffer: 0.2,
    videoBufferDelay: config.videoBufferDelay || 0, // 使用 config 中的值
    useMSE: config.useMSE,
    useSIMD: config.useSIMD,
    hasAudio: config.hasAudio,
    websocket1006ErrorReplay: config.websocket1006ErrorReplay,
    reconnectTime: config.reconnectTime,
    networkDelayTimeoutReplay: false,
    heartTimeout: 10000,
    replayUseLastFrameShow: false,
    background: config.background || '',
    timeout: 10,
    qualityConfig: ['普清', '高清', '超清', '4K', '8K'],
    debug: true,
    debugLevel: "debug",
    operateBtns: {
      fullscreen: true,
      screenshot: true,
      play: true,
    },
  });

  const url = config.url;
  if (url) {
    easypro.play(url);
    console.log(`Playing video from: ${url}`);
  } else {
    console.warn('No video URL provided!');
  }
}

// 重播
function rePlay () {
  if (easypro) {
    easypro.play(config.url);
    console.log('Replaying the video');
  } else {
    createPlayer();
  }
}

// 销毁
function destroyPlayer () {
  if (easypro) {
    easypro.destroy();
    console.log('Player destroyed');
  }
}

// 截图
function screenshotFn () {
  if (easypro) {
    easypro.screenshot();
    console.log('Screenshot taken');
  } else {
    console.warn('No player instance found to take a screenshot');
  }
}

onMounted(() => {
  playHref.value = document.getElementById('playHref');
});
</script>

<style scoped>
.player-container {
  width: 100%;
  height: 500px;
  background-color: #000;
}

.config-options label {
  display: block;
  margin-bottom: 8px;
}

.control-buttons button {
  margin-right: 10px;
}
</style>