网页直播-点播播放器支持WebRTC-http-flv-rtmp-m3u8等直播流播放

H5播放器

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

支持WebRTC播放;

支持MP4播放;

支持m3u8/HLS播放;

支持HTTP-FLV/WS-FLV播放;

支持RTMP播放;

支持直播和点播播放;

支持播放SEO靠我器快照截图;

支持点播多清晰度播放;

支持全屏或比例显示;

自带的flash支持极速和流畅模式;

自带的flash支持HTTP-FLV播放;

自动检测IE浏览器兼容播放;

支持自定义叠加层;

[外链图片转存失败,源SEO靠我站可能有防盗链机制,建议将图片保存下来直接上传(img-WLlkxk9y-1669170949599)(/images/liveplayer/rendering.jpg)]

属性(Property)

viSEO靠我deo-url 视频流地址, String default ‘’

video-title 视频右上角显示的标题, String default ‘’

poster 视频封面图片, String defauSEO靠我lt ‘’

autoplay 自动播放, Boolean default true

controls 显示播放器控制栏, Boolean default true

loop 是否循环播放, Boolean SEO靠我default false

live 是否直播, 标识要不要显示进度条, Boolean default false

alt 视频流地址没有指定情况下, 视频所在区域显示的文字, 相当于 html imgSEO靠我 标签的 alt 属性, String default ‘无信号’

muted 是否静音, Boolean default true

aspect 视频显示区域的宽高比, fullscreen 即是全屏展SEO靠我示, String default ‘16:9’

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

fluent 流畅模式, Boolean defauSEO靠我lt true

stretch 是否拉伸, Boolean default false

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

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

hide-big-play-button 是否隐藏起播状态下的大播放按钮, Boolean defauSEO靠我lt false

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

hide-fullscreen-button 是否隐藏 全屏 按钮, BooSEO靠我lean default false

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

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

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

rSEO靠我esolutiondefault HLS点播流播放时使用：默认播放的清晰度, String default ‘hd’

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

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

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

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

custom-buttons 自定义工具栏按钮, 配置模板(按钮名称[:class名称]), 多个用英文逗号分隔, 示例：custom-buttons=“对讲,配置:vjs-icon-cogSEO靠我”, String default ‘’

autofocus 是否自动获取焦点, Boolean default false

dblclick-fullscreen 是否双击全屏, Boolean defSEO靠我ault true

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

方法(Method)

play 播放

pause 暂停

paused 获取暂停状态

getCurrentTimeSEO靠我 获取当前播放时间进度, 同步返回播放时间进度数据

setCurrentTime 设置当前播放时间进度, 即 seek

snap 外部 API 方式获取快照, 快照获取成功后, 触发 snapOutsidSEO靠我e Event

getMuted 获取静音状态

setMuted 设置静音状态

isFullscreen 获取全屏状态

requestFullscreen 触发全屏, 需要放置到交互事件回调中调用

exitFuSEO靠我llscreen 退出全屏, 需要放置到交互事件回调中调用

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

getVolume 获取音量

seSEO靠我tVolume 设置音量, 0~1

事件(Event)

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

error 播放器出错回调, 参数: ESEO靠我rror Object

ended 播放结束, 参数: 无

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

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

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

fullscSEO靠我reen 全屏状态改变, 参数：true/false

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

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

customButtons 自定义按钮点击回调, 参数：名称

安装使用(Install)

安装

vue2

npm install @liveqing/liveplayer

vue2 + vueSEO靠我-cli 集成 Gitee 示例

vue3

npm install @liveqing/liveplayer-v3

vue3 + vite 集成 Gitee 示例

或 下载版本包

在 Vue 中使用

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

copy node_modules/@liveqing/liveplayer/dist/component/liveplayer.swf 到 wSEO靠我ww 根目录

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

copy node_modulSEO靠我es/@liveqing/liveplayer/dist/component/liveplayer-lib.min.js 到 www 根目录

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

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

编辑你的 webpack.config.js

const CopyWebpacSEO靠我kPlugin = require(copy-webpack-plugin);......// copy js lib and swf files to dist dirnew CopyWebpackSEO靠我Plugin([{ from: node_modules/@liveqing/liveplayer/dist/component/crossdomain.xml},{ from: node_modulSEO靠我es/@liveqing/liveplayer/dist/component/liveplayer.swf},{ from: node_modules/@liveqing/liveplayer/disSEO靠我t/component/liveplayer-lib.min.js, to: js/}]), ......

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

const CopyWebpackPlugin = require(copy-webpack-plugin);module.exports = {configureWebpack: {pluginSEO靠我s: [new CopyWebpackPlugin([{ from: node_modules/@liveqing/liveplayer/dist/component/crossdomain.xml}SEO靠我,{ from: node_modules/@liveqing/liveplayer/dist/component/liveplayer.swf},{ from: node_modules/@liveSEO靠我qing/liveplayer/dist/component/liveplayer-lib.min.js, to: js/},])]}}

如果正在使用 vue3 + vite, 编辑你的 vite.coSEO靠我nfig.js

import copy from rollup-plugin-copyexport default defineConfig({plugins: [vue(), copy({targetSEO靠我s: [{src: node_modules/@liveqing/liveplayer-v3/dist/component/liveplayer-lib.min.js, dest: public/jsSEO靠我},]})] })

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

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

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

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

<!DOCTYPE HTML> <html><head><titlSEO靠我e>template</title>......<script src="js/liveplayer-lib.min.js"></script><!-- 如果正在使用 vue-cli:<script SEO靠我src="<%= BASE_URL %>js/liveplayer-lib.min.js"></script>--></head><body>......</body> </html>SEO靠我 第三步 编辑你的 Vue 组件 ......import LivePlayer from @liveqing/liveplayer // vue2// importSEO靠我 LivePlayer from @liveqing/liveplayer-v3 // vue3......components: {LivePlayer} ......<LivePlSEO靠我ayer :videoUrl="videoUrl" fluent autoplay live stretch></LivePlayer>

脱离 Vue 使用

copy node_modules/@liveSEO靠我qing/liveplayer/dist/element/liveplayer.swf 到 www 根目录

copy node_modules/@liveqing/liveplayer/dist/eleSEO靠我ment/crossdomain.xml 到 www 根目录

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

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

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

<!DOCTYPE HTML> <html><head><title>liveplayer</title><meta charset="utf-8"><meta http-equSEO靠我iv="X-UA-Compatible" content="IE=edge,chrome=1"><meta content="width=device-width,initial-scale=1,maSEO靠我ximum-scale=1,user-scalable=no" name="viewport"><!-- 引用 liveplayer-element.min.js --><script type="tSEO靠我ext/javascript" src="liveplayer-element.min.js"></script></head><body><live-player id="player01" vidSEO靠我eo-url="rtmp://live.hkstv.hk.lxdns.com/live/hks" live="true" stretch="true"><div style="position:absSEO靠我olute;left:15px;top:15px;color:#FFF;">自定义叠加层</div></live-player><live-player video-url="http://live.SEO靠我hkstv.hk.lxdns.com/live/hks/playlist.m3u8" live="false" stretch="true"></live-player><live-player viSEO靠我deo-url="http://live.hkstv.hk.lxdns.com/flv/hks.flv" live="true" stretch="true"></live-player><scripSEO靠我t>window.onload = function () {// 页面加载完成以后执行// JavaScript 交互示例, 需要将页面代码放到 http web server 容器下, 通过浏览器SEO靠我 http 协议访问var player = document.getElementById(player01);player.addEventListener(snapOutside, evt =>SEO靠我 {console.log(获取快照 base64 数据, evt.detail[0]);});player.addEventListener(customButtons, function(evt)SEO靠我 {console.log(自定义按钮点击回调 按钮名称, evt.detail[0])});player.addEventListener(fullscreen, evt => {console.lSEO靠我og(fullscreen, evt.detail[0]);});var videoUrlBak = "";document.addEventListener("visibilitychange", SEO靠我() => {if (document.visibilityState === visible) {if(videoUrlBak) {console.log("标签页恢复可见, 继续播放...");pSEO靠我layer.setAttribute("video-url", videoUrlBak);}} else {console.log("标签页不可见, 停止播放...");videoUrlBak = pSEO靠我layer.getAttribute("video-url");player.setAttribute("video-url", "");}});setTimeout(() => {console.lSEO靠我og("快照, 回调 snapOutside...");player.getVueInstance().snap();console.log("静音...");player.getVueInstancSEO靠我e().setMuted(true);console.log("静音状态: " + player.getVueInstance().getMuted());console.log("暂停...");pSEO靠我layer.getVueInstance().pause();console.log("暂停状态: " + player.getVueInstance().paused());console.log(SEO靠我"全屏状态: " + player.getVueInstance().isFullscreen());//触发全屏, 需要放置到交互事件回调中//btn.onclick = () => { playeSEO靠我r.getVueInstance().requestFullscreen(); }player.getVueInstance().setMuted(false);console.log("音量: " SEO靠我+ player.getVueInstance().getVolume());player.getVueInstance().setVolume(0.5);console.log("音量1: " + SEO靠我player.getVueInstance().getVolume());player.getVueInstance().setVolume(0.3);console.log("音量2: " + plSEO靠我ayer.getVueInstance().getVolume());}, 3000);setTimeout(() => {console.log("放音...");player.getVueInstSEO靠我ance().setMuted(false);console.log("静音状态: " + player.getVueInstance().getMuted());console.log("播放...SEO靠我");player.getVueInstance().play();console.log("暂停状态: " + player.getVueInstance().paused());}, 6000);SEO靠我setTimeout(() => {console.log("切换媒体源...");player.setAttribute("video-url", "rtmp://live.hkstv.hk.lxdSEO靠我ns.com/live/hks2");}, 9000);}</script></body> </html>

常见问题

页面控制台 Console 错误提示

提示： ReferenceErroSEO靠我r: videojs is not defined

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

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

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

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

提示：Access to XMLHttpRequest at … from origin … has been blocked SEO靠我by CORS policy

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

多分屏超过 6 路不能播放

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

通过 WeSEO靠我bRTC 协议访问直播流，如：播放 WebRTC 直播流

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

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

如何自适应 div

设SEO靠我置 aspect=‘fullscreen’，父级元素加上 position: relative

播放器如何销毁

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

支持播放 RTSP 吗

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