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

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

@@ -1,22 +1,20 @@
<template> <template>
<div id="app"> <div id="app">
<h4>H265播放器</h4> <el-row>
<el-input v-model="input" placeholder="请输入播放地址接口" size="mini"></el-input> <el-col :span="24">
<p>列如：http://127.0.0.1:8080/flv/hls/stream.flv <a href="http://www.easydarwin.org/easywasmplayer/" target="_blank"> 在线演示</a></p> <h4>H265播放器</h4>
<el-button class="player-button" size="mini" type="success" @click="play">播放</el-button> <div class="player-box">
<el-row class="box"> <div id="wasmPlayer"></div>
<el-col :xs="12" class="list"></el-col> </div>
<el-col :xs="12" class="list"></el-col> <div style="width:600px;margin: auto;">
<el-col :xs="12" class="list"></el-col> <div id="newplay" onClick="onplay"></div>
<el-col :xs="12" class="list"></el-col> <p>列如：http://127.0.0.1:8080/flv/hls/stream.flv <a href="http://www.easydarwin.org/easywasmplayer/" target="_blank"> 在线演示</a></p>
</el-row> <p style="color:red;font-size: 12px;">注意：本实例需要以服务方式启动 <a href="https://blog.csdn.net/weixin_43194037/article/details/108885134" target="_blank">搭建服务教程</a></p>
<!-- <h4>H265播放器</h4> <el-input v-model="input" placeholder="请输入播放地址接口" size="mini"></el-input>
<div class="player-box"> <el-button class="player-button" size="mini" type="success" @click="play">播放</el-button>
<div id="wasmPlayer"></div> </div>
</div> </el-col>
<el-input v-model="input" placeholder="请输入播放地址接口" size="mini"></el-input> </el-row>
<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>
@@ -58,41 +56,32 @@
-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; }
.list { .el-input {
padding-bottom: 50%; padding: 5px;
background-color: red; 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> </style>