LivePlayer H5直播/点播播放器安装与使用
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 trueloop
是否循环播放 Boolean default falselive
是否直播, 标识要不要显示进度条 Boolean default falsealt
视频流地址没有指定情况下, 视频所在区域显示的文字, 相当于 html img 标签的 alt 属性 String default ‘无信号’muted
是否静音 Boolean default falseaspect
视频显示区域的宽高比, fullscreen 即是全屏展示 String default ‘16:9’loading
指示加载状态, 支持 sync 修饰符fluent
流畅模式, Boolean default truestretch
是否拉伸, Boolean default falsetimeout
m3u8 加载超时(秒) Number default 20show-custom-button
是否在工具栏显示自定义按钮(极速/流畅, 拉伸/标准), Boolean default trueresolution
供选择的清晰度配置 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
......// 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/'}]),
......
在 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
LivePlayer H5直播/点播播放器安装与使用相关推荐
- 2020-12-14超强 H5直播/点播播放器LivePlayer
超强 H5直播/点播播放器LivePlayer 超强 H5直播/点播播放器LivePlayer 之前有给大家分享2个超棒的视频播放器.今天继续分享一款高质量的H5视频播放器插件LivePlayer. ...
- 永久免费H5直播点播播放器SkeyeWebPlayer.js实现webrtc流播放
永久免费H5直播点播播放器SkeyeWebPlayer.js实现webrtc流播放 1.H5播放webrtc,现在各大浏览器已经逐渐加大对WebRTC技术的支持,成都视开信息科技视频团队开发webrt ...
- VUE中集成H5直播点播播放器LivePlayer过程
基于VUE和webpck的前端工程 这里可以参考 https://github.com/livegbs/GB28181-Server 1.安装@liveqing/liveplayer npm -i @ ...
- H5直播/点播播放器
1.liveplayer 一款集rtmp.m3u8/HLS.flv于一身的H5视频流媒体播放器.使用简单,功能强大,免费使用. 文档链接 2.dplayer 一款开源的高质量H5视频播放器,支持发布弹 ...
- 网页直播/点播播放器支持WebRTC/http-flv/rtmp/m3u8等直播流播放
H5播放器 H5直播/点播播放器,使用简单,功能强大 支持WebRTC播放; 支持MP4播放; 支持m3u8/HLS播放; 支持HTTP-FLV/WS-FLV播放; 支持RTMP播放; 支持直播和点播 ...
- LivePlayerH5直播点播播放器配置如何配置SWF路径
配置SWF路径 vidojs 已经在 livepayer 依赖js中,无需再次引入 <script> videojs.options.flash.swf = "liveplaye ...
- liveplayer免费网页直播|点播播放器-页面动态多播放器添加代码示例
强大的网页直播/点播播放器,使用简单,功能强大, 终身免费使用 支持m3u8播放; 支持HTTP-FLV播放; 支持RTMP播放; 支持直播和点播播放; 支持播放器快照截图; 支持点播多清晰度播放; ...
- SkeyeWebPlayer免费网页RTSP/RTMP/FLV/HLS/H265/M3U8直播点播播放器-页面动态多播放器添加代码示例
强大的网页直播/点播播放器 SkeyeWebPlayer,使用简单,功能强大, 终身免费使用,支持Windows. Android.iOS平台. SkeyeWebPlayer.js H5播放器是由成都 ...
- 集RTMP, HLS, FLV, WebSocket 于一身的网页直播/点播播放器EasyPlayer.js引用videojs无法自动播放问题解决
EasyPlayer几乎涵盖了开发者所需的全部平台,尤其是在web端的EasyPlayer.js时遇到的播放器接入的问题,比如:不懂前端的js代码.没有公网服务器放置这些js脚本和网页.微信对接入IP ...
最新文章
- Network 之一 国际标准组织介绍、互联网/因特网、以太网概念区分、协议标准
- C++给函数传数组参数C++给函数传数组参数
- flash 火狐总是崩溃_win10系统火狐flash插件总是崩溃的解决方法
- correlated subquery and non-correlated subquery
- 【Elasticsearch】Curator 从入门到实战
- 【java】Java实现单向链表反转
- 不缓存调用js的方法
- 信息服务器恢复需要多少时间,云服务器灾难恢复的4个计划
- [转载] boost python numpy_boost.python 与 boost.numpy安装的一些注意事项
- namenode双机热备之操作实践
- 02.STM32开发板资源介绍与驱动
- scroll案例:带有动画的返回顶部
- DLP和DMD的区别
- 游戏里的答题都有哪些类型
- Excel 同一单元格显示不同颜色
- MySQL 序号(排序)函数:row_number() 、rank() 、 dense_rank()、ntile()
- WORD、WPS中插入公式后行距变大怎么办
- Android 线程与线程安全
- 服务器显示内存错误怎么办,服务器怎么查看内存故障
- springboot集成阿里云短信验证码