mirror of
https://github.com/hevin-lee/EasyPlayerJs.git
synced 2026-06-04 13:49:18 +00:00
Add H265 Decoding
This commit is contained in:
Sake
2
.gitignore
vendored
2
.gitignore
vendored
@@ -2,4 +2,4 @@
|
||||
.git
|
||||
.vscode
|
||||
.Ds_Store
|
||||
**node_modules
|
||||
node_modules
|
||||
40
EasyPlayer-element.min.js
vendored
Normal file
40
EasyPlayer-element.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
BIN
EasyPlayer.swf
Normal file
BIN
EasyPlayer.swf
Normal file
Binary file not shown.
File diff suppressed because one or more lines are too long
275
README.md
275
README.md
@@ -2,82 +2,99 @@
|
||||
|
||||
## 简介
|
||||
|
||||
EasyPlayer.js H5播放器，是一款能够同时支持HTTP、HTTP-FLV、HLS（m3u8）视频直播与视频点播等多种协议，支持H.264、H.265、AAC等多种音视频编码格式，支持mse、wasm等多种解码方式，支持Windows、Linux、Android、iOS全平台终端的H5播放器。
|
||||
|
||||
集播放http-flv, rtmp, hls, websocket 于一身的H5`视频直播/视频点播`播放器, 使用简单, 功能强大；
|
||||
|
||||
## 功能说明
|
||||
|
||||
- [x] 支持 MP4 播放
|
||||
|
||||
- [x] 支持 m3u8/HLS 播放;
|
||||
|
||||
- [x] 支持 HTTP-FLV/WS-FLV 播放;
|
||||
|
||||
- [x] 支持 H265 播放;
|
||||
- [x] 支持 H265编码视频;
|
||||
|
||||
- [x] 支持 RTMP 播放;
|
||||
|
||||
- [x] 支持直播和点播播放;
|
||||
|
||||
- [x] 支持全屏显示;
|
||||
- [x] 支持播放器快照截图;
|
||||
|
||||
- [x] 支持点播多清晰度播放;
|
||||
|
||||
- [x] 支持全屏或比例显示;
|
||||
|
||||
- [x] 自带的 flash 支持极速和流畅模式;
|
||||
|
||||
- [x] 自带的 flash 支持 HTTP-FLV 播放;
|
||||
|
||||
- [x] 自动检测 IE 浏览器兼容播放;
|
||||
|
||||
- [x] 支持重连播放；
|
||||
|
||||
<br/>
|
||||
## HTML 集成示例
|
||||
|
||||
## 集成使用示例
|
||||
- 使用方式
|
||||
|
||||
- **普通集成**
|
||||
- [x] 普通集成
|
||||
|
||||
##### 1.引入
|
||||
copy EasyWasmPlayer.js 到项目中
|
||||
copy dist/element/EasyPlayer-element.min.js 到 www 根目录
|
||||
|
||||
copy libDecoder.wasm到项目或者www的根目录（一定要根目录）
|
||||
在 html 中引用 dist/element/EasyPlayer-element.min.js
|
||||
|
||||
##### 2.在 html 中引用 EasyWasmPlayer.js
|
||||
```html
|
||||
<!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>
|
||||
<head>
|
||||
<title>easyplayer</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<meta
|
||||
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
|
||||
name="viewport"
|
||||
/>
|
||||
<script type="text/javascript" src="EasyPlayer-element.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<easy-player
|
||||
video-url="rtmp://live.hkstv.hk.lxdns.com/live/hks2"
|
||||
live="true"
|
||||
stretch="true"
|
||||
></easy-player>
|
||||
<easy-player
|
||||
video-url="http://live.hkstv.hk.lxdns.com/live/hks/playlist.m3u8"
|
||||
live="false"
|
||||
stretch="true"
|
||||
></easy-player>
|
||||
<easy-player
|
||||
video-url="http://live.hkstv.hk.lxdns.com/flv/hks.flv"
|
||||
live="true"
|
||||
stretch="true"
|
||||
></easy-player>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
<br/>
|
||||
|
||||
- **VUE集成**
|
||||
- [x] vue集成
|
||||
|
||||
##### 1.下载
|
||||
```
|
||||
npm install @easydarwin/easywasmplayer --save
|
||||
npm install @easydarwin/easyplayer --save
|
||||
```
|
||||
|
||||
##### 2.拷贝
|
||||
Vue-Cli3.0 环境下
|
||||
- Vue 集成调用
|
||||
|
||||
copy node_modules/@easydarwin/easywasmplayer/EasyWasmPlayer.js 到项目public目录下
|
||||
copy node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer.swf 到 静态文件 根目录
|
||||
|
||||
copy node_modules/@easydarwin/easywasmplayer/libDecoder.wasm 到项目public目录下
|
||||
copy node_modules/@easydarwin/easyplayer/dist/component/crossdomain.xml 到 静态文件 根目录
|
||||
|
||||
copy node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer-lib.min.js 到 静态文件 根目录
|
||||
|
||||
**注意：** 没有调用会出现无法加载对应插件的报错
|
||||
|
||||
在 html 中引用 dist/component/EasyPlayer-lib.min.js
|
||||
|
||||
#### demo
|
||||
|
||||
##### 3.在项目public目录index.html引入
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
@@ -86,118 +103,112 @@ copy node_modules/@easydarwin/easywasmplayer/libDecoder.wasm 到项目public目
|
||||
<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>
|
||||
<title>EasyPlayer-demo</title>
|
||||
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
|
||||
<script src="./EasyPlayer-lib.min.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>
|
||||
```
|
||||
|
||||
##### 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>
|
||||
|
||||
|
||||
- [x] npm集成
|
||||
|
||||
```html
|
||||
......
|
||||
|
||||
<EasyPlayer
|
||||
:videoUrl="videoUrl"
|
||||
:aspect="aspect"
|
||||
live
|
||||
@message="$message"
|
||||
:fluent="fluent"
|
||||
:autoplay="autoplay"
|
||||
stretch
|
||||
></EasyPlayer>
|
||||
|
||||
...... ...... import EasyPlayer from '@easydarwin/easyplayer'; ......
|
||||
components: { EasyPlayer }
|
||||
```
|
||||
## <a href="http://www.easydarwin.org/easywasmplayer/" target="_blank" title="在线演示">在线演示</a><br/>
|
||||
|
||||
**注意：** 若出现libDecoder.wasm的文件报404错误，提示找不到libDecoder.wasm文件，一定要排查是否存放在项目的根目录。
|
||||
源码演示：[github-demo](https://github.com/EasyNVR/EasyNVR)
|
||||
|
||||
## 实例化参数
|
||||
|
||||
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 |
|
||||
| ------------------ | ------------------------------------------------ | -------------------------- | ------ |
|
||||
| video-url | 视频地址 | String | - |
|
||||
| video-title | 视频右上角显示的标题 | String | - |
|
||||
| poster | 视频封面图片 | String | - |
|
||||
| auto-play | 自动播放 | Boolean | true |
|
||||
| live | 是否直播, 标识要不要显示进度条 | Boolean | true |
|
||||
| speed | 是否显示倍速播放按钮。注意：当live为true时，此属性不生效 |Boolean | true |
|
||||
| loop | 是否轮播。 |Boolean | false |
|
||||
| alt | 视频流地址没有指定情况下, 视频所在区域显示的文字 | String | 无信号 |
|
||||
| muted | 是否静音 | Boolean | false |
|
||||
| aspect | 视频显示区域的宽高比 | String | 16:9 |
|
||||
| isaspect | 视频显示区域是否强制宽高比 | Boolean | true |
|
||||
| loading | 指示加载状态, 支持 sync 修饰符 | String | - |
|
||||
| fluent | 流畅模式 | Boolean | true |
|
||||
| timeout | 加载超时(秒) | Number | 20 |
|
||||
| stretch | 是否不同分辨率强制铺满窗口 | Boolean | false |
|
||||
| show-custom-button | 是否在工具栏显示自定义按钮(极速/流畅, 拉伸/标准) | Boolean | true |
|
||||
| isresolution | 是否在播放 m3u8 时显示多清晰度选择 | Boolean | false |
|
||||
| isresolution | 供选择的清晰度 "yh,fhd,hd,sd", yh:原始分辨率 | fhd:超清，hd:高清，sd:标清 | - |
|
||||
| resolutiondefault | 默认播放的清晰度 | String | hd |
|
||||
| decodeWasm | 强制H265解码(支持:HLS/FLV/WS) | Boolean | false |
|
||||
|
||||
|
||||
### 录像播放相关属性
|
||||
#### 注意：currentTime属性只在播放录像m3u8 有结束标记（#EXT-X-ENDLIST）的的流时生效。
|
||||
play(url,autoplay,currentTime)
|
||||
### HTTP-FLV 播放相关属性
|
||||
#### 注意：此属性只在播放flv格式的流时生效。
|
||||
| 属性 | 说明 | 类型 | 默认值 |
|
||||
| -------- | --------------------------------------------- | ------- | ------------------|
|
||||
| url | 播放流地址 | String | - |
|
||||
| autoplay | 是否自动播放(0：默认，1：自动播放) | Number | 0 |
|
||||
| currentTime| 视频开始时间(换算成秒) | Number | 0 |
|
||||
| -------- | -------------------------------------- | ------- | ------------------ |
|
||||
| hasaudio | 是否有音频，传递该属性可以加快启播速度 | Boolean | 默认不配置自动判断 |
|
||||
| hasvideo | 是否有视频，传递该属性可以加快启播速度 | Boolean | 默认不配置自动判断 |
|
||||
|
||||
## 事件
|
||||
## 事件方法
|
||||
|
||||
| 方法名 | 说明 | 参数 |
|
||||
| ---------- | ------------ | --------------------- |
|
||||
| play | 播放事件 | url:'流地址',autoplay: '自动播放',currentTime:'开始时间' |
|
||||
| pause | 播放暂停 | - |
|
||||
| destroy | 停止播放 | - |
|
||||
| openAudio | 打开声音 | - |
|
||||
| closeAudio | 关闭声音 | - |
|
||||
| startLoading | 开始加载动画 | - |
|
||||
| endLoading | 结束加载动画 | - |
|
||||
| fullScreen | 开启或退出全屏 | - |
|
||||
| setSnap | 设置封面照 | 封面图片地址 |
|
||||
| endSnap | 清除封面照 | - |
|
||||
| video-url | 触发通知消息 | type: '', message: '' |
|
||||
| ended | 播放结束 | - |
|
||||
| timeupdate | 进度更新 | 当前时间进度 |
|
||||
| pause | 暂停 | 当前时间进度 |
|
||||
| play | 播放 | 当前时间进度 |
|
||||
| update:loading | 加载状态回调 |- |
|
||||
| message | 播放器回调信息 |- |
|
||||
|
||||
|
||||
<br/>
|
||||
## 更多流媒体音视频资源
|
||||
|
||||
### ✈ 更多视频解决方案资源汇总
|
||||
EasyDarwin开源流媒体服务器：<a href="http://www.easydarwin.org" target="_blank" title="EasyDarwin开源流媒体服务器">www.EasyDarwin.org</a>
|
||||
|
||||
- 流媒体技术：<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/>
|
||||
EasyDSS高性能互联网直播服务：<a href="http://www.easydss.com" target="_blank" title="EasyDSS高性能互联网直播服务">www.EasyDSS.com</a>
|
||||
|
||||
- 视频云服务：<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/>
|
||||
EasyNVR安防视频可视化服务：<a href="http://www.easynvr.com" target="_blank" title="EasyNVR安防视频可视化服务">www.EasyNVR.com</a>
|
||||
|
||||
- 边缘计算：<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/>
|
||||
EasyNVS视频综合管理平台：<a href="http://www.easynvs.com" target="_blank" title="EasyNVS视频综合管理平台">www.EasyNVS.com</a>
|
||||
|
||||
© TSINGSEE Team：<a href="http://www.tsingsee.com" target="_blank" title="青犀TSINGSEE">http://www.tsingsee.com</a><br/>
|
||||
EasyNTS云组网：<a href="http://www.easynts.com" target="_blank" title="EasyNTS云组网">www.EasyNTS.com</a>
|
||||
|
||||
EasyGBS国标GB/T28181服务器：<a href="http://www.easygbs.com" target="_blank" title="EasyGBS国标GB/T28181视频服务器">www.EasyGBS.com</a>
|
||||
|
||||
EasyRTS应急指挥平台：<a href="http://www.easyrts.com" target="_blank" title="EasyRTS应急指挥平台">www.EasyRTS.com</a>
|
||||
|
||||
TSINGSEE青犀开放平台：<a href="http://open.tsingsee.com" target="_blank" title="TSINGSEE青犀开放平台">open.TSINGSEE.com</a>
|
||||
|
||||
Copyright © <a href="http://www.tsingsee.com" target="_blank" title="青犀TSINGSEE">www.TSINGSEE.com</a> Team 2012-2019
|
||||
|
||||
|
||||
|
||||
|
||||
40
demo/html/EasyPlayer-element.min.js
vendored
Normal file
40
demo/html/EasyPlayer-element.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
BIN
demo/html/EasyPlayer.swf
Normal file
BIN
demo/html/EasyPlayer.swf
Normal file
Binary file not shown.
File diff suppressed because one or more lines are too long
@@ -4,37 +4,28 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>EasyWasmPlayer</title>
|
||||
<script src="./EasyWasmPlayer.js"></script>
|
||||
<title>EasyPlayer</title>
|
||||
<script src="./jquery.min.js"></script>
|
||||
<script src="./EasyPlayer-element.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h4 style="width:600px;margin: auto;">H265播放器</h4>
|
||||
<h4 style="width:600px;margin: auto;">H264播放器</h4>
|
||||
<br>
|
||||
<div style="width:600px;height: 400px; background-color:pink;margin: auto;">
|
||||
<div id="newplay" onClick="onplay"></div>
|
||||
<p>列如：http://127.0.0.1:8080/flv/hls/stream.flv <a href="http://www.easydarwin.org/easywasmplayer/" target="_blank"> 在线演示</a></p>
|
||||
<div style="width:600px;margin: auto;">
|
||||
<easy-player id="player" live="true" show-custom-button="true"></easy-player>
|
||||
<p>列如：http://127.0.0.1:8080/flv/hls/stream.flv <a href="http://www.easydarwin.org/easyplayer/" target="_blank"> 在线演示</a></p>
|
||||
<p style="color:red;font-size: 12px;">注意：本实例需要以服务方式启动 <a href="https://blog.csdn.net/weixin_43194037/article/details/108885134" target="_blank">搭建服务教程</a></p>
|
||||
<input type="text" id="value">
|
||||
<button id="btn">播放</button>
|
||||
</div>
|
||||
<script>
|
||||
// 播放器回调函数
|
||||
callbackfun = function (e) {
|
||||
console.log(e);
|
||||
}
|
||||
// 播放按钮
|
||||
var btn = document.getElementById('btn');
|
||||
// 地址栏
|
||||
var value = document.getElementById('value');
|
||||
// 实例播放器
|
||||
var player = new WasmPlayer(null, 'newplay', callbackfun,{
|
||||
Height:true
|
||||
})
|
||||
//播放事件 传入地址播放
|
||||
btn.onclick = function(){
|
||||
player.play(value.value,1);
|
||||
console.log(value.value);
|
||||
$('#player').attr('video-url',value.value)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
6
demo/html/jquery.min.js
vendored
Normal file
6
demo/html/jquery.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "easywasmplayer",
|
||||
"version": "0.0.0",
|
||||
"name": "easyplayer",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
@@ -8,6 +8,7 @@
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@easydarwin/easyplayer": "^3.2.7",
|
||||
"axios": "^0.18.0",
|
||||
"element-ui": "^2.5.4",
|
||||
"md5": "^2.2.1",
|
||||
|
||||
40
demo/vuecli3/public/EasyPlayer-element.min.js
vendored
Normal file
40
demo/vuecli3/public/EasyPlayer-element.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
BIN
demo/vuecli3/public/EasyPlayer.swf
Normal file
BIN
demo/vuecli3/public/EasyPlayer.swf
Normal file
Binary file not shown.
File diff suppressed because one or more lines are too long
@@ -5,12 +5,13 @@
|
||||
<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</title>
|
||||
<script src="./EasyWasmPlayer.js"></script>
|
||||
<title>easyplayer</title>
|
||||
<script src="./jquery.min.js"></script>
|
||||
<script src="./EasyPlayer-element.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but EasyWasmPlayer doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
<strong>We're sorry but easyplayer doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
|
||||
6
demo/vuecli3/public/jquery.min.js
vendored
Normal file
6
demo/vuecli3/public/jquery.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@@ -2,48 +2,35 @@
|
||||
<div id="app">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<h4>H265播放器</h4>
|
||||
<div class="player-box">
|
||||
<div id="wasmPlayer"></div>
|
||||
</div>
|
||||
<div style="width:600px;margin: auto;">
|
||||
<div id="newplay" onClick="onplay"></div>
|
||||
<p>列如：http://127.0.0.1:8080/flv/hls/stream.flv <a href="http://www.easydarwin.org/easywasmplayer/" target="_blank"> 在线演示</a></p>
|
||||
<p style="color:red;font-size: 12px;">注意：本实例需要以服务方式启动 <a href="https://blog.csdn.net/weixin_43194037/article/details/108885134" target="_blank">搭建服务教程</a></p>
|
||||
<el-input v-model="input" placeholder="请输入播放地址接口" size="mini"></el-input>
|
||||
<el-button class="player-button" size="mini" type="success" @click="play">播放</el-button>
|
||||
</div>
|
||||
<EasyPlayer :videoUrl="videoUrl" fluent autoplay live stretch></EasyPlayer>
|
||||
<el-input v-model="input" placeholder="请输入播放地址" size="mini"></el-input>
|
||||
<p>列如：http://127.0.0.1:10800/test.flv <a href="http://www.easydarwin.org/easyplayer/" target="_blank"> 在线演示</a></p>
|
||||
<el-button class="player-button" size="mini" type="success" @click="player">播放</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import EasyPlayer from "@easydarwin/easyplayer"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
input: '', //地址栏
|
||||
player: '' //播放器对象
|
||||
videoUrl: '',
|
||||
input: ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
//实例化播放器
|
||||
this.player = new WasmPlayer(null, 'wasmPlayer', this.callbackfun,{
|
||||
Height:true
|
||||
})
|
||||
components: {
|
||||
EasyPlayer
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
// 播放事件
|
||||
play() {
|
||||
player() {
|
||||
if(!this.input){
|
||||
this.$message.error('请输入接口地址！');
|
||||
this.$message.error('请输入播放地址地址！');
|
||||
}else{
|
||||
this.player.play(this.input,1);
|
||||
this.videoUrl = this.input
|
||||
}
|
||||
},
|
||||
//回调函数
|
||||
callbackfun(e) {
|
||||
console.log(e);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -54,18 +41,30 @@
|
||||
font-family: 'Avenir', Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
// text-align: center;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.el-row,
|
||||
.el-col {
|
||||
min-height: 300px;
|
||||
max-width: 600px;
|
||||
.div-btn {
|
||||
max-width: 800px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.div-btn {
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.el-col {
|
||||
min-height: 300px;
|
||||
// border: 1px pink solid
|
||||
}
|
||||
|
||||
.el-input {
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.player-button {
|
||||
margin: 5px;
|
||||
width: 100%;
|
||||
@@ -74,13 +73,6 @@
|
||||
font-size: 12px;
|
||||
color: #67c23a;
|
||||
}
|
||||
.player-box {
|
||||
height: 400px;
|
||||
width: 600px;
|
||||
margin: auto;
|
||||
margin-top: 2%;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
.el-input__inner:focus {
|
||||
border-color: #67c23a !important;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
module.exports = {
|
||||
lintOnSave: false
|
||||
// devServer: {
|
||||
// proxy: "http://127.0.0.1:10800"
|
||||
// }
|
||||
devServer: {
|
||||
proxy: "http://127.0.0.1:10800"
|
||||
}
|
||||
}
|
||||
|
||||
8050
demo/vuecli3/yarn.lock
Normal file
8050
demo/vuecli3/yarn.lock
Normal file
File diff suppressed because it is too large
Load Diff
14
package.json
14
package.json
@@ -1,14 +0,0 @@
|
||||
{
|
||||
"name": "@easydarwin/easywasmplayer",
|
||||
"version": "4.0.10",
|
||||
"main": "EasyWasmPlayer.js",
|
||||
"private": false,
|
||||
"author": "likeadust <1246665453@qq.com>",
|
||||
"scripts": {
|
||||
"push": "npm publish"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://www.npmjs.com/package/@easydarwin/easywasmplayer"
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user