117 lines
3.6 KiB
HTML
117 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>视频播放器</title>
|
|
<script src="js/init.js?from=element&plugins=player"></script>
|
|
<script>(function (){
|
|
if(!parent.webos){
|
|
document.write("<script src=\"../../../common/sdk/sdk.js\"></"+"script>");
|
|
}
|
|
})()
|
|
</script>
|
|
<meta name="referrer" content="never">
|
|
<style>
|
|
html,body{
|
|
margin: 0;
|
|
padding: 0;
|
|
background: #000;
|
|
}
|
|
#artplayer-app{
|
|
width: 100vw;
|
|
height: 100vh;
|
|
}
|
|
.play-list{
|
|
position: fixed;
|
|
bottom: 70px;
|
|
right: 0px;
|
|
z-index: 100;
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
width: 300px;
|
|
background: #000000d4;
|
|
overflow-y: auto;
|
|
max-height: 300px;
|
|
}
|
|
.play-list .select-item.selected{
|
|
background-color: #ffffff0a;
|
|
color: #27a2d9e6;
|
|
}
|
|
.play-list .select-item{
|
|
position: relative;
|
|
padding-left: 10px;
|
|
height: 32px;
|
|
line-height: 32px;
|
|
font-size: 0;
|
|
color: hsla(0,0%,100%,.9);
|
|
box-sizing: border-box;
|
|
cursor: pointer;
|
|
background-color: hsla(0,0%,100%,.04);
|
|
margin: 8px 0;
|
|
border-radius: 2px;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
-ms-flex-pack: justify;
|
|
justify-content: space-between;
|
|
}
|
|
.play-list .select-pre{
|
|
display: inline-block;
|
|
width: 35px;
|
|
font-size: 15px;
|
|
font-family: Arial,PingFangSC-Regular,Microsoft Yahei;
|
|
}
|
|
.play-list .select-inline{
|
|
display: inline-block;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
}
|
|
.play-list .select-title{
|
|
font-size: 14px;
|
|
line-height: 32px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.play-list .select-link{
|
|
color: inherit;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.play-list .el-icon{
|
|
margin-right: 5px;
|
|
color: #ffffff;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<div id="artplayer-app" class="play-player"></div>
|
|
<div class="play-list">
|
|
<ul v-if="listOpen" style="padding-left:5px;">
|
|
<li class="select-item">
|
|
<div class="select-inline">
|
|
<div class="select-title">
|
|
<span>播放列表/{{list.length}}</span>
|
|
<el-icon @click="removeDataAll()" style="margin-left: 100px;"><delete></delete></el-icon>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="select-item" :class="{'selected':current==index}" v-for="(item,index) in list">
|
|
<div class="select-inline">
|
|
<div class="select-title">
|
|
<el-icon @click="removeData(index)"><delete></delete></el-icon>
|
|
<span class="select-pre">{{index+1}}</span>
|
|
<a href="javascript:void(0);" :title="item.name" class="select-link" @click="playData(index)">{{item.name}}</a>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<script src="./js/index-init.js"></script>
|
|
</html> |