前端常用3个拉流插件

最新推荐文章于 2024-05-29 10:11:25 发布

@ZhaoYunyao

最新推荐文章于 2024-05-29 10:11:25 发布

阅读量786

点赞数

文章标签：前端 webpack javascript

本文链接：https://blog.csdn.net/weixin_44177413/article/details/129928494

版权

目前没找到能跑rtmp或rtsp数据流需要后端提供hls数据流

easyPlayer

首先npm安装EasyPlayer、copy-webpack-plugin ps：copy-webpack-plugin版本一定一定一定不能大于6.0，否则会出很多很多问题，具体原因可以去看这个插件的更新记录，或者百度

 npm install @easydarwin/easyplayer --save
 npm install copy-webpack-plugin@5.1.2 --save-dev

copy三个文件到静态目录下，这里通过copy-webpack-plugin插件来完成这个工作，vue.config.js中配置插件copy-webpack-plugin，这里的to根目录是静态目录（build时就是dist文件夹，./libs/EasyPlayer/就是dist/libs/EasyPlayer/) ps: 修改了vue.config.js，记得重新运行npm run dev哦，否则不生效的

const CopyWebpackPlugin = require('copy-webpack-plugin')
configureWebpack: { 
   
  plugins:[
        new CopyWebpackPlugin([
          { 
   
            from: 'node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer.swf',
            to: './libs/EasyPlayer/'
          },
          { 
   
            from: 'node_modules/@easydarwin/easyplayer/dist/component/crossdomain.xml',
            to: './libs/EasyPlayer/'
          },
          { 
   
            from: 'node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer-lib.min.js',
            to: './libs/EasyPlayer/'
          }
        ])
  ]
}

public/index.html中引入EasyPlayer-lib.min.js，文件位置取决于你怎么配置copy-webpack-plugin，我配置的to是./libs/EasyPlayer/，那么就引用./libs/EasyPlayer/EasyPlayer-lib.min.js
```
<!DOCTYPE html>
<html>
  <head>
    ...
    <script src="./libs/EasyPlayer/EasyPlayer-lib.min.js"></script>
    ...
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>
```
```
...
<easy-player :video-url="..."></easy-player>
...

import EasyPlayer from '@easydarwin/easyplayer'

...
components: { 
   
  EasyPlayer
}
...
```
GitHub - tsingsee/EasyPlayer.js: EasyPlayer.js H5播放器，是一款免费的能够同时支持HTTP、RTMP、HTTP-FLV、HLS（m3u8）直播与点播等多种协议，支持H.264、H.265、AAC等多种音视频编码格式，支持mse、asm、wasm等多种解码方式，支持Windows、Linux、Android、iOS全平台终端的H5播放器。EasyPlayer.js H5 Player support HTTP/RTMP/HTTP-FLV/HLS(m3u8) live streaming & vod streaming,support H.264/H.265/AAC video & audio codec,support mse/asm/wasm decode mode,support Windows/Linux/Android/iOS platform,EasyPlayer.js uses leading-edge technology.官方文档
xgplayer
```
npm install xgplayer
```
xgplayer使用hls数据需要下载xgplayer-hls.js

npm i xgplayer-hls.js

<template>
  <div id="mse"></div>
</template>

<script>
// import Player from "xgplayer";
import HlsJsPlayer from "xgplayer-hls.js"; //hls格式
// import FlvPlayer from 'xgplayer-flv'; // flv格式
export default {
  data() {
    return { player: null };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.$nextTick(() => {
        this.player = new HlsJsPlayer({
          id: "mse",//标签id
          url: "http://113.137.40.135:83/openUrl/NZMKC2Y/live.m3u8",//数据地址
          autoplay: true,
          poster: "", //视频封面
          playbackRate: [0.5, 1, 1.5, 2],
          //   cors: true, //请求是否跨域
        });
      });
    },
  },
};
</script>

<style>
</style>

西瓜播放器api官网

videojs

npm install video.js --save  
npm install videojs-flash --save //rtmp格式
//flv格式
npm install flv.js --save
npm install videojs-flvjs-es6 --save
//hls格式  video.js7.0以后版本默认支持hls（m3u8）格式  可以不安装，装了也可以使用
npm install videojs-contrib-hls --save

页面引入

<template>
    <video
      ref="videoPlayer"
      class="video-js vjs-default-skin vjs-big-play-centered"
      style="width: 500px;height: 500px"
    ></video>
  </template>
  
  <script>
  import videojs from "video.js";
  import "video.js/dist/video-js.css";
  import "videojs-flvjs-es6";
  import "videojs-flash";
  
  export default {
    props: {
      videoUrl: {
        type: String,
        default: "rtmp://liteavapp.qcloud.com/live/liteavdemoplayerstreamid"
      }
    },
    data() {
      return {
        videoPlayer: null
      };
    },
    mounted() {
      this.handelVideoUrl();
    },
    methods: {
      handelVideoUrl() {
        let options = {
          muted: true,
          controls: true,//进度条
          autoplay: false,//自动播放
          loop: true,//是否循环
          languages: {
            "zh-CN": require("video.js/dist/lang/zh-CN.json")
          },
          language: "zh-CN",
          preload: "auto"
        };
        const url = this.videoUrl.replace(/\s+/g, "");
        if (url.indexOf("rtmp") > -1) {
          //rtmp格式视频
          options = {
            ...options,
            techOrder: ["html5",  "flash"],// 兼容顺序
            sources: [{ src: this.videoUrl, type: "rtmp/flv" }]
          };
        } else if (url.lastIndexOf(".") > -1) {
          if (url.substring(url.lastIndexOf(".") + 1) === "flv") {
            //flv格式视频
            options = {
              ...options,
              techOrder: ["html5", "flvjs"],// 兼容顺序
              flvjs: {
                mediaDataSource: {
                  isLive: false,
                  cors: true,
                  withCredentials: false
                }
              },
              sources: [{ src: this.videoUrl, type: "video/x-flv" }]
            };
          } else {
            //其他格式视频
            options = {
              ...options,
              sources: [{ src: this.videoUrl, type: "application/x-mpegURL" }]
            };
          }
        }
  
        this.videoPlayer = videojs(this.$refs.videoPlayer, {
          ...options
        });
      }
    },
    destroyed() {
      if (this.videoPlayer) {
        this.videoPlayer.dispose();
      }
    }
  };
  </script>