LivePlayer H5播放器
简介
H5直播/点播
播放器,使用简单,功能强大, 免费使用
-
支持m3u8播放;
-
支持HTTP-FLV播放;
-
支持RTMP播放;
-
支持直播和点播播放;
-
支持播放器快照截图;
-
支持点播多清晰度播放;
-
支持全屏或比例显示;
-
自带的flash支持极速和流畅模式;
-
自带的flash支持HTTP-FLV播放;
-
自动检测IE浏览器兼容播放;
属性(Property)
-
video-url
视频流地址 String default ‘’
-
video-title
视频右上角显示的标题 String default ‘’
-
poster
视频封面图片 String default ‘’
-
autoplay
自动播放 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”
-
hasaudio
HTTP-FLV播放时使用:是否有音频,传递该属性用于处理只有音频或只有视频的源 Boolean,默认不配置自动判断
-
hasvideo
HTTP-FLV播放时使用:是否有视频,传递该属性用于处理只有音频或只有视频的源 Boolean,默认不配置自动判断
方法(Medthod)
-
getCurrentTime
获取当前播放时间进度, 同步返回播放时间进度数据
-
snap
外部 API 方式获取快照, 快照获取成功后, 触发 snapOutside Event
事件(Event)
-
message
触发通知消息, 参数: { type: ‘’, message: ‘’}
-
ended
播放结束, 参数: 无
-
timeupdate
进度更新, 参数: 当前时间进度
-
pause
暂停, 参数: 当前时间进度
-
play
播放, 参数: 当前时间进度
-
snapOutside
外部快照回调, 参数: 快照 Base64 数据
-
snapInside
内部快照回调, 由控制栏快照按钮触发, 参数: 快照 Base64 数据
安装使用(Install)
安装
npm install @liveqing/liveplayer
或 下载版本包
在 Vue 中使用
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 完成, 编辑你的 webpack.config.js
......
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/'}
]),
......
在 html 中引用 www 根目录 liveplayer-lib.min.js
编辑你的 Vue 组件
......
import LivePlayer from '@liveqing/liveplayer'
......
components: {
LivePlayer
}
......
<LivePlayer :videoUrl="videoUrl" fluent autoplay live stretch></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
<!DOCTYPE HTML>
<html>
<head>
<title>liveplayer</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
<script type="text/javascript" src="liveplayer-element.min.js"></script>
</head>
<body>
<live-player video-url="rtmp://live.hkstv.hk.lxdns.com/live/hks" live="true" stretch="true"></live-player>
<live-player video-url="http://live.hkstv.hk.lxdns.com/live/hks/playlist.m3u8" live="false" stretch="true"></live-player>
<live-player video-url="http://live.hkstv.hk.lxdns.com/flv/hks.flv" live="true" stretch="true"></live-player>
<live-player video-url="ws://192.168.1.65:3000/play?stream=rtsp://username:password@192.168.1.64:5504/Streaming/Channels/102"></live-player>
</body>
</html>
了解更多
LiveQing安防流媒体服务-QQ交流群:615081503
LiveGBS国标GB28181-QQ交流群:947137753
WEB:www.liveqing.com
Copyright © LiveQing.com 2016-2019
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)