LivePlayer H5播放器 直播 视频

目录

LivePlayer H5播放器

属性(Property)

方法(Method)

事件(Event)

安装使用(Install)

安装

在 Vue 中使用

脱离 Vue 使用

常见问题

页面控制台 Console 错误提示

多分屏超过 6 路不能播放

如何自适应 div

播放器如何销毁

支持播放 RTSP 吗

简介

H5直播/点播播放器，使用简单，功能强大

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

属性(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 true

• aspect 视频显示区域的宽高比, fullscreen 即是全屏展示, String default '16:9'

• loading 指示加载状态, 支持 sync 修饰符, Boolean default false

• fluent 流畅模式, Boolean default true

• stretch 是否拉伸, Boolean default false

• timeout m3u8 加载超时(秒), Number default 20

• show-custom-button 是否在工具栏显示自定义按钮(极速/流畅, 拉伸/标准), Boolean default true

• hide-big-play-button 是否隐藏起播状态下的大播放按钮, Boolean default false

• hide-snapshot-button 是否隐藏 快照 按钮, Boolean default false

• hide-fullscreen-button 是否隐藏 全屏 按钮, Boolean default false

• hide-fluent-button 是否隐藏 极速/流畅 按钮, Boolean default false

• hide-stretch-button 是否隐藏 拉伸/标准 按钮, Boolean default false

• resolution HLS点播流播放时使用：需已有对应清晰度的HLS流，供选择的清晰度配置, 如 "yh,fhd,hd,sd" (说明：yh:原始分辨率，fhd:超清，hd:高清，sd:标清,不配置则不启用,需要提供多清晰度源，比如原画源是test.m3u8, 则hd源即为test_hd.m3u8), String default ''

• resolutiondefault HLS点播流播放时使用：默认播放的清晰度, String default 'hd'

• playback-rates HLS点播流播放时使用：倍速列表, Array default [0.5, 1, 2, 3]

• playback-rate HLS点播流播放时使用：默认倍速, Number default 1

• hasaudio HTTP-FLV播放时使用: 是否有音频，传递该属性用于处理只有音频或只有视频的源, Boolean 默认不配置自动判断

• hasvideo HTTP-FLV播放时使用: 是否有视频，传递该属性用于处理只有音频或只有视频的源, Boolean 默认不配置自动判断

• custom-buttonsv2.5.1 自定义工具栏按钮, 配置模板(按钮名称[:class名称]), 多个用英文逗号分隔, 示例：custom-buttons="对讲,配置:vjs-icon-cog", String default ''

• autofocusv2.5.2 是否自动获取焦点, Boolean default false

• dblclick-fullscreenv2.5.3 是否双击全屏, Boolean default true

• languagev2.6.2 语言(zh-CN/en), String 默认不配置自动判断

方法(Method)

• play 播放

• pause 暂停

• paused 获取暂停状态

• getCurrentTime 获取当前播放时间进度, 同步返回播放时间进度数据

• setCurrentTimev2.2.5 设置当前播放时间进度, 即 seek

• snap 外部 API 方式获取快照, 快照获取成功后, 触发 snapOutside Event

• getMuted 获取静音状态

• setMuted 设置静音状态

• isFullscreenv1.7.6 获取全屏状态

• requestFullscreenv1.7.6 触发全屏, 需要放置到交互事件回调中调用

• exitFullscreenv2.1.9 退出全屏, 需要放置到交互事件回调中调用

• toggleFullscreenv2.1.9 触发全屏, 需要放置到交互事件回调中调用, 如果已处在全屏状态, 则退出全屏

• getVolumev1.7.7 获取音量

• setVolumev1.7.7 设置音量, 0~1

• getDurationv2.7.10 获取点播时长（秒）

事件(Event)

• message m3u8 加载失败时触发通知消息, 参数: { type: '', message: ''}

• error 播放器出错回调, 参数: Error Object

• ended 播放结束, 参数: 无

• timeupdate 进度更新, 参数: 当前时间进度

• pause 暂停, 参数: 当前时间进度

• play 播放, 参数: 当前时间进度

• fullscreen 全屏状态改变, 参数：true/false

• snapOutside 外部快照回调, 参数: 快照 Base64 数据

• snapInside 内部快照回调, 由控制栏快照按钮触发, 参数: 快照 Base64 数据

• customButtonsv2.5.1 自定义按钮点击回调, 参数：名称

安装使用(Install)

安装

• vue2

  npm install @liveqing/liveplayer

  vue2 + vue-cli 集成 Gitee 示例

• vue3

  npm install @liveqing/liveplayer-v3

  vue3 + vite 集成 Gitee 示例

或 下载版本包

在 Vue 中使用

第一步 复制依赖文件（示例 通过 webpack 插件自动复制依赖）

copy node_modules/@liveqing/liveplayer/dist/component/liveplayer.swf 到 www 根目录

copy node_modules/@liveqing/liveplayer/dist/component/crossdomain.xml 到 www 根目录

copy node_modules/@liveqing/liveplayer/dist/component/liveplayer-lib.min.js 到 www 根目录

以上 copy 操作可以借助 webpack 插件完成

安装 copy-webpack-plugin 插件, npm install copy-webpack-plugin@4.6.0,

编辑你的 webpack.config.js

const CopyWebpackPlugin = require('copy-webpack-plugin');......// copy js lib and swf files to dist dirnew 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/'}]),
......

如果正在使用 vue2 + vue-cli, 编辑你的 vue.config.js

const CopyWebpackPlugin = require('copy-webpack-plugin');module.exports = {configureWebpack: {plugins: [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/'},])]}}

如果正在使用 vue3 + vite, 编辑你的 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'},]})]
})

vue2 + vue-cli 集成 LivePlayer H5 播放器 Gitee 示例

vue3 + vite 集成 LivePlayer H5 播放器 Gitee 示例

第二步 html模板中引入依赖js

在 html 中引用 www 根目录 liveplayer-lib.min.js

............

第三步 编辑你的 Vue 组件

......import LivePlayer from '@liveqing/liveplayer' // vue2// import LivePlayer from '@liveqing/liveplayer-v3' // vue3......components: {LivePlayer}
......

脱离 Vue 使用

copy node_modules/@liveqing/liveplayer/dist/element/liveplayer.swf 到 www 根目录

copy node_modules/@liveqing/liveplayer/dist/element/crossdomain.xml 到 www 根目录

copy node_modules/@liveqing/liveplayer/dist/element/liveplayer-element.min.js 到 www 根目录

在 html 中引用 www 根目录 liveplayer-element.min.js

HTML 集成 Demo, 需要将页面代码放到 HTTP Web Server 容器下

自定义叠加层

常见问题

页面控制台 Console 错误提示

• 提示： ReferenceError: videojs is not defined

  如果在 Vue 中使用，检查 html 是否正确引入依赖 js/liveplayer-lib.min.js

  如果脱离 Vue 使用，检查 html 是否正确引入依赖 liveplayer-element.min.js

• 提示： TypeError: The element or ID supplied is not valid. (videojs)

  检查 video-url 设置的播放地址 是否有效（可以用 VLC 播放尝试）

• 提示：Access to XMLHttpRequest at ... from origin .... has been blocked by CORS policy

  检查 video-url 设置的播放地址 是否允许跨域访问

多分屏超过 6 路不能播放

浏览器对同源 HTTP/1.x 连接的并发个数有限制, 几种方式规避这个问题：

1. 通过 WebRTC 协议访问直播流，如：播放 WebRTC 直播流

2. 通过 WebSocket 协议访问直播流，如：播放 WS-FLV 直播流

3. 开启 HTTPS, 通过 HTTPS 协议访问直播流

如何自适应 div

设置 aspect='fullscreen'，父级元素加上 position: relative

播放器如何销毁

将 video-url 属性置为空即销毁

支持播放 RTSP 吗

不能直接在浏览器中播放 RTSP， 推荐使用 LiveNVR 拉转 RTSP 成 WebRTC、FLV、WS_FLV、HLS、RTMP 来间接支持

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！