Vue2-接入H5直播点播播放器(flv\mp4)

简单介绍两个可以在H5上播放视频流的播放器

一、LivePlayer H5直播|点播播放器

H5直播/点播播放器，使用简单，功能强大，支持WebRTC、MP4、m3u8/HLS、HTTP-FLV/WS-FLV、RTMP播放等；支持直播和点播播放，自动检测IE浏览器兼容播放；具体详见官方文档。

1.0、第一步接入SDK（我使用的是Vue2 cli)

npm install @liveqing/liveplayer

Vue2 cli创建.png 按照上面命令集成.png

1.1、第二步，这一步很关键(非常重要，已踩坑)

这一步很关键(非常重要，已踩坑).png 这一步很关键.png 这一步很关键01.png

以上截图我怕文字表达不清，只能截图描述细致一些，都是坑，踩的很平了。接下来在这个public目录下的index.html里面加入刚才粘贴的文件路径

<script src="./liveplayer-component.min.js"></script>

加入刚才粘贴的文件路径.png 加入刚才粘贴的文件路径01.png

完成这些基本就没问题了，纳爱斯！

1.2、第三步，就是使用它了

引入@liveqing/liveplayer

<script>
import LivePlayer from '@liveqing/liveplayer'
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  components: {
     LivePlayer,   
  },
  computed:{
    mp4URL() {
        return "http://999.222.444.533/sdk/file/2022-11-29/15047_20221129_103705140/CHN06.mp4"
    },
    flvURL() {     
        return "http://live.hkstv.hk.lxdns.com/flv/hks.flv"
    },
  },
  methods: {
      snapOutside: function (snapData) {
         alert(snapData)
      },

  },

}
</script>

页面展示代码

<template>
  <div class="hello">
    <div class="shipinone">
      <h1>flv直播</h1>
      <LivePlayer class="videostr1" @snapOutside="snapOutside" ref="player2" :videoUrl="flvURL" live />
   </div>
  </div>
</template>

CSS代码

<style scoped>
.hello{
  display: align;
  background-color: blue;
}
.shipinone{
  display: flex;
  height: 400px;
}

.videostr1{
  margin-top: 80px;
  margin-left: 70px;
  width:500px;
  height:390px;
}
</style>

以上代码均是全部(代码里所含链接发布时全改为无效链接) flv视频直播展示.png

<template>
  <div class="hello">
    <div class="shipinone">
      <h1>点播演示</h1>
      <LivePlayer class="videostr1" :videoUrl="mp4URL"/>
   </div>
  </div>
</template>

点播演示.png 这是实现的第一个播放器效果实现。上面例子代码

二、EasyPlayer.js播放器

集播放http-flv, hls, websocket 于一身的H5视频直播/视频点播播放器, 使用简单, 功能强大；EasyPlayer.js文档地址

2.0、第一步接入SDK（我使用的是Vue2 cli-同上)

npm install @easydarwin/easyplayer --save

npm install @easydarwin/easyplayer --save.png

2.1、第二步，这一步很同样很关键不要马虎，要细致

不要马虎，要细致.png public文件夹下.png 接下来操作index.html 引入复制文件路径.png

<script src="./EasyPlayer-lib.min.js"></script>
<script src="./EasyPlayer.wasm"></script>

到这里最重要的步骤完成，接下里就不会出错了

2.2、第三步，同样就是使用它了

直接上代码

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <EasyPlayer id="EasyPlayer" videoUrl="http://192.168.100.53:8080/live/ch04_1.flv" fluent>
    </EasyPlayer>
  </div>
</template>

<script>
import EasyPlayer from '@easydarwin/easyplayer'
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      
    }
  },
  components: {
    EasyPlayer
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello{
  display: align;
  background-color: blue;
}

#EasyPlayer {
  width: 750px;
  height: 500px;
  margin: 0 auto;
}

</style>

上效果展示一下

上效果展示一下.png
截止到今天只用了这两个播放器，其他的播放器没用过了，示例01LivePlaye的播放器相对于示例02EasyPlayer播放器会有延时1秒钟，EasyPlayer看文档说是很好用的，没有延时，比LivePlaye好用，值得推荐！！！EasyPlayer示例代码