tungstenowl/EasyPlayerJs
1
0
Fork 0
mirror of https://github.com/hevin-lee/EasyPlayerJs.git synced 2026-06-15 06:10:01 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
06a4259bd7fe0b4932b27e570214aa5e2bee5008
EasyPlayerJs/README.md

203 lines
8.7 KiB
Markdown
Raw Normal View History

update README.md
2020-09-22 10:54:37 +08:00
# EasyPlayer.js
submit
2019-04-16 09:48:35 +08:00
添加如何使用说明
2019-07-11 09:04:08 +08:00
## 简介
submit
2019-04-16 09:48:35 +08:00
update README.md
2020-09-22 10:54:37 +08:00
EasyPlayer.js H5播放器，是一款能够同时支持HTTP、RTMP、HTTP-FLV、HLS（m3u8）视频直播与视频点播等多种协议，支持H.264、H.265、AAC等多种音视频编码格式，支持mse、wasm等多种解码方式，支持Windows、Linux、Android、iOS全平台终端的H5播放器。
Update README.md
2020-08-16 13:09:40 +08:00
submit
2019-04-16 09:48:35 +08:00
添加如何使用说明
2019-07-11 09:04:08 +08:00
## 功能说明
submit
2019-04-16 09:48:35 +08:00
Update README.md
2020-08-16 13:09:40 +08:00
- [x] 支持 HTTP-MP4 播放
submit
2019-04-16 09:48:35 +08:00
update README.md
2019-08-02 11:37:22 +08:00
- [x] 支持 m3u8/HLS 播放;
submit
2019-04-16 09:48:35 +08:00
update README.md
2019-08-02 11:37:22 +08:00
- [x] 支持 HTTP-FLV/WS-FLV 播放;
submit
2019-04-16 09:48:35 +08:00
提交EasyWasmPlayerH265新播放器基础代码
2020-08-10 11:38:48 +08:00
- [x] 支持 H265 播放;
submit
2019-04-16 09:48:35 +08:00
update README.md
2019-08-02 11:37:22 +08:00
- [x] 支持直播和点播播放;
submit
2019-04-16 09:48:35 +08:00
提交EasyWasmPlayerH265新播放器基础代码
2020-08-10 11:38:48 +08:00
- [x] 支持全屏显示;
update README.md
2019-08-02 11:37:22 +08:00
- [x] 支持重连播放；
submit
2019-04-16 09:48:35 +08:00
update README.md
2020-09-22 10:34:51 +08:00
<br/>
submit
2019-04-16 09:48:35 +08:00
update README.md
2020-09-22 10:34:51 +08:00
## 集成使用示例
修改README.md
2019-08-02 13:43:43 +08:00
update README.md
2020-09-22 10:34:51 +08:00
- **普通集成**
修改README.md
2019-08-02 13:43:43 +08:00
update README.md
2020-09-22 10:34:51 +08:00
##### 1.引入
提交EasyWasmPlayerH265新播放器基础代码
2020-08-10 11:38:48 +08:00
copy EasyWasmPlayer.js 到项目中
修改README.md
2019-08-02 13:43:43 +08:00
提交EasyWasmPlayerH265新播放器基础代码
2020-08-10 11:38:48 +08:00
copy libDecoder.wasm到项目或者www的根目录（一定要根目录）
update README.md
2020-09-22 10:34:51 +08:00
##### 2.在 html 中引用 EasyWasmPlayer.js
修改README.md
2019-08-02 13:43:43 +08:00
```html
<!DOCTYPE html>
提交EasyWasmPlayerH265新播放器基础代码
2020-08-10 11:38:48 +08:00
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
update README.md
2020-09-22 10:34:51 +08:00
<title>EasyWasmPlayer-Demo</title>
<script src="./EasyWasmPlayer.js"></script>
<style>
.box {
width:600px;
height:400px;
}
</style>
提交EasyWasmPlayerH265新播放器基础代码
2020-08-10 11:38:48 +08:00
</head>
<body>
update README.md
2020-09-22 10:34:51 +08:00
<div class="box">
<div id="Player"></div>
提交EasyWasmPlayerH265新播放器基础代码
2020-08-10 11:38:48 +08:00
</div>
update README.md
2020-09-22 10:34:51 +08:00
<script>
// 实例化播放器
var Player = new WasmPlayer(null,'Player'，callbackFun,{cbUserPtr:this, decodeType:"auto", openAudio:1, BigPlay:false, Height:true});
// 调用播放
Player.play('url', 1)
</script>
提交EasyWasmPlayerH265新播放器基础代码
2020-08-10 11:38:48 +08:00
</body>
修改README.md
2019-08-02 13:43:43 +08:00
</html>
```
update README.md
2020-09-22 10:34:51 +08:00
<br/>
修改README.md
2019-08-02 13:43:43 +08:00
update README.md
2020-09-22 10:34:51 +08:00
- **VUE集成**
submit
2019-04-16 09:48:35 +08:00
update README.md
2020-09-22 10:34:51 +08:00
##### 1.下载
添加如何使用说明
2019-07-11 09:04:08 +08:00
```
Fix the style of THE MD document
2020-08-13 18:56:27 +08:00
npm install @easydarwin/easywasmplayer --save
submit
2019-04-16 09:48:35 +08:00
```
update README.md
2020-09-22 10:34:51 +08:00
##### 2.拷贝
Vue-Cli3.0 环境下
submit
2019-04-16 09:48:35 +08:00
update README.md
2020-09-22 10:34:51 +08:00
copy node_modules/@easydarwin/easywasmplayer/EasyWasmPlayer.js 到项目public目录下
submit
2019-04-16 09:48:35 +08:00
update README.md
2020-09-22 10:34:51 +08:00
copy node_modules/@easydarwin/easywasmplayer/libDecoder.wasm 到项目public目录下
submit
2019-04-16 09:48:35 +08:00
update README.md
2020-09-22 10:34:51 +08:00
##### 3.在项目public目录index.html引入
添加如何使用说明
2019-07-11 09:04:08 +08:00
```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" />
update README.md
2020-09-22 10:34:51 +08:00
<title>EasyWasmPlayer-Demo</title>
提交EasyWasmPlayerH265新播放器基础代码
2020-08-10 11:38:48 +08:00
<script src="./EasyWasmPlayer.js"></script>
添加如何使用说明
2019-07-11 09:04:08 +08:00
</head>
<body>
<div id="app"></div>
</body>
</html>
submit
2019-04-16 09:48:35 +08:00
```
提交EasyWasmPlayerH265新播放器基础代码
2020-08-10 11:38:48 +08:00
update README.md
2020-09-22 10:34:51 +08:00
##### 4.VUE中使用
```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文件，一定要排查是否存放在项目的根目录。
提交EasyWasmPlayerH265新播放器基础代码
2020-08-10 11:38:48 +08:00
## 实例化参数
Fix audio parameters And Add Rate display
2020-09-29 18:13:12 +08:00
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 |
提交EasyWasmPlayerH265新播放器基础代码
2020-08-10 11:38:48 +08:00
### 录像播放相关属性
#### 注意：currentTime属性只在播放录像m3u8 有结束标记（#EXT-X-ENDLIST）的的流时生效。
play(url,autoplay,currentTime)
Fix audio parameters And Add Rate display
2020-09-29 18:13:12 +08:00
| 属性 | 说明 | 类型 | 默认值 |
| -------- | -------------------------------------- | ------- | ------------------|
| url | 播放流地址 | String | - |
| autoplay | 是否自动播放(0：默认，1：自动播放) | Number | 0 |
| currentTime| 视频开始时间(换算成秒) | Number | 0 |
提交EasyWasmPlayerH265新播放器基础代码
2020-08-10 11:38:48 +08:00
## 事件
update README.md
2020-09-22 10:34:51 +08:00
| 方法名 | 说明 | 参数 |
| ---------- | ------------ | --------------------- |
| play | 播放事件 | url:'流地址',autoplay: '自动播放',currentTime:'开始时间' |
| pause | 播放暂停 | - |
| destroy | 停止播放 | - |
| openAudio | 打开声音 | - |
| closeAudio | 关闭声音 | - |
| startLoding | 开始加载动画 | - |
| endLoding | 结束加载动画 | - |
| fullScreen | 开启或退出全屏 | - |
Expose the full screen method
2020-09-07 15:21:57 +08:00
提交EasyWasmPlayerH265新播放器基础代码
2020-08-10 11:38:48 +08:00
Update README.md
2020-08-23 22:50:30 +08:00
<br/>
update README.md
2019-08-02 11:37:22 +08:00
Update README.md
2020-08-23 22:47:35 +08:00
### ✈ 更多视频解决方案资源汇总
update README.md
2019-08-02 11:37:22 +08:00
Update README.md
2020-08-23 22:47:35 +08:00
- 流媒体技术：<br/>
© EasyDarwin开源流媒体服务器：<a href="http://www.easydarwin.org" target="_blank" title="EasyDarwin开源流媒体服务器">http://www.easydarwin.org</a><br/>
© TSINGSEE视频开放平台：<a href="http://open.tsingsee.com" target="_blank" title="TSINGSEE青犀视频开放平台">http://open.tsingsee.com</a><br/>
update README.md
2019-08-02 11:37:22 +08:00
Update README.md
2020-08-23 22:47:35 +08:00
- 视频云服务：<br/>
© EasyDSS互联网视频云服务：<a href="http://www.easydss.com" target="_blank" title="EasyDSS互联网视频云服务">http://www.easydss.com</a><br/>
© EasyCVR安防视频云服务：<a href="http://www.easycvr.com" target="_blank" title="EasyCVR安防视频云服务">http://www.easycvr.com</a><br/>
© EasyGBS国标视频云服务：<a href="http://www.easygbs.com" target="_blank" title="EasyGBS国标视频云服务">http://www.easygbs.com</a><br/>
© EasyRTC在线视频会议平台：<a href="http://www.easyrtc.cn" target="_blank" title="EasyRTC在线视频会议平台">http://www.easyrtc.cn</a><br/>
© EasyRTS即时通信云服务：<a href="http://www.easyrts.com" target="_blank" title="EasyRTS即时通信云服务">http://www.easyrts.com</a><br/>
update README.md
2019-08-02 11:37:22 +08:00
Update README.md
2020-08-23 22:47:35 +08:00
- 边缘计算：<br/>
© EasyNVR视频边缘计算网关：<a href="http://www.easynvr.com" target="_blank" title="EasyNVR视频边缘计算网关">http://www.easynvr.com</a><br/>
© EasyNTS上云网关：<a href="http://www.easynts.com" target="_blank" title="EasyNTS上云网关">http://www.easynts.com</a><br/>
update README.md
2019-08-02 11:37:22 +08:00
Update README.md
2020-08-23 22:47:35 +08:00
© TSINGSEE Team：<a href="http://www.tsingsee.com" target="_blank" title="青犀TSINGSEE">http://www.tsingsee.com</a><br/>
update README.md
2019-08-02 11:37:22 +08:00
![青犀TSINGSEE](http://www.easydarwin.org/public/images/tsingsee_qrcode_160.jpg)
Reference in New Issue Copy Permalink