tungstenowl/EasyPlayerJs
1
0
Fork 0
mirror of https://github.com/hevin-lee/EasyPlayerJs.git synced 2026-06-04 13:49:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add use cases

Browse Source
This commit is contained in:
Sake
2020-09-22 11:08:54 +08:00
parent 8733589135
commit 8dc11c773b
14 changed files with 3357 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@@ -150,7 +150,6 @@ var player = new wasmPlayer(url,ID，callbackFun,{cbUserPtr:this, decodeType"aut
| openAudio | 是否打开音频 | Boolean | false |
| BigPlay | 是否开启大的播放按钮 | Boolean | false |
| Height | 播放器尺寸是否继承父盒子的 | Boolean | false |
| UnLogo | 是否隐藏LOGO | Boolean | false |
### 录像播放相关属性

19
demo/html/EasyWasmPlayer.js Normal file
View File

File diff suppressed because one or more lines are too long

41
demo/html/index.html Normal file
View File

@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EasyWasmPlayer</title>
<script src="/EasyWasmPlayer.js"></script>
</head>
<body>
<h4 style="width:600px;margin: auto;">H265播放器</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</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);
}
</script>
</body>
</html>

BIN
demo/html/libDecoder.wasm Normal file
View File

Binary file not shown.

26
demo/vuecli3/README.md Normal file
View File

@@ -0,0 +1,26 @@
# EasyWasmPlayer
## Project setup
```
yarn install
```
### Compiles and hot-reloads for development
```
yarn run serve or yarn run dev or yarn run start
```
### Compiles and minifies for production
```
yarn run build
```
### Run your tests
```
yarn run test
```
### Lints and fixes files
```
yarn run lint
```

5
demo/vuecli3/babel.config.js Normal file
View File

@@ -0,0 +1,5 @@
module.exports = {
presets: [
'@vue/app'
]
}

5
demo/vuecli3/postcss.config.js Normal file
View File

@@ -0,0 +1,5 @@
module.exports = {
plugins: {
autoprefixer: {}
}
}

3144
demo/vuecli3/public/EasyWasmPlayer.js Normal file
View File

File diff suppressed because one or more lines are too long

BIN
demo/vuecli3/public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

18
demo/vuecli3/public/index.html Normal file
View File

@@ -0,0 +1,18 @@
<!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</title>
<script src="./EasyWasmPlayer.js"></script>
</head>
<body>
<noscript>
<strong>We're sorry but EasyWasmPlayer 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>

BIN
demo/vuecli3/public/libDecoder.wasm Normal file
View File

Binary file not shown.

83
demo/vuecli3/src/App.vue Normal file
View File

@@ -0,0 +1,83 @@
<template>
<div id="app">
<el-row>
<el-col :span="24">
<h4>H265播放器</h4>
<div class="player-box">
<div id="wasmPlayer"></div>
</div>
<el-input v-model="input" placeholder="请输入播放地址接口" size="mini"></el-input>
<p>列如：http://127.0.0.1:8080/flv/hls/stream.flv</p>
<el-button class="player-button" size="mini" type="success" @click="play">播放</el-button>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data() {
return {
input: '', //地址栏
player: '' //播放器对象
}
},
mounted() {
//实例化播放器
this.player = new WasmPlayer(null, 'wasmPlayer', this.callbackfun,{
Height:true
})
},
methods: {
// 播放事件
play() {
if(!this.input){
this.$message.error('请输入接口地址！');
}else{
this.player.play(this.input,1);
}
},
//回调函数
callbackfun(e) {
console.log(e);
}
}
}
</script>
<style lang="scss">
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
}
.el-row,
.el-col {
min-height: 300px;
max-width: 600px;
margin: auto;
}
.el-input {
padding: 5px;
box-sizing: border-box;
}
.player-button {
margin: 5px;
width: 100%;
}
p {
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;
}
</style>

11
demo/vuecli3/src/main.js Normal file
View File

@@ -0,0 +1,11 @@
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)
Vue.config.productionTip = false
new Vue({
render: h => h(App)
}).$mount('#app')

5
demo/vuecli3/vue.config.js Normal file
View File

@@ -0,0 +1,5 @@
module.exports = {
// devServer: {
// proxy: "http://127.0.0.1:10800"
// }
}