vue3+vite 使用liveplayer加载视频

vue3+vite 使用liveplayer加载视频

官网: https://www.liveqing.com/docs/manuals/LivePlayer.html

• 支持WebRTC/MP4播放;
• 支持m3u8/HLS播放;
• 支持HTTP-FLV/WS-FLV/RTMP播放;
• 支持直播和点播播放;
• 支持播放器快照截图;
• 支持点播多清晰度播放;
• 支持全屏或比例显示;
• 自动检测IE浏览器兼容播放;
• 支持自定义叠加层;

• 安装

npm install @liveqing/liveplayer-v3@3.7.35
# 安装 rollup-plugin-copy 插件,用于复制依赖到public下
npm install rollup-plugin-copy@3.5.0

• 配置vite.config.js

import copy from 'rollup-plugin-copy';

export default defineConfig({
  plugins: [
    vue(),
    copy({
      targets: [{ src: 'node_modules/@liveqing/liveplayer-v3/dist/component/liveplayer-lib.min.js', dest: 'public/js' }],
    }),
  ],
});

• 在index.html中引入 liveplayer-lib.min.js

 <script src="/js/liveplayer-lib.min.js"></script>

• 创建组件SDVideoPlayer.vue

<template>
  <LivePlayer
    ref="livePlayerRef"
    :videoUrl="url"
    :videoTitle="videoTitle"
    :poster="poster"
    :controls="controls"
    :loop="loop"
    :fluent="fluent"
    :autoplay="autoplay"
    :live="live"
    :stretch="stretch"
    :alt="alt"
    :muted="muted"
    :aspect="aspect"
    :timeout="timeout"
    :showCustomButton="showCustomButton"
    :hideBigPlayButton="hideBigPlayButton"
    :hideSnapshotButton="hideSnapshotButton"
    :hideFullscreenButton="hideFullscreenButton"
    :hideFluentButton="hideFluentButton"
    :hideStretchButton="hideStretchButton"
    :resolution="resolution"
    :resolutiondefault="resolutiondefault"
    :playbackRates="playbackRates"
    :playbackRate="playbackRate"
    :hasaudio="hasaudio"
    :hasvideo="hasvideo"
    :customButtons="customButtons"
    :autofocus="autofocus"
    :dblclickFullscreen="dblclickFullscreen"
    :language="language"
    :waterMark="waterMark"
    :digitalZoom="digitalZoom"
    @message="handleMessage"
    @error="handleError"
    @ended="handleEnded"
    @timeupdate="handleTimeupdate"
    @pause="handlePause"
    @play="handlePlay"
    @fullscreen="handleFullscreen"
    @snapOutside="handleSnapOutside"
    @snapInside="handleSnapInside"
    @customButtons="handleCustomButtons"
    @canplay="handleCanplay"
    @volumechange="handleVolumechange"
  ></LivePlayer>
</template>

<script setup>
import LivePlayer from '@liveqing/liveplayer-v3';
import { ref, defineProps, defineEmits } from 'vue';

const livePlayerRef = ref(null);

const props = defineProps({
  /**
   * 视频地址
   */
  url: {
    type: String,
    default: '',
  },
  /**
   * 视频右上角显示的标题
   */
  videoTitle: {
    type: String,
    default: '',
  },
  /**
   * 视频封面图片
   */
  poster: {
    type: String,
    default: '',
  },
  /**
   * 自动播放
   */
  autoplay: {
    type: Boolean,
    default: true,
  },
  /**
   * 显示播放器控制栏
   */
  controls: {
    type: Boolean,
    default: true,
  },
  /**
   * 是否循环播放
   */
  loop: {
    type: Boolean,
    default: false,
  },
  /**
   * 是否直播, 标识要不要显示进度条
   */
  live: {
    type: Boolean,
    default: false,
  },
  /**
   * 视频流地址没有指定情况下, 视频所在区域显示的文字,相当于 html img 标签的 alt 属性
   */
  alt: {
    type: String,
    default: '无信号',
  },
  /**
   * 是否静音
   */
  muted: {
    type: Boolean,
    default: true,
  },
  /**
   * 视频显示区域的宽高比,fullscreen 即是全屏展示
   */
  aspect: {
    type: String,
    default: '16:9',
  },
  /**
   *  流畅模式
   */
  fluent: {
    type: Boolean,
    default: true,
  },
  /**
   *  是否拉伸
   */
  stretch: {
    type: Boolean,
    default: false,
  },
  /**
   *  m3u8 加载超时(秒)
   */
  timeout: {
    type: Number,
    default: 20,
  },
  /**
   *  是否在工具栏显示自定义按钮(极速/流畅, 拉伸/标准)
   */
  showCustomButton: {
    type: Boolean,
    default: true,
  },
  /**
   *  是否隐藏起播状态下的大播放按钮
   */
  hideBigPlayButton: {
    type: Boolean,
    default: false,
  },
  /**
   *  是否隐藏 快照 按钮
   */
  hideSnapshotButton: {
    type: Boolean,
    default: false,
  },
  /**
   *  是否隐藏 全屏 按钮
   */
  hideFullscreenButton: {
    type: Boolean,
    default: false,
  },
  /**
   *  是否隐藏 极速/流畅 按钮
   */
  hideFluentButton: {
    type: Boolean,
    default: false,
  },
  /**
   *  是否隐藏 拉伸/标准 按钮
   */
  hideStretchButton: {
    type: Boolean,
    default: false,
  },
  /**
   *  HLS点播流播放时使用：需已有对应清晰度的HLS流，供选择的清晰度配置,
   *  如 "yh,fhd,hd,sd" (说明：
   *  yh:原始分辨率，
   *  fhd:超清，
   *  hd:高清，
   *  sd:标清,
   *  不配置则不启用,
   *  需要提供多清晰度源，比如原画源是test.m3u8, 则hd源即为test_hd.m3u8)
   */
  resolution: {
    type: String,
    default: '',
  },
  /**
   *  HLS点播流播放时使用：默认播放的清晰度
   */
  resolutiondefault: {
    type: String,
    default: 'hd',
  },
  /**
   *  HLS点播流播放时使用：倍速列表
   */
  playbackRates: {
    type: Array,
    default: [0.5, 1, 2, 3],
  },
  /**
   *  HLS点播流播放时使用：默认倍速
   */
  playbackRate: {
    type: Number,
    default: 1,
  },
  /**
   *  HTTP-FLV播放时使用: 是否有音频，传递该属性用于处理只有音频或只有视频的源, Boolean 默认不配置自动判断
   */
  hasaudio: {
    type: Boolean,
  },
  /**
   *  HTTP-FLV播放时使用: 是否有视频，传递该属性用于处理只有音频或只有视频的源, Boolean 默认不配置自动判断
   */
  hasvideo: {
    type: Boolean,
  },
  /**
   *  v2.5.1  自定义工具栏按钮, 配置模板(按钮名称[:class名称]), 多个用英文逗号分隔,
   *  示例：custom-buttons="对讲,配置:vjs-icon-cog"
   */
  customButtons: {
    type: String,
    default: '',
  },
  /**
   *  v2.5.2  是否自动获取焦点
   */
  autofocus: {
    type: Boolean,
    default: false,
  },
  /**
   *  v2.5.3  是否双击全屏
   */
  dblclickFullscreen: {
    type: Boolean,
    default: true,
  },
  /**
   *  v2.6.2  语言(zh-CN/en) 默认不配置自动判断
   */
  language: {
    type: String,
  },
  /**
   *  v2.7.12  水印文字
   */
  waterMark: {
    type: String,
    default: '',
  },
  /**
   *  v2.7.29  电子放大
   */
  digitalZoom: {
    type: Boolean,
    default: false,
  },
});

const handleSubmit = () => {
  emits('add', 111);
};

const emits = defineEmits([
  'message',
  'error',
  'ended',
  'timeupdate',
  'pause',
  'play',
  'fullscreen',
  'snapOutside',
  'snapInside',
  'customButtons',
  'canplay',
]);
/////////////////////////////// 事件 ///////////////////////////////
/**
 * m3u8 加载失败时触发通知消息, 参数: { type: '', message: ''}
 */
function handleMessage(obj) {
  emits('message', obj);
}
/**
 * 播放器出错回调, 参数: Error Object
 */
function handleError(obj) {
  this.$emit('error', obj);
}
/**
 * 播放结束, 参数: 无
 */
function handleEnded() {
  this.$emit('ended');
}
/**
 * 进度更新, 参数: 当前时间进度
 */
function handleTimeupdate(obj) {
  this.$emit('timeupdate', obj);
}
/**
 * 暂停, 参数: 当前时间进度
 */
function handlePause(obj) {
  this.$emit('pause', obj);
}
/**
 * 播放, 参数: 当前时间进度
 */
function handlePlay(obj) {
  this.$emit('play', obj);
}
/**
 * 全屏状态改变, 参数：true/false
 */
function handleFullscreen(obj) {
  this.$emit('fullscreen', obj);
}
/**
 * 外部快照回调, 参数: 快照 Base64 数据
 */
function handleSnapOutside(obj) {
  this.$emit('snapOutside', obj);
}
/**
 * 内部快照回调, 由控制栏快照按钮触发, 参数: 快照 Base64 数据
 */
function handleSnapInside(obj) {
  this.$emit('snapInside', obj);
}
/**
 * v2.5.1 自定义按钮点击回调, 参数：名称
 */
function handleCustomButtons(obj) {
  this.$emit('customButtons', obj);
}
/**
 * v2.7.32 可播放, 参数：时长（秒）
 */
function handleCanplay(obj) {
  this.$emit('canplay', obj);
}
/**
 * v2.7.32 音量改变回调, 参数：音量（0~1），静音状态
 */
function handleVolumechange(obj) {
  this.$emit('volumechange', obj);
}
/////////////////////////////// 方法 ///////////////////////////////
/**
 * 播放
 */
function play() {
  livePlayerRef.value.play();
}
/**
 * 暂停
 */
function pause() {
  livePlayerRef.value.pause();
}
/**
 * 获取暂停状态
 */
function paused() {
  livePlayerRef.value.paused();
}
/**
 *  获取当前播放时间进度, 同步返回播放时间进度数据
 */
function getCurrentTime() {
  livePlayerRef.value.getCurrentTime();
}
/**
 *  v2.2.5 设置当前播放时间进度, 即 seek
 */
function setCurrentTime() {
  livePlayerRef.value.setCurrentTime();
}
/**
 *  外部 API 方式获取快照, 快照获取成功后, 触发 snapOutside Event
 */
function snap() {
  livePlayerRef.value.snap();
}
/**
 *  获取静音状态
 */
function getMuted() {
  livePlayerRef.value.getMuted();
}
/**
 *  设置静音状态
 */
function setMuted() {
  livePlayerRef.value.setMuted();
}
/**
 *  v1.7.6 获取全屏状态
 */
function isFullscreen() {
  livePlayerRef.value.isFullscreen();
}
/**
 * v1.7.6 触发全屏, 需要放置到交互事件回调中调用
 */
function requestFullscreen() {
  livePlayerRef.value.requestFullscreen();
}
/**
 * v2.1.9 退出全屏, 需要放置到交互事件回调中调用
 */
function exitFullscreen() {
  livePlayerRef.value.exitFullscreen();
}
/**
 * v2.1.9 触发全屏, 需要放置到交互事件回调中调用, 如果已处在全屏状态, 则退出全屏
 */
function toggleFullscreen() {
  livePlayerRef.value.toggleFullscreen();
}
/**
 * v1.7.7 获取音量
 */
function getVolume() {
  livePlayerRef.value.getVolume();
}
/**
 * v1.7.7 设置音量, 0~1
 */
function setVolume(val) {
  livePlayerRef.value.setVolume(val);
}
/**
 * v2.7.10 获取点播时长（秒）
 */
function getDuration() {
  livePlayerRef.value.getDuration();
}
</script>

<style scoped></style>

• 使用组件

 <div style="width: 500px; height: 400px">
    <SDVideoPlayer :url="url" ref="sdliveplayerRef"></SDVideoPlayer>
 </div>

 url: 'https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/hls/xgplayer-demo.m3u8'