H5直播、点播播放器LivePlayer

Vedu • 2020-09-02 17:06 • 资源分享 • 阅读 2360

liveplayer 一款集m3u8、rtmp、hls、flv于一身的H5视频流媒体播放器。使用简单，功能强大，免费使用。

功能特点

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

安装

$ npm i @liveqing/liveplayer -S

使用插件

<template>
  <div class="live-player">
    <div style="width:640px;height:360px;">
      <LivePlayer videoUrl="assets/video.mp4" />
            <LivePlayer 
        ref="livePlayer"  
        :videoUrl="videoUrl"
        @snapOutside="snapOutside" 
        fluent
        autoplay
        live
        stretch
      />
    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-vc

ok，就分享到这里。如果大家有其它优秀播放器插件，欢迎留言交流！

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/share/10744.html

H5直播、点播播放器LivePlayer

功能特点

安装

使用插件

相关推荐

发表评论