tungstenowl/EasyPlayerJs
1
0
Fork 0
mirror of https://github.com/hevin-lee/EasyPlayerJs.git synced 2026-06-15 14:20:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

update README.md

Browse Source
This commit is contained in:
Sake
2020-11-10 10:39:16 +08:00
parent c9bb4325b9
commit b0442058e0
6 changed files with 9531 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3178
EasyWasmPlayer.js
View File

File diff suppressed because one or more lines are too long

1
README.md
View File

@@ -131,6 +131,7 @@ export default {
} }
</style> </style>
``` ```
## <a href="http://www.easydarwin.org/easywasmplayer/" target="_blank" title="在线演示">在线演示</a><br/>
**注意：** 若出现libDecoder.wasm的文件报404错误，提示找不到libDecoder.wasm文件，一定要排查是否存放在项目的根目录。 **注意：** 若出现libDecoder.wasm的文件报404错误，提示找不到libDecoder.wasm文件，一定要排查是否存放在项目的根目录。

3178
demo/html/EasyWasmPlayer.js
View File

File diff suppressed because one or more lines are too long

2
demo/html/index.html
View File

@@ -13,7 +13,7 @@
<br> <br>
<div style="width:600px;height: 400px; background-color:pink;margin: auto;"> <div style="width:600px;height: 400px; background-color:pink;margin: auto;">
<div id="newplay" onClick="onplay"></div> <div id="newplay" onClick="onplay"></div>
<p>列如：http://127.0.0.1:8080/flv/hls/stream.flv</p> <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> <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"> <input type="text" id="value">
<button id="btn">播放</button> <button id="btn">播放</button>

3178
demo/vuecli3/public/EasyWasmPlayer.js
View File

File diff suppressed because one or more lines are too long

89
demo/vuecli3/src/App.vue
View File

@@ -1,16 +1,22 @@
<template> <template>
<div id="app"> <div id="app">
<el-row> <h4>H265播放器</h4>
<el-col :span="24"> <el-input v-model="input" placeholder="请输入播放地址接口" size="mini"></el-input>
<h4>H265播放器</h4> <p>列如：http://127.0.0.1:8080/flv/hls/stream.flv <a href="http://www.easydarwin.org/easywasmplayer/" target="_blank"> 在线演示</a></p>
<div class="player-box"> <el-button class="player-button" size="mini" type="success" @click="play">播放</el-button>
<div id="wasmPlayer"></div> <el-row class="box">
</div> <el-col :xs="12" class="list"></el-col>
<el-input v-model="input" placeholder="请输入播放地址接口" size="mini"></el-input> <el-col :xs="12" class="list"></el-col>
<p>列如：http://127.0.0.1:8080/flv/hls/stream.flv</p> <el-col :xs="12" class="list"></el-col>
<el-button class="player-button" size="mini" type="success" @click="play">播放</el-button> <el-col :xs="12" class="list"></el-col>
</el-col> </el-row>
</el-row> <!-- <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> -->
</div> </div>
</template> </template>
@@ -52,32 +58,41 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
color: #2c3e50; color: #2c3e50;
} }
.el-row, // .el-row,
.el-col { // .el-col {
min-height: 300px; // min-height: 300px;
max-width: 600px; // 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;
// }
.box {
max-width: 900px;
margin: auto; margin: auto;
} margin-top: 20px;
.el-input { .list {
padding: 5px; padding-bottom: 50%;
box-sizing: border-box; background-color: red;
} }
.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> </style>