265player 中文文档教程

发布于 4年前 浏览 27 更新于 3年前

 # 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视频地址Stringnull
ID播放器实例的divID (必传)String-
callbackFun事件回调-
cbUserPtr自定义指针 (this的指向)this
decodeType解码类型auto
openAudio是否打开音频Booleanfalse
BigPlay是否开启大的播放按钮Booleanfalse
Height播放器尺寸是否继承父盒子的Booleanfalse

录像播放相关属性

注意: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结束加载动画-

更多流媒体音视频资源

EasyDarwin开源流媒体服务器:www.EasyDarwin.org

EasyDSS高性能互联网直播服务:www.EasyDSS.com

EasyNVR安防视频可视化服务:www.EasyNVR.com

EasyNVS视频综合管理平台:www.EasyNVS.com

EasyNTS云组网:www.EasyNTS.com

EasyGBS国标GB/T28181服务器:www.EasyGBS.com

EasyRTS应急指挥平台:www.EasyRTS.com

TSINGSEE青犀开放平台:open.TSINGSEE.com

Copyright © www.TSINGSEE.com Team 2012-2019

青犀TSINGSEE

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文