mirror of
https://github.com/hevin-lee/EasyPlayerJs.git
synced 2026-06-04 13:49:18 +00:00
313 lines
8.0 KiB
HTML
313 lines
8.0 KiB
HTML
<!DOCTYPE HTML>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>多分屏演示</title>
|
|
<script src="./js/easyplayer-pro.js"></script>
|
|
<script src="./2.6.14_vue.min.js"></script>
|
|
</head>
|
|
<style>
|
|
/* color: #07baf4; */
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
p {
|
|
line-height: 24px;
|
|
}
|
|
|
|
#app {
|
|
padding-top: 10px;
|
|
margin: auto;
|
|
max-width: 1200px;
|
|
}
|
|
|
|
.radio-container {
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.radio-item {
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
padding: 6px 12px;
|
|
margin-right: 15px;
|
|
border-radius: 4px;
|
|
border: 1px #ccc solid;
|
|
}
|
|
|
|
.radio-active {
|
|
color: #fff;
|
|
background-color: #07baf4;
|
|
border-color: #07baf4;
|
|
}
|
|
|
|
.player_container {
|
|
display: grid;
|
|
}
|
|
|
|
.player_container_1 {
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: 1fr;
|
|
}
|
|
|
|
.player_item {
|
|
position: relative;
|
|
padding-bottom: 56%;
|
|
background-color: #000;
|
|
border: 1px #fff solid;
|
|
}
|
|
|
|
.inputs {
|
|
-webkit-appearance: none;
|
|
background-color: #fff;
|
|
background-image: none;
|
|
border-radius: 4px;
|
|
border: 1px solid #dcdfe6;
|
|
box-sizing: border-box;
|
|
color: #606266;
|
|
display: inline-block;
|
|
font-size: inherit;
|
|
height: 36px;
|
|
line-height: 36px;
|
|
outline: none;
|
|
padding: 0 15px;
|
|
transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
|
|
width: 100%;
|
|
max-width: 600px;
|
|
margin-right: 16px;
|
|
}
|
|
|
|
.player_box {
|
|
height: 100%;
|
|
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.df {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.df span {
|
|
margin-left: 4px;
|
|
}
|
|
|
|
.df form {
|
|
margin-right: 4px;
|
|
}
|
|
</style>
|
|
|
|
<body>
|
|
<div id="app">
|
|
<br>
|
|
<h2>EasyPlayerPro案例演示</h2>
|
|
<br>
|
|
<div :class="['player_container','player_container_1']">
|
|
<div class="player_item" >
|
|
<div class="player_box" id="player_box1">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
<div class="df">
|
|
<div>
|
|
<input @click="onUse('useWCS')" type="checkbox" :checked="config.useWCS" /><span
|
|
@click="onUse('useWCS')">Wasm解码</span>
|
|
<input @click="onUse('hasAudio')" type="checkbox" :checked="config.hasAudio" /><span
|
|
@click="onUse('hasAudio')">音频</span>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="df">
|
|
<div>播放地址：</div><input class="inputs" v-model="videoUrl">
|
|
</div>
|
|
<div class="df">
|
|
<div class="radio-item" @click="onReplay()" v-if="isPlay">重播</div>
|
|
<div class="radio-item" @click="onPlayer()" v-if="!isPlay">播放</div>
|
|
<div class="radio-item" @click="onPlayerPlayback()" v-if="!isPlay">回放</div>
|
|
<div class="radio-item" @click="onPause()">暂停</div>
|
|
<div class="radio-item" @click="onMute()">静音</div>
|
|
<div class="radio-item" @click="setFullscreen()">全屏</div>
|
|
<div class="radio-item" @click="onStop()" v-if="isPlay">注销</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
new Vue({
|
|
el: "#app",
|
|
data() {
|
|
return {
|
|
videoUrl: "ws://localhost:6230/ws_flv/live/stream_1_0.flv",
|
|
radioList: [// 选择分屏
|
|
{ label: "单分屏", value: 1 },
|
|
{ label: "四分屏", value: 4 },
|
|
{ label: "九分屏", value: 9 },
|
|
],
|
|
config: {
|
|
useSIMD: false,
|
|
hasAudio: true,
|
|
showBandwidth: false,
|
|
},
|
|
isPlay: false,
|
|
}
|
|
},
|
|
mounted() {
|
|
this.playCreate();
|
|
},
|
|
methods: {
|
|
onUse(type) {
|
|
if (type == 'demux') {
|
|
this.config.demuxUseWorker = !this.config.demuxUseWorker
|
|
} else if (type == 'band') {
|
|
this.config.showBandwidth = !this.config.showBandwidth
|
|
} else if (type == 'hasAudio') {
|
|
this.config.hasAudio = !this.config.hasAudio
|
|
} else {
|
|
this.config.useMSE = false
|
|
this.config.useSIMD = false
|
|
this.config.useWCS = false
|
|
if (type == 'useMSE') this.config.useMSE = true
|
|
if (type == 'useSIMD') this.config.useSIMD = true
|
|
if (type == 'useWCS') this.config.useWCS = true
|
|
}
|
|
if (this.isPlay) {
|
|
this.onDestroy().then(() => {
|
|
this.playCreate();
|
|
this.onPlayer()
|
|
});
|
|
}
|
|
},
|
|
setFullscreen() {
|
|
this.playerInfo.setFullscreen(true)
|
|
},
|
|
onPause() {
|
|
this.playerInfo.pause()
|
|
},
|
|
onMute() {
|
|
this.playerInfo.mute()
|
|
},
|
|
onPlayer() {
|
|
this.isPlay = true
|
|
setTimeout((url) => {
|
|
this.playerInfo && this.playerInfo.play(url).then(() => {
|
|
}).catch((e) => {
|
|
console.error(e);
|
|
});
|
|
}, 0, this.videoUrl)
|
|
},
|
|
onPlayerPlayback() {
|
|
setTimeout((url) => {
|
|
this.playerInfo && this.playerInfo.playback(url, {
|
|
controlType: "simple",
|
|
showRateBtn: true,
|
|
showControl: true,
|
|
isUseLocalCalculateTime: true, // 是否使用本地时间来计算playback时间
|
|
playbackPause: false,
|
|
useMSE: true,
|
|
rateConfig: [
|
|
{ label: "正常", value: 1 },
|
|
{ label: "2倍", value: 2 },
|
|
{ label: "4倍", value: 4 },
|
|
{ label: "8倍", value: 8 },
|
|
{ label: "16倍", value: 16 },
|
|
],
|
|
}).then(() => {
|
|
|
|
}).catch((e) => {
|
|
console.error(e);
|
|
});
|
|
}, 0, this.videoUrl)
|
|
},
|
|
onStop() {
|
|
this.isPlay = false
|
|
this.onDestroy().then(() => {
|
|
this.playCreate();
|
|
});
|
|
},
|
|
onDestroy() {
|
|
let _this = this
|
|
return new Promise((resolve, reject) => {
|
|
if (this.playerInfo) {
|
|
this.playerInfo.destroy()
|
|
this.playerInfo = null
|
|
}
|
|
setTimeout(() => {
|
|
resolve();
|
|
}, 100);
|
|
})
|
|
},
|
|
onReplay(type) {
|
|
this.onDestroy().then(() => {
|
|
this.playCreate();
|
|
this.onPlayer()
|
|
});
|
|
},
|
|
playCreate() {
|
|
var container = document.getElementById('player_box1');
|
|
var easyplayer = new EasyPlayerPro({
|
|
container: container,
|
|
decoder: './js/decoder-pro.js',
|
|
videoBuffer: 0.2, // 缓存时长
|
|
isResize: false,
|
|
text: "",
|
|
loadingText: "加载中",
|
|
// debug: true,
|
|
// debugLevel: 'debug',
|
|
useMSE: true,
|
|
useSIMD: false,
|
|
useWCS: true,
|
|
isMulti: true,
|
|
useSIMD: this.config.useSIMD,
|
|
hasAudio: this.config.hasAudio,
|
|
showBandwidth: this.config.showBandwidth, // 显示网速
|
|
showPerformance: this.config.showBandwidth,
|
|
operateBtns: {
|
|
fullscreen: true,
|
|
screenshot: true,
|
|
play: true,
|
|
audio: true,
|
|
record: true,
|
|
quality: true,
|
|
performance: true,
|
|
},
|
|
watermarkConfig: {
|
|
text: {
|
|
content: 'easyplayer-pro'
|
|
},
|
|
right: 10,
|
|
top: 10
|
|
},
|
|
playbackForwardMaxRateDecodeIFrame: 1,
|
|
isWebrtcForOthers:true,
|
|
demuxUseWorker: true,
|
|
supportHls265:true,
|
|
});
|
|
|
|
easyplayer.on("fullscreen", function (flag) {
|
|
console.log('is fullscreen', id, flag)
|
|
})
|
|
easyplayer.on('playbackPreRateChange', (rate) => {
|
|
easyplayer.forward(rate);
|
|
})
|
|
|
|
easyplayer.on('playbackSeek', (data) => {
|
|
easyplayer.setPlaybackStartTime(data.ts);
|
|
})
|
|
this.playerInfo = easyplayer
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |