之前有给大家分享2个超棒的视频播放器 。今天继续分享一款高质量的H5视频播放器插件LivePlayer 。
文章插图
liveplayer 一款集m3u8、rtmp、hls、flv于一身的H5视频流媒体播放器 。使用简单，功能强大，免费使用 。
文章插图
功能特点
- 支持MP4播放;
- 支持m3u8/HLS播放;
- 支持HTTP-FLV/WS-FLV播放;
- 支持RTMP播放;
- 支持直播和点播播放;
- 支持播放器快照截图;
- 支持点播多清晰度播放;
- 支持全屏或比例显示;
- 自带的flash支持极速和流畅模式;
- 自带的flash支持HTTP-FLV播放;
- 自动检测IE浏览器兼容播放;
- 支持自定义叠加层;
文章插图
【超强 H5直播/点播播放器LivePlayer】
安装
$ npm i @liveqing/liveplayer -S使用插件<template><div class="live-player"><div style="width:640px;height:360px;"><LivePlayer videoUrl="assets/video.mp4" /><LivePlayerref="livePlayer":videoUrl="videoUrl"@snapOutside="snapOutside"fluentautoplaylivestretch/></div><ul><li><a @click="pause">暂停</a></li><li><a @click="play">播放</a></li><li><a @click="snap">截图数据</a></li></ul></div><template><script>import LivePlayer from '@liveqing/liveplayer'export default {components: {LivePlayer},data() {return {videoUrl: 'rtmp://live.hkstv.hk.lxDNS.com/live/hks2'}},methods: {// 播放play: function () {this.$refs.livePlayer.play();},// 暂停pause: function () {this.$refs.livePlayer.pause();},// 外部API获取快照snap: function () {this.$refs.livePlayer.snap();},// 外部快照回调snapOutside: function (snapData) {console.log(snapData)}}}</script>
文章插图
文章插图
属性参数
文章插图
方法
文章插图
事件
文章插图
文章插图
最后附上文档及示例地址
# 文档地址https://www.liveqing.com/docs/manuals/LivePlayer.html# vue-cli集成示例https://github.com/livegbs/liveplayer-vcok，就分享到这里 。如果大家有其它优秀播放器插件，欢迎留言交流！推荐阅读
- 沫子在哪个平台直播？
- 淘宝直播三大核心技术揭秘
- 海南岛名品苦丁甲天下,今日直播
- 求职|亚体直播—死马当活马医？韩媒建议国足坚持学国兵10年！
- 商人|百万粉丝的钓鱼大师，天天直播割韭菜，神经诱鱼小药纯属江湖骗术
- RTMP协议推流交互流程
- 拥有特殊能力的动物 能力超强的动物
- 观直播识小青柑,八方茶园龙罐天马小青柑
- 裁员|B站回应网传直播部门大规模裁员：业务状态很好、正在积极招聘
- 搜狐|互联网教父张朝阳称搜狐没有必要退市：讽刺我直播物理课没必要