|
|
@@ -7,19 +7,17 @@
|
|
|
|
|
|
<!-- 配置区域 -->
|
|
|
<div class="config-section">
|
|
|
- <el-form :model="config" label-width="140px" inline>
|
|
|
+ <el-form :model="config" label-width="auto" inline>
|
|
|
<el-form-item label="播放器类型">
|
|
|
- <el-select v-model="config.playerType" style="width: 150px">
|
|
|
+ <el-select v-model="config.playerType" style="width: 200px">
|
|
|
<el-option label="Cloudflare iframe" value="cloudflare-iframe" />
|
|
|
<el-option label="HLS.js" value="hls" />
|
|
|
<el-option label="原生 Video" value="native" />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
-
|
|
|
<el-form-item label="Video ID">
|
|
|
<el-input v-model="config.videoId" placeholder="Cloudflare Stream Video ID" style="width: 300px" />
|
|
|
</el-form-item>
|
|
|
-
|
|
|
<el-form-item label="自定义域名">
|
|
|
<el-input
|
|
|
v-model="config.customerDomain"
|
|
|
@@ -27,7 +25,6 @@
|
|
|
style="width: 300px"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
-
|
|
|
<el-form-item>
|
|
|
<el-button type="primary" @click="loadVideo">加载视频</el-button>
|
|
|
</el-form-item>
|
|
|
@@ -35,7 +32,7 @@
|
|
|
|
|
|
<el-divider />
|
|
|
|
|
|
- <el-form label-width="140px" inline>
|
|
|
+ <el-form label-width="auto" inline>
|
|
|
<el-form-item label="或输入 HLS 地址">
|
|
|
<el-input v-model="config.hlsUrl" placeholder="https://xxx/manifest/video.m3u8" style="width: 500px" />
|
|
|
</el-form-item>
|
|
|
@@ -245,10 +242,9 @@ function goBack() {
|
|
|
.page-header {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- margin-bottom: 20px;
|
|
|
- padding: 15px 20px;
|
|
|
background-color: #fff;
|
|
|
border-radius: 4px;
|
|
|
+ margin-bottom: 20px;
|
|
|
|
|
|
.title {
|
|
|
margin-left: 15px;
|
|
|
@@ -258,10 +254,8 @@ function goBack() {
|
|
|
}
|
|
|
|
|
|
.config-section {
|
|
|
- padding: 20px;
|
|
|
background-color: #fff;
|
|
|
border-radius: 4px;
|
|
|
- margin-bottom: 20px;
|
|
|
}
|
|
|
|
|
|
.player-section {
|
|
|
@@ -272,7 +266,6 @@ function goBack() {
|
|
|
}
|
|
|
|
|
|
.control-section {
|
|
|
- padding: 15px 20px;
|
|
|
background-color: #fff;
|
|
|
border-radius: 4px;
|
|
|
margin-bottom: 20px;
|
|
|
@@ -295,7 +288,6 @@ function goBack() {
|
|
|
}
|
|
|
|
|
|
.log-section {
|
|
|
- padding: 15px 20px;
|
|
|
background-color: #fff;
|
|
|
border-radius: 4px;
|
|
|
|