mirror of
https://github.com/hevin-lee/EasyPlayerJs.git
synced 2026-06-15 14:20:02 +00:00
Add H265 Decoding
This commit is contained in:
Sake
40
demo/html/EasyPlayer-element.min.js
vendored
Normal file
40
demo/html/EasyPlayer-element.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
BIN
demo/html/EasyPlayer.swf
Normal file
BIN
demo/html/EasyPlayer.swf
Normal file
Binary file not shown.
File diff suppressed because one or more lines are too long
@@ -4,37 +4,28 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>EasyWasmPlayer</title>
|
||||
<script src="./EasyWasmPlayer.js"></script>
|
||||
<title>EasyPlayer</title>
|
||||
<script src="./jquery.min.js"></script>
|
||||
<script src="./EasyPlayer-element.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h4 style="width:600px;margin: auto;">H265播放器</h4>
|
||||
<h4 style="width:600px;margin: auto;">H264播放器</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 <a href="http://www.easydarwin.org/easywasmplayer/" target="_blank"> 在线演示</a></p>
|
||||
<div style="width:600px;margin: auto;">
|
||||
<easy-player id="player" live="true" show-custom-button="true"></easy-player>
|
||||
<p>列如：http://127.0.0.1:8080/flv/hls/stream.flv <a href="http://www.easydarwin.org/easyplayer/" 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');
|
||||
// 地址栏
|
||||
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);
|
||||
$('#player').attr('video-url',value.value)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
6
demo/html/jquery.min.js
vendored
Normal file
6
demo/html/jquery.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "easywasmplayer",
|
||||
"version": "0.0.0",
|
||||
"name": "easyplayer",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
@@ -8,6 +8,7 @@
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@easydarwin/easyplayer": "^3.2.7",
|
||||
"axios": "^0.18.0",
|
||||
"element-ui": "^2.5.4",
|
||||
"md5": "^2.2.1",
|
||||
|
||||
40
demo/vuecli3/public/EasyPlayer-element.min.js
vendored
Normal file
40
demo/vuecli3/public/EasyPlayer-element.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
BIN
demo/vuecli3/public/EasyPlayer.swf
Normal file
BIN
demo/vuecli3/public/EasyPlayer.swf
Normal file
Binary file not shown.
File diff suppressed because one or more lines are too long
@@ -5,12 +5,13 @@
|
||||
<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>
|
||||
<title>easyplayer</title>
|
||||
<script src="./jquery.min.js"></script>
|
||||
<script src="./EasyPlayer-element.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but EasyWasmPlayer doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
<strong>We're sorry but easyplayer doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
|
||||
6
demo/vuecli3/public/jquery.min.js
vendored
Normal file
6
demo/vuecli3/public/jquery.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@@ -2,48 +2,35 @@
|
||||
<div id="app">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<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>
|
||||
<el-button class="player-button" size="mini" type="success" @click="play">播放</el-button>
|
||||
</div>
|
||||
<EasyPlayer :videoUrl="videoUrl" fluent autoplay live stretch></EasyPlayer>
|
||||
<el-input v-model="input" placeholder="请输入播放地址" size="mini"></el-input>
|
||||
<p>列如：http://127.0.0.1:10800/test.flv <a href="http://www.easydarwin.org/easyplayer/" target="_blank"> 在线演示</a></p>
|
||||
<el-button class="player-button" size="mini" type="success" @click="player">播放</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import EasyPlayer from "@easydarwin/easyplayer"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
input: '', //地址栏
|
||||
player: '' //播放器对象
|
||||
videoUrl: '',
|
||||
input: ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
//实例化播放器
|
||||
this.player = new WasmPlayer(null, 'wasmPlayer', this.callbackfun,{
|
||||
Height:true
|
||||
})
|
||||
components: {
|
||||
EasyPlayer
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
// 播放事件
|
||||
play() {
|
||||
player() {
|
||||
if(!this.input){
|
||||
this.$message.error('请输入接口地址！');
|
||||
this.$message.error('请输入播放地址地址！');
|
||||
}else{
|
||||
this.player.play(this.input,1);
|
||||
this.videoUrl = this.input
|
||||
}
|
||||
},
|
||||
//回调函数
|
||||
callbackfun(e) {
|
||||
console.log(e);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -54,18 +41,30 @@
|
||||
font-family: 'Avenir', Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
// text-align: center;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.el-row,
|
||||
.el-col {
|
||||
min-height: 300px;
|
||||
max-width: 600px;
|
||||
.div-btn {
|
||||
max-width: 800px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.div-btn {
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.el-col {
|
||||
min-height: 300px;
|
||||
// border: 1px pink solid
|
||||
}
|
||||
|
||||
.el-input {
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.player-button {
|
||||
margin: 5px;
|
||||
width: 100%;
|
||||
@@ -74,13 +73,6 @@
|
||||
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;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
module.exports = {
|
||||
lintOnSave: false
|
||||
// devServer: {
|
||||
// proxy: "http://127.0.0.1:10800"
|
||||
// }
|
||||
devServer: {
|
||||
proxy: "http://127.0.0.1:10800"
|
||||
}
|
||||
}
|
||||
|
||||
8050
demo/vuecli3/yarn.lock
Normal file
8050
demo/vuecli3/yarn.lock
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user