easywasmplayer

EasyPlayer.js H5播放器,是一款能够同时支持HTTP、RTMP、HTTP-FLV、HLS(m3u8)视频直播与视频点播等多种协议,支持H.264、H.265、AAC等多种音视频编码格式,支持mse、wasm等多种解码方式,支持Windows、Linux、Android、iOS全平台终端的H5播放器。

Usage no npm install needed!

<script type="module">
  import easywasmplayer from 'https://cdn.skypack.dev/easywasmplayer';
</script>

README

EasyPlayer.js

简介

EasyPlayer.js H5播放器,是一款能够同时支持HTTP、RTMP、HTTP-FLV、HLS(m3u8)视频直播与视频点播等多种协议,支持H.264、H.265、AAC等多种音视频编码格式,支持mse、wasm等多种解码方式,支持Windows、Linux、Android、iOS全平台终端的H5播放器。

功能说明

  • 支持 HTTP-MP4 播放

  • 支持 m3u8/HLS 播放;

  • 支持 HTTP-FLV/WS-FLV 播放;

  • 支持 H265 播放;

  • 支持直播和点播播放;

  • 支持全屏显示;

  • 支持重连播放;


集成使用示例

  • 普通集成
1.引入

copy EasyWasmPlayer.js 到项目中

copy libDecoder.wasm到项目或者www的根目录(一定要根目录)

2.在 html 中引用 EasyWasmPlayer.js
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EasyWasmPlayer-Demo</title>
    <script src="./EasyWasmPlayer.js"></script>
    <style>
      .box {
        width:600px;
        height:400px;
      }
    </style>
</head>
<body>
    <div class="box">
      <div id="Player"></div>
    </div>
    <script>
      // 实例化播放器
      var Player = new WasmPlayer(null,'Player',callbackFun,{cbUserPtr:this, decodeType:"auto", openAudio:1, BigPlay:false, Height:true});
      // 调用播放
      Player.play('url', 1)
    </script>
</body>

</html>

  • VUE集成
1.下载
  npm install @easydarwin/easywasmplayer --save
2.拷贝

Vue-Cli3.0 环境下

copy node_modules/@easydarwin/easywasmplayer/EasyWasmPlayer.js 到项目public目录下

copy node_modules/@easydarwin/easywasmplayer/libDecoder.wasm 到项目public目录下

3.在项目public目录index.html引入
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title>EasyWasmPlayer-Demo</title>
    <script src="./EasyWasmPlayer.js"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>
4.VUE中使用
<template>
  <div class="box">
    <div id="Player"></div>
  </div>
</template>
<script>

export default {
  data() {
    return {
      player: '',
      url: 'http://127.0.0.1:10080/fvod/PnCsnxdMg/video.m3u8'
    }
  },
  mounted() {
    // 实例化播放器
    this.player = new WasmPlayer(null, 'Player', this.callbackfun)
    // 调用播放
    this.player.play(this.url, 1)
  },
  methods: {
    callbackfun(e) {
      console.log('callbackfun', e);
    }
  }  
}
</script>
<style>
  .box {
    width:600px;
    height:400px;
  }
</style>

注意: 若出现libDecoder.wasm的文件报404错误,提示找不到libDecoder.wasm文件,一定要排查是否存放在项目的根目录。

实例化参数

var player = new wasmPlayer(url,ID,callbackFun,{cbUserPtr:this,cfKbs: fn, decodeType:"auto" or "soft", openAudio"1" or "0", BigPlay"true" or "false", Height:" true" or "false, HideKbs:" true" or "false});

参数 说明 类型 默认值
url 视频地址 String null
ID 播放器实例的divID(必传) String -
decodeType 解码类型(auto:默认,soft:强制H265解码) String auto
openAudio 是否打开音频 Boolean false
BigPlay 是否开启大的播放按钮 Boolean false
Height 播放器尺寸是否继承父盒子的 Boolean false
HideKbs 是否隐藏实时码率 Boolean false
cfKbs 码率速率回调(averageKbps:平均传输速率,averageKbs: 平均码率,currentKbps: 当前传输速率,currentKbs: 当前码率) function -
callbackFun 事件回调 function -
cbUserPtr 自定义指针(this的指向) this

录像播放相关属性

注意:currentTime属性只在播放录像m3u8 有结束标记(#EXT-X-ENDLIST)的的流时生效。

play(url,autoplay,currentTime) | 属性 | 说明 | 类型 | 默认值 | | -------- | --------------------------------------------- | ------- | ------------------| | url | 播放流地址 | String | - | | autoplay | 是否自动播放(0:默认,1:自动播放) | Number | 0 | | currentTime| 视频开始时间(换算成秒) | Number | 0 |

事件

方法名 说明 参数
play 播放事件 url:'流地址',autoplay: '自动播放',currentTime:'开始时间'
pause 播放暂停 -
destroy 停止播放 -
openAudio 打开声音 -
closeAudio 关闭声音 -
startLoding 开始加载动画 -
endLoding 结束加载动画 -
fullScreen 开启或退出全屏 -

✈ 更多视频解决方案资源汇总

© TSINGSEE Team:http://www.tsingsee.com

青犀TSINGSEE