<返回更多

超强 H5直播/点播播放器LivePlayer

2020-09-01    
加入收藏

之前有给大家分享2个超棒的视频播放器。今天继续分享一款高质量的H5视频播放器插件LivePlayer。

超强 H5直播/点播播放器LivePlayer

 

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

超强 H5直播/点播播放器LivePlayer

 

功能特点

超强 H5直播/点播播放器LivePlayer

 

安装

$ 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>
超强 H5直播/点播播放器LivePlayer

 


超强 H5直播/点播播放器LivePlayer

 

属性参数

超强 H5直播/点播播放器LivePlayer

 

方法

超强 H5直播/点播播放器LivePlayer

 

事件

超强 H5直播/点播播放器LivePlayer

 


超强 H5直播/点播播放器LivePlayer

 

最后附上文档及示例地址

# 文档地址
https://www.liveqing.com/docs/manuals/LivePlayer.html
# vue-cli集成示例
https://github.com/livegbs/liveplayer-vc

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

声明:本站部分内容来自互联网,如有版权侵犯或其他问题请与我们联系,我们将立即删除或处理。
▍相关推荐
更多资讯 >>>