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 Demo

Browse Source
This commit is contained in:
Sake
2021-01-14 15:01:53 +08:00
parent aca3176461
commit 751ceca561
2 changed files with 49 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
demo/html/index.html
View File

@@ -12,11 +12,17 @@
<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" style="width:100%;height: 100%;"></div>
<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>
<input type="text" id="value">
<button id="btn">播放</button>
</div>
<script>
// 播放器回调函数
callbackfun = function (e) {
console.log(e);
}
// 播放按钮
var btn = document.getElementById('btn');
// 地址栏
@@ -30,9 +36,7 @@
player.play(value.value,1);
console.log(value.value);
}
function callbackfun(e) {
console.log("回调数据e:",e);
}
</script>
</body>
</html>

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

@@ -1,22 +1,20 @@
<template>
<div id="app">
<el-row>
<el-col :span="24">
<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>
<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>
<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-button class="player-button" size="mini" type="success" @click="play">播放</el-button>
</div>
</el-col>
</el-row>
</div>
</template>
@@ -58,41 +56,32 @@
-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;
// }
.box {
max-width: 900px;
.el-row,
.el-col {
min-height: 300px;
max-width: 600px;
margin: auto;
margin-top: 20px;
.list {
padding-bottom: 50%;
background-color: red;
}
.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>