@blacklol/265player

v1.0.0

Published

3 years ago

集播放http-flv/WS-FLV , hls, websocket 于一身的H5`视频直播/视频点播`播放器, 使用简单, 功能强大；

Downloads

0High
0Medium
0Low

 # EasyPlayer.js

简介

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

功能说明

[x] 支持 MP4 播放
[x] 支持 m3u8/HLS 播放;
[x] 支持 HTTP-FLV/WS-FLV 播放;
[x] 支持 H265 播放;
[x] 支持直播和点播播放;
[x] 支持全屏显示;
[x] 支持重连播放；

HTML 集成示例

使用方式
[x] 普通集成

copy EasyWasmPlayer.js 到项目中

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

在 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>Document</title>
    <script src="../dist/EasyWasmPlayer.js"></script>
</head>
<body>
    <div style="width:600px;height:400px;background-color:black;margin-left:200px">
        <div id="265Player">
        </div>
        <script>
            callbackfun = function (e) {
                console.log(e);
            }
            var 265Player = new WasmPlayer(null,'265Player'，callbackFun,{cbUserPtr:this, decodeType:"auto", openAudio:1, BigPlay:false, Height:true})
        </script>
    </div>
</body>

</html>

[x] vue集成

  npm install @easydarwin/easyplayer --save

Vue 集成调用

copy node_modules/@easydarwin/easyplayer/EasyWasmPlayer.js 到静态文件根目录

copy node_modules/@easydarwin/easyplayer/libDecoder.wasm 到项目 “根目录”

注意： 若出现libDecoder.wasm的文件错误是此文件路径不对

在 html 中引用 EasyWasmPlayer.js

demo

<!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>EasyPlayer-demo</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="./EasyWasmPlayer.js"></script>
  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but easynvr-token doesn't work properly without JavaScript
        enabled. Please enable it to continue.</strong
      >
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

[x] npm集成

......

 <div style="width:600px;height:400px;background-color:black;margin-left:200px">
    <div id="265Player">
   </div>
 </div>

...... ...... import EasyPlayer from '@easydarwin/easyplayer'; ......
components: { EasyPlayer }
mounted(){
   var 265Player = new WasmPlayer(null,'265Player'，this.callbackFun,{cbUserPtr:this, decodeType:"auto", openAudio:1, BigPlay:false, Height:true})
},
methods:{
    callbackfun = function (e) {
                console.log(e);
            }
}

实例化参数

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

| 参数 | 说明 | 类型 | 默认值 | | ------------------ | ------------------------------------------------ | -------------------------- | ------ | | url | 视频地址 | String | null | | ID | 播放器实例的divID (必传) | String | - | | callbackFun | 事件回调 | | - | | cbUserPtr | 自定义指针 (this的指向) | | this | | decodeType | 解码类型 | | auto | | openAudio | 是否打开音频 |Boolean | false | | BigPlay | 是否开启大的播放按钮 |Boolean | false | | Height | 播放器尺寸是否继承父盒子的 | Boolean | false |

录像播放相关属性

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

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

事件

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

简介