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