mirror of
https://github.com/hevin-lee/EasyPlayerJs.git
synced 2026-06-04 13:49:18 +00:00
Add multi split screen case
This commit is contained in:
likeadust
BIN
demo/html/favicon.ico
Normal file
BIN
demo/html/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
@@ -11,13 +11,14 @@
|
||||
<style>
|
||||
#player .easy-player {
|
||||
height: 400px;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<h4 style="width:600px;margin: auto;">EasyPlayer播放器</h4>
|
||||
<br>
|
||||
<div style="width:600px;margin: auto;">
|
||||
<easy-player id="player" live="true" show-custom-button="true"></easy-player>
|
||||
<div style="width:600px; height: 400px;position: relative;">
|
||||
<easy-player id="player" live="true" show-custom-button="true" decode-wasm="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">
|
||||
|
||||
40
demo/screen/EasyPlayer-element.min.js
vendored
Normal file
40
demo/screen/EasyPlayer-element.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
BIN
demo/screen/EasyPlayer.wasm
Normal file
BIN
demo/screen/EasyPlayer.wasm
Normal file
Binary file not shown.
BIN
demo/screen/favicon.ico
Normal file
BIN
demo/screen/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
222
demo/screen/index_动态地址.html
Normal file
222
demo/screen/index_动态地址.html
Normal file
@@ -0,0 +1,222 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>EasyPlayer</title>
|
||||
<script src="./EasyPlayer-element.min.js"></script>
|
||||
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
|
||||
</head>
|
||||
<style>
|
||||
/* color: #07baf4; */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
p {
|
||||
line-height: 24px;
|
||||
}
|
||||
#app {
|
||||
padding-top: 60px;
|
||||
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_container_4 {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
}
|
||||
.player_container_9 {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
}
|
||||
.player_active {
|
||||
box-shadow: 0 0 2px 1px red;
|
||||
}
|
||||
.player_item {
|
||||
position: relative;
|
||||
padding-bottom: 54%;
|
||||
background-color: #ccc;
|
||||
border: 1px #fff solid;
|
||||
}
|
||||
.player_box {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
.playerurl-container {
|
||||
display: flex;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.play-btn {
|
||||
width: 80px;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
margin-left: 15px;
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
background-color: #07baf4;
|
||||
border-color: #07baf4;
|
||||
}
|
||||
input {
|
||||
-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: 40px;
|
||||
line-height: 40px;
|
||||
outline: none;
|
||||
padding: 0 15px;
|
||||
transition: border-color .2s cubic-bezier(.645,.045,.355,1);
|
||||
width: 100%;
|
||||
}
|
||||
.closes {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
width: 40px;
|
||||
height: 24px;
|
||||
text-align: center;
|
||||
line-height: 24px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
background-color: rgba(0, 0, 0, .7);
|
||||
z-index: 999;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div id="app">
|
||||
<h1>EasyPlayer 多分屏案例（动态地址）</h1>
|
||||
<br>
|
||||
<div class="radio-container">
|
||||
<div :class="['radio-item',{'radio-active': radio==item.value}]" v-for="(item,index) in radioList" :key="index" @click="onRadio(item.value)">
|
||||
{{item.label}}
|
||||
</div>
|
||||
<div class="radio-item" @click="onStop()">
|
||||
停止
|
||||
</div>
|
||||
</div>
|
||||
<div class="playerurl-container">
|
||||
<input v-model="playerUrl">
|
||||
<div class="play-btn" @click="onPlay()">
|
||||
播放
|
||||
</div>
|
||||
</div>
|
||||
<div :class="['player_container','player_container_'+radio]">
|
||||
<div class="player_item" v-for="(item,index) in playerList" @click="onActive(index)">
|
||||
<div class="closes" @click="onCloes(index)"> 关闭</div>
|
||||
<easy-player
|
||||
:class="['player_box',{'player_active': active==index}]"
|
||||
:key="index"
|
||||
:muted="muted"
|
||||
:data-index="index"
|
||||
:video-url="item.videoUrl"
|
||||
:ref="'player'+index"
|
||||
style="height: 100%"
|
||||
@error="restartPlayer"
|
||||
@ended="restartPlayer"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<p>列如：http://127.0.0.1:8080/flv/hls/stream.flv <a href="http://www.easydarwin.org/easyplayer/" target="_blank"> 在线演示</a>
|
||||
</p>
|
||||
<p>文档：<a href="https://github.com/tsingsee/EasyPlayer.js" target="_blank"> GitHub </a> <a href="https://www.npmjs.com/package/@easydarwin/easyplayer" target="_blank"> NPM</a>
|
||||
</p>
|
||||
<p style="color:red;font-size: 12px;">注意：本实例需要以服务方式启动 <a href="https://blog.csdn.net/weixin_43194037/article/details/108885134" target="_blank">搭建服务教程</a></p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
new Vue({
|
||||
el: "#app",
|
||||
data() {
|
||||
return {
|
||||
active:0,
|
||||
radio: 1,
|
||||
radioList: [// 选择分屏
|
||||
{ label:"单分屏", value: 1 },
|
||||
{ label:"四分屏", value: 4 },
|
||||
{ label:"九分屏", value: 9 }
|
||||
],
|
||||
muted: false, // 控制音频
|
||||
playerList: [],
|
||||
playerUrl: 'http://demo.easynvr.com:10800/hls/stream_5/playlist.m3u8',
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.setPlayerList()
|
||||
},
|
||||
methods: {
|
||||
setPlayerList(){// 设置分屏
|
||||
this.onStop()
|
||||
this.playerList = []
|
||||
for (let index = 0; index < this.radio; index++) {
|
||||
this.playerList.push({videoUrl: ""})
|
||||
}
|
||||
},
|
||||
onPlay(){ // 播放
|
||||
this.playerList[this.active].videoUrl = this.playerUrl
|
||||
},
|
||||
onStop(){
|
||||
for (let index = 0; index < this.playerList.length; index++) {
|
||||
this.playerList[index].videoUrl = ""
|
||||
}
|
||||
},
|
||||
onRadio(val){// 分屏选择
|
||||
this.radio = val
|
||||
this.setPlayerList()
|
||||
},
|
||||
onActive(val){
|
||||
this.active = val
|
||||
},
|
||||
onCloes(index){
|
||||
this.playerList[index].videoUrl = ""
|
||||
},
|
||||
restartPlayer(e) {// 错误捕获
|
||||
const {index} = e.currentTarget.dataset
|
||||
const playerStr = "player" + index
|
||||
let [player] = this.$refs[playerStr]
|
||||
player = player.getVueInstance()
|
||||
player.initPlayer() // 重新初始化播放器
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
154
demo/screen/index_默认地址.html
Normal file
154
demo/screen/index_默认地址.html
Normal file
@@ -0,0 +1,154 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>EasyPlayer</title>
|
||||
<script src="./EasyPlayer-element.min.js"></script>
|
||||
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
|
||||
</head>
|
||||
<style>
|
||||
/* color: #07baf4; */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
p {
|
||||
line-height: 24px;
|
||||
}
|
||||
#app {
|
||||
padding-top: 60px;
|
||||
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_container_4 {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
}
|
||||
.player_container_9 {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
}
|
||||
.player_item {
|
||||
position: relative;
|
||||
padding-bottom: 56%;
|
||||
background-color: #ccc;
|
||||
border: 1px #fff solid;
|
||||
}
|
||||
.player_box {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div id="app">
|
||||
<h1>EasyPlayer 多分屏案例（默认地址）</h1>
|
||||
<br>
|
||||
<div class="radio-container">
|
||||
<div :class="['radio-item',{'radio-active': radio==item.value}]" v-for="(item,index) in radioList" :key="index" @click="onRadio(item.value)">
|
||||
{{item.label}}
|
||||
</div>
|
||||
<div class="radio-item" @click="onStop()">
|
||||
停止
|
||||
</div>
|
||||
</div>
|
||||
<div :class="['player_container','player_container_'+radio]">
|
||||
<div class="player_item" v-for="(item,index) in playerList">
|
||||
<easy-player
|
||||
class="player_box"
|
||||
:key="index"
|
||||
:muted="muted"
|
||||
:data-index="index"
|
||||
:video-url="item.videoUrl"
|
||||
:ref="'player'+index"
|
||||
style="height: 100%"
|
||||
@error="restartPlayer"
|
||||
@ended="restartPlayer"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<p>列如：http://127.0.0.1:8080/flv/hls/stream.flv <a href="http://www.easydarwin.org/easyplayer/" target="_blank"> 在线演示</a>
|
||||
</p>
|
||||
<p>文档：<a href="https://github.com/tsingsee/EasyPlayer.js" target="_blank"> GitHub </a> <a href="https://www.npmjs.com/package/@easydarwin/easyplayer" target="_blank"> NPM</a>
|
||||
</p>
|
||||
<p style="color:red;font-size: 12px;">注意：本实例需要以服务方式启动 <a href="https://blog.csdn.net/weixin_43194037/article/details/108885134" target="_blank">搭建服务教程</a></p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
new Vue({
|
||||
el: "#app",
|
||||
data() {
|
||||
return {
|
||||
radio: 1,
|
||||
radioList: [// 选择分屏
|
||||
{ label:"单分屏", value: 1 },
|
||||
{ label:"四分屏", value: 4 },
|
||||
{ label:"九分屏", value: 9 }
|
||||
],
|
||||
muted: false, // 控制音频
|
||||
playerList: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.setPlayerList()
|
||||
},
|
||||
methods: {
|
||||
setPlayerList(){// 设置分屏
|
||||
this.onStop()
|
||||
this.playerList = []
|
||||
for (let index = 0; index < this.radio; index++) {
|
||||
this.playerList.push({videoUrl: "http://demo.easynvr.com:10800/hls/stream_5/playlist.m3u8"}) // 默认地址
|
||||
}
|
||||
},
|
||||
onStop(){
|
||||
for (let index = 0; index < this.playerList.length; index++) {
|
||||
this.playerList[index].videoUrl = ""
|
||||
}
|
||||
},
|
||||
onRadio(val){// 分屏选择
|
||||
this.radio = val
|
||||
this.setPlayerList()
|
||||
console.log(this.radio );
|
||||
},
|
||||
restartPlayer(e) {// 错误捕获
|
||||
const {index} = e.currentTarget.dataset
|
||||
const playerStr = "player" + index
|
||||
let [player] = this.$refs[playerStr]
|
||||
player = player.getVueInstance()
|
||||
player.initPlayer() // 重新初始化播放器
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 4.2 KiB |
Reference in New Issue
Block a user