easyplayer 前端播放器

概要

需求是对接flv视频流，本来打算用b站的flv去做，做出来以后发现延迟高，加载慢，然后查找了一下，找到了这个。 

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

功能说明

•  支持 MSE H264和H265硬解码;
•  支持 WebCodec H264和H265硬解码;
•  支持 WASM H264和H265硬解码/软解码;
•  支持 m3u8/HLS (H265/H265)播放;
•  支持 Mpeg4格式(H264)播放;
•  支持 HTTP-FLV/WS-FLV (H265/H265)播放;
•  支持 HTTP-FMP4/WS-FMP4 (H265/H265)播放;
•  支持 WEBRTC(easy支持H264/H265、其他流媒体支持H264)播放;
•  支持 裸流(H264/H265) 播放;
•  支持 直播和点播播放;
•  支持 点播多清晰度播放;
•  支持 全屏或比例显示;
•  支持 电子放大;
•  支持 水印(动态水印、幽灵水印);
•  支持 显示上一个视频最后一帧;
•  支持 播放器快照截图;
•  支持 视频录制(WebM格式(音频+视频)、Mp4格式(视频),Flv格式(音频+视频));
•  支持 超时、断网重连、异常暂停播放等;
•  支持 解析视频i帧文件转base64;

仓库地址

https://github.com/EasyDarwin/EasyPlayer.js

使用方法

我是在vue集成的，在npm上没有找到这个库， 根据官方demo，在index.html里直接引入

，

然后直接在想用的页面使用即可

代码

// 方法
const onUse = (type) => {
  if (type == "hasAudio") {
    config.value.hasAudio = !config.value.hasAudio;
  } else {
    config.value.MSE = false;
    config.value.WCS = false;
    if (type == "MSE") config.value.MSE = true;
    if (type == "WCS") config.value.WCS = true;
  }
  if (isPlay.value) {
    onDestroy().then(() => {
      playCreate();

      onPlayer();
    });
  }
};

const onPlayer = () => {
  if (isUnmounted) return;
  isPlay.value = true;
  setTimeout(
    (url) => {
      if (isUnmounted) return;
      playerInfo.value &&
        playerInfo.value
          .play(url)
          .then(() => {})
          .catch((e) => {
            console.error(e);
          });
    },
    0,
    videoUrl.value
  );
};

const onDestroy = () => {
  return new Promise((resolve, reject) => {
    if (playerInfo.value) {
      playerInfo.value.destroy();
      playerInfo.value = null;
    }
    setTimeout(() => {
      if (isUnmounted) return;
      // @ts-ignore
      resolve();
    }, 100);
  });
};
const playCreate = () => {
  if (isUnmounted) return;
  var container = document.getElementById("player_box1");
  if (!container) return;
  // @ts-ignore
  var easyplayer = new EasyPlayerPro(container, {
    isLive: config.value.isLive, //默认 true
    bufferTime: 0.2, // 缓存时长
    stretch: false,
    MSE: config.value.MSE,
    WCS: config.value.WCS,
    hasAudio: config.value.hasAudio,
    watermark: { text: { content: "easyplayer-pro" }, right: 10, top: 10 },
  });

  easyplayer.on("fullscreen", function (flag) {
    console.log("is fullscreen", flag);
  });
  easyplayer.on("playbackRate", (rate) => {
    easyplayer.setRate(rate);
  });

  easyplayer.on("playbackSeek", (data) => {
    console.log("playbackSeek", data);
  });
  playerInfo.value = easyplayer;
};

然后组件加载时调用即可。

配置属性：

事件回调

使用方法：

//播放
EasyPlayrPro.on('play', function () {
    console.log('play');
})

记得文件要放在pubilc文件下 不然打包不进去。  

VUE组件版

使用起来更加方便，但是相比于上面那个方式延迟还是高了一些，不知道为什么。有懂得大佬指点一下非常感谢

地址

magic-easyplayer - npm

功能说明

• [x] *支持定制控制器；

• [x] *新增H265视频窗口适配[v1.1.0]；

• [x] 支持 MP4 播放；

• [x] 支持 m3u8/HLS 播放;

• [x] 支持 HTTP-FLV/WS-FLV 播放;

• [x] 支持直播和点播播放;

• [x] 支持播放器快照截图;

• [x] 支持点播多清晰度播放;

• [x] 支持全屏或比例显示;

• [x] 自动检测 IE 浏览器兼容播放;

• [x] 支持重连播放；

集成示例

• 使用方式

• [x] vue集成

  npm install magic-easyplayer --save

• Vue 集成调用

copy node_modules/magic-easyplayer/dist/crossdomain.xml 到 静态文件 根目录

copy node_modules/magic-easyplayer/dist/EasyPlayer-lib.min.js 到 静态文件 根目录

注意： 没有调用会出现无法加载对应插件的报错

在 html 中引用 dist/EasyPlayer-lib.min.js

H.265

copy node_modules/magic-easyplayer/dist/EasyPlayer.wasm 到 静态文件 根目录

具体可以到npm库里去看 

https://www.npmjs.com/package/magic-easyplayer