视频播放组件实战【LivePlayer H5播放器】

本文链接：https://blog.csdn.net/fei1234456/article/details/107016188

本文介绍如何使用LivePlayerH5播放器在Vue项目中实现视频播放功能，包括安装配置、组件化使用及实战代码示例。该播放器支持多种格式，如MP4、m3u8、HTTP-FLV等，且自带flash支持。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在公司项目开发中，有一个项目里面需要做一个视频播放的功能，播放方式是调用海康平台提供的接口获取流地址来进行视频的播放并且最重要的是需要支持flash。由于前端用的Vue，对比了几个，最后选择了LivePlayer H5播放器。

官网介绍：H5直播/点播播放器，使用简单，功能强大，免费使用。

官网地址：https://www.liveqing.com/docs/manuals/LivePlayer.html
github源码地址：https://github.com/livegbs/GB28181-Server

因为官网只是做了介绍，并没有具体的详细API，可以参考github源码，如果还不能解决问题，可以在官网加官方QQ群，会有专业人员帮忙解答。

有如下特点：

支持MP4播放；
支持m3u8/HLS播放;
支持HTTP-FLV/WS-FLV播放;
支持RTMP播放;
支持直播和点播播放;
支持播放器快照截图;
支持点播多清晰度播放;
支持全屏或比例显示;
自带的flash支持极速和流畅模式;
自带的flash支持HTTP-FLV播放;
自动检测IE浏览器兼容播放;
支持自定义叠加层;v1.7.9

在这里插入图片描述
属性(Property)

video-url：视频流地址 String default ‘’
video-title：视频右上角显示的标题 String default ‘’
poster：视频封面图片 String default ‘’
autoplay：自动播放 Boolean default true
controls 显示播放器控制栏 Boolean default true
loop 是否循环播放 Boolean default false
live 是否直播, 标识要不要显示进度条 Boolean default false
alt 视频流地址没有指定情况下, 视频所在区域显示的文字, 相当于 html img 标签的 alt 属性 String default ‘无信号’
muted 是否静音 Boolean default false
aspect 视频显示区域的宽高比, fullscreen 即是全屏展示 String default ‘16:9’
loading 指示加载状态, 支持 sync 修饰符
fluent 流畅模式, Boolean default true
stretch 是否拉伸, Boolean default false
timeout m3u8 加载超时(秒) Number default 20
show-custom-button 是否在工具栏显示自定义按钮(极速/流畅, 拉伸/标准), Boolean default true
resolution 供选择的清晰度配置 String 如 “yh,fhd,hd,sd” ( 说明：yh:原始分辨率，fhd:超清，hd:高清，sd:标清,不配置则不启用,需要提供多清晰度源，比如原画源是test.m3u8，则hd源即为test_hd.m3u8 )
resolutiondefault 默认播放的清晰度 String “hd”
playback-rates 倍速列表, Array default [0.5, 1, 2, 3]
playback-rate 默认倍速, Number default 1
hasaudio HTTP-FLV播放时使用:是否有音频，传递该属性用于处理只有音频或只有视频的源 Boolean，默认不配置自动判断
hasvideo HTTP-FLV播放时使用:是否有视频，传递该属性用于处理只有音频或只有视频的源 Boolean，默认不配置自动判断

方法(Medthod)

play 播放
pause 暂停
paused 获取暂停状态
getCurrentTime 获取当前播放时间进度, 同步返回播放时间进度数据
snap 外部 API 方式获取快照, 快照获取成功后, 触发 snapOutside Event
getMuted 获取静音状态
setMuted 设置静音状态
isFullscreen v1.7.6 获取全屏状态
requestFullscreen v1.7.6 触发全屏, 需要放置到交互事件回调中调用, 如果已处在全屏状态, 则退出全屏
getVolume v1.7.7 获取音量
setVolumev1.7.7 设置音量, 0~1

事件(Event)

message m3u8 加载失败时触发通知消息, 参数: { type: ‘’, message: ‘’}
error 播放器出错回调, 参数: Error Object
ended 播放结束, 参数: 无
timeupdate 进度更新, 参数: 当前时间进度
pause 暂停, 参数: 当前时间进度
play 播放, 参数: 当前时间进度
snapOutside 外部快照回调, 参数: 快照 Base64 数据
snapInside 内部快照回调, 由控制栏快照按钮触发, 参数: 快照 Base64 数据

安装使用(Install)

一、安装：npm install @liveqing/liveplayer

二、编辑webpack.xxx.config.js：

const CopyWebpackPlugin = require('copy-webpack-plugin');

......
    // copy js lib and swf files to dist dir
    new CopyWebpackPlugin([
        { from: 'node_modules/@liveqing/liveplayer/dist/component/crossdomain.xml'},
        { from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer.swf'},
        { from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer-lib.min.js', to: 'js/'}
    ]),
......

注意：本地开发的配置文件和生产环境的都要配置。

三、引入依赖js

在index.html中引入：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="renderer" content="webkit">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>xxx</title>
	</head>
  ...
  <script type="text/javascript" src="./js/liveplayer-lib.min.js"></script>
  ...
	<body>
		...
	</body>
</html>

四、编辑 Vue 组件

......

import LivePlayer from '@liveqing/liveplayer'

......
  components: {
    LivePlayer
  }
......

<LivePlayer :videoUrl="videoUrl" fluent autoplay live stretch></LivePlayer>

实战：播放器组件化

<template>
  <div style="border:#a8cae5 1px solid;">
    <el-row >
      <el-col :span="5" style="height: 25px">
        窗口{{rowIdx*winNum + colIdx + 1}}：{{cameraName}}
      </el-col>
      <el-col v-if="isShowTab" :span="19-winNum">
        <el-radio v-if="isShowTab" v-model="protocol" label="hls">HLS流</el-radio>
        <el-radio v-if="isShowTab" v-model="protocol" label="rtmp">RTMP流</el-radio>
      </el-col>
      <el-col v-if="isShowTab" :span="winNum">
        <el-button size="mini" @click="close">关闭</el-button>
      </el-col>
    </el-row>

    <LivePlayer :cameraId="cameraId"
                :video-url='videoUrl'
                :video-title="videoTitle"
                muted live loading stretch resolution='hd,sd'
                v-loading="bLoading"
                element-loading-background="#000"
                :loading.sync="bLoading"></LivePlayer>

    <div :id="showPTZ" v-if="isShowTab" style="position: absolute;z-index:9999;" :style="{top:ptzTop + '%'}">
      <div class="showPTZ left-panel-accordion-content  ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" style="height: 0px; overflow: auto; display: block;" role="tabpanel" _mask_="1">
        <i :class="iconClass" @click="chgTabState"></i>
        <div class="ptz-panal-up">
          <div id="ptz-speed-container" class="ptz-panal-up-left">
            <div id="ptz-speed" class="ptz-speed"></div>
            <div id="ptz-speed-high" class="ptz-speed-high" style="height: 32.5px; top: 39.5px;"></div>
          </div>
          <div class="ptz-panal-up-right" >
            <span id="ptz-auto" class="ptz-auto direction" title="自动扫描"></span>
            <span @click="controlPtz('UP')" id="ptz-up" class="ptz-up direction" title="上移" ctrlcmd="UP"></span>
            <span @click="controlPtz('DOWN')" id="ptz-down" class="ptz-down direction" title="下移" ctrlcmd="DOWN"></span>
            <span @click="controlPtz('LEFT')" id="ptz-left" class="ptz-left direction" title="左移" ctrlcmd="LEFT"></span>
            <span @click="controlPtz('RIGHT')" id="ptz-right" class="ptz-right direction" title="右移" ctrlcmd="RIGHT"></span>
            <span @click="controlPtz('LEFT_UP')" id="ptz-up-left" class="ptz-up-left direction" title="左上移动" ctrlcmd="LEFT_UP"></span>
            <span @click="controlPtz('RIGHT_UP')" id="ptz-up-right" class="ptz-up-right direction" title="右上移动" ctrlcmd="RIGHT_UP"></span>
            <span @click="controlPtz('LEFT_DOWN')" id="ptz-down-left" class="ptz-down-left direction" title="左下移动" ctrlcmd="LEFT_DOWN"></span>
            <span @click="controlPtz('RIGHT_DOWN')" id="ptz-down-right" class="ptz-down-right direction" title="右下移动" ctrlcmd="RIGHT_DOWN"></span>
            <span @click="controlPtz('ZOOM_IN')" id="ptz-zoomin" class="ptz-zoomin ptz-up-right-btn" title="变大焦距" ctrlcmd="ZOOM_IN"><span class="icon"></span></span>
            <span @click="controlPtz('ZOOM_OUT')" id="ptz-zoomout" class="ptz-zoomout ptz-up-right-btn" title="变小焦距" ctrlcmd="ZOOM_OUT"><span class="icon"></span></span>
            <span @click="controlPtz('13')" id="ptz-focusin" class="ptz-focusin ptz-up-right-btn" title="前调焦点" ctrlcmd="13"><span class="icon"></span></span>
            <span @click="controlPtz('FOCUS_FAR')" id="ptz-focusout" class="ptz-focusout ptz-up-right-btn" title="后调焦点" ctrlcmd="FOCUS_FAR"><span class="icon"></span></span>
            <span @click="controlPtz('IRIS_ENLARGE')" id="ptz-irisout" class="ptz-irisout ptz-up-right-btn" title="扩大光圈" ctrlcmd="IRIS_ENLARGE"><span class="icon"></span></span>
            <span @click="controlPtz('IRIS_REDUCE')" id