视频播放控件配置

guoshilong

2023-09-26 fc1591b18cad18680e879a6df711bcac62d5d15f

视频播放控件配置

 src/components/MediaPanel.vue

@@ -1,97 +1,98 @@
<template>
  <!--  <div class="header">媒体文件</div>-->
  <!--搜索栏-->
    <div class="search-panel-wrapper">
      <div class="search-part">
        <a-range-picker :size="searchPanelOptions.size" :format="searchPanelOptions.dateFormat"
                        :valueFormat="searchPanelOptions.valueFormat" v-model:value="timeRangeArr.data"
                        @change="dateChange" style="width: 300px"/>
      </div>

      <div class="search-part">
        <a-select v-model:value="subFileTypeArr" allowClear @change="subFileTypeChange" :options="subFileTypeOptions"
                  :maxTagCount="searchPanelOptions.maxTagCount" mode="multiple"
                  :size="searchPanelOptions.size" placeholder="所有类型" style="width: 300px">
        </a-select>
      </div>

      <div class="search-part">
        <a-select v-model:value="payloadArr" allowClear @change="payloadChange" :options="payloadOptions"
                  :maxTagCount="searchPanelOptions.maxTagCount" mode="multiple"
                  :size="searchPanelOptions.size" placeholder="所有负载" style="width: 300px">
        </a-select>
      </div>

      <div class="search-part">
        <a-input-search :size="searchPanelOptions.size" v-model:value="searchQuery.name" @change="inputChange"
                        placeholder="按文件名称搜索" style="width: 300px"/>
      </div>

  <div class="search-panel-wrapper">
    <div class="search-part">
      <a-range-picker :size="searchPanelOptions.size" :format="searchPanelOptions.dateFormat"
                      :valueFormat="searchPanelOptions.valueFormat" v-model:value="timeRangeArr.data"
                      @change="dateChange" style="width: 300px"/>
    </div>

    <div class="button-wrapper">
      <a-button type="primary" @click="compress">压缩打包</a-button>
    <div class="search-part">
      <a-select v-model:value="subFileTypeArr" allowClear @change="subFileTypeChange" :options="subFileTypeOptions"
                :maxTagCount="searchPanelOptions.maxTagCount" mode="multiple"
                :size="searchPanelOptions.size" placeholder="所有类型" style="width: 300px">
      </a-select>
    </div>

    <a-spin :spinning="loading" :delay="1000" tip="downloading" size="large">
      <div class="media-panel-wrapper">
        <a-table class="media-table" :columns="columns" :data-source="mediaData.data" row-key="fingerprint" rowKey="file_id" :row-selection="rowSelection"
                 :pagination="paginationProp" :scroll="{ x: '100%', y: 600 }" @change="refreshData">
          <template v-for="col in ['name']" #[col]="{text, record}" :key="col">
    <div class="search-part">
      <a-select v-model:value="payloadArr" allowClear @change="payloadChange" :options="payloadOptions"
                :maxTagCount="searchPanelOptions.maxTagCount" mode="multiple"
                :size="searchPanelOptions.size" placeholder="所有负载" style="width: 300px">
      </a-select>
    </div>

            <div>
              <a-input
                  v-if="editableData[record.file_id]"
                  v-model:value="editableData[record.file_id]['file_name']"
                  style="margin: -5px 0"
              />
              <template v-else>
                <a-tooltip :title="text">
                  <a  @click="viewFile(record.object_key)">{{ text }}</a>
                </a-tooltip>
              </template>
    <div class="search-part">
      <a-input-search :size="searchPanelOptions.size" v-model:value="searchQuery.name" @change="inputChange"
                      placeholder="按文件名称搜索" style="width: 300px"/>
    </div>

  </div>

  <div class="button-wrapper">
    <a-button type="primary" @click="compress">压缩打包</a-button>
  </div>

  <a-spin :spinning="loading" :delay="1000" tip="downloading" size="large">
    <div class="media-panel-wrapper">
      <a-table class="media-table" :columns="columns" :data-source="mediaData.data" row-key="fingerprint"
               rowKey="file_id" :row-selection="rowSelection"
               :pagination="paginationProp" :scroll="{ x: '100%', y: 600 }" @change="refreshData">
        <template v-for="col in ['name']" #[col]="{text, record}" :key="col">

          <div>
            <a-input
                v-if="editableData[record.file_id]"
                v-model:value="editableData[record.file_id]['file_name']"
                style="margin: -5px 0"
            />
            <template v-else>
              <a-tooltip :title="text">
                <a @click="viewFile(record.object_key)">{{ text }}</a>
              </a-tooltip>
            </template>
          </div>

        </template>
        <template #original="{ text }">
          {{ text }}
        </template>
        <template #action="{ record }">

          <div class="editable-row-operations">
            <!-- 编辑态操作 -->
            <div v-if="editableData[record.file_id]">
              <a-tooltip title="保存">
                <span @click="save(record)" style="color: #28d445;"><CheckOutlined/></span>
              </a-tooltip>
              <a-tooltip title="取消">
                <span @click="() => delete editableData[record.file_id]" style="color: #e70102;"><CloseOutlined/></span>
              </a-tooltip>
            </div>
            <!-- 非编辑态操作 -->
            <div v-else class="flex-align-center flex-row" style="color: #2d8cf0">
              <a-tooltip title="下载">
                <a class="fz18" @click="downloadMedia(record)">
                  <DownloadOutlined/>
                </a>
              </a-tooltip>

          </template>
          <template #original="{ text }">
            {{ text }}
          </template>
          <template #action="{ record }">

            <div class="editable-row-operations">
              <!-- 编辑态操作 -->
              <div v-if="editableData[record.file_id]">
                <a-tooltip title="保存">
                  <span @click="save(record)" style="color: #28d445;"><CheckOutlined/></span>
                </a-tooltip>
                <a-tooltip title="取消">
                  <span @click="() => delete editableData[record.file_id]" style="color: #e70102;"><CloseOutlined/></span>
                </a-tooltip>
              </div>
              <!-- 非编辑态操作 -->
              <div v-else class="flex-align-center flex-row" style="color: #2d8cf0">
                <a-tooltip title="下载">
                  <a class="fz18" @click="downloadMedia(record)">
                    <DownloadOutlined/>
                  </a>
                </a-tooltip>

                <a-tooltip title="编辑">
                  <a class="fz18" @click="edit(record)">
                    <EditOutlined />
                  </a>
                </a-tooltip>
              </div>
              <a-tooltip title="编辑">
                <a class="fz18" @click="edit(record)">
                  <EditOutlined/>
                </a>
              </a-tooltip>
            </div>
          </div>

          </template>
        </a-table>
      </div>
    </a-spin>

    <div @click.self="showVideo = false" v-if="showVideo" class="modal">
      <video class="video-js" :id="videoPlayerId"></video>
        </template>
      </a-table>
    </div>
  </a-spin>

  <div @click.self="showVideo = false" v-if="showVideo" class="modal">
    <video class="video-js" :id="videoPlayerId"></video>
  </div>

</template>

@@ -129,6 +130,7 @@
  dateFormat: 'YYYY-MM-DD',
  valueFormat: 'YYYY-MM-DD'
})

interface MediaFile {
  fingerprint: string,
  drone: string,
@@ -138,7 +140,7 @@
  file_path: string,
  create_time: string,
  file_id: string,
  object_key:string
  object_key: string
}

const subFileTypeOptions = [
@@ -241,7 +243,7 @@
  })
}

function viewFile (objectKey:string) {
function viewFile (objectKey: string) {
  const ext = objectKey.split('.')[1]
  const fileType = getFileType(ext)
  let url = ''
@@ -256,7 +258,7 @@
  }
}

function getFileType (ext:string) {
function getFileType (ext: string) {
  // 获取类型结果
  let result = ''
  // fileName无后缀返回 false
@@ -317,23 +319,35 @@
  return 'other'
}

function viewImage (url:string) {
function viewImage (url: string) {
  viewerApi({
    images: [url]
  })
}

async function viewVideo (url:string) {
async function viewVideo (url: string) {
  showVideo.value = true
  await nextTick()
  const player = videojs(videoPlayerId.value, {
    autoplay: true,
    controls: true,
    autoplay: true, // 自动播放
    controls: true, // 控件 设置为true，控件才会显示
    fullscreenToggle: true, // 是否显示全屏按钮
    playToggle: true, // 是否显示播放按钮
    progressControl: true, // 是否显示进度条。除了boolean，还可以设置一个ProgressControlOptions对象，更详细的配置进度条。
    volumePanel: true, // 是否显示音量。除了boolean，还可以设置一个VolumePanelOptions对象，更详细的配置音量组件。
    pictureInPictureToggle: false, // 是否显示画中画按钮
    remainingTimeDisplay: true, // 是否显示时长

  })

  player.src(url)
  player.on('ended', () => {
    showVideo.value = false
  })

  player.on('error', () => {
    const error = player.error()
    console.log('video error:' + error.code + '-' + error.message)
  })
}

@@ -366,7 +380,7 @@
}

// 获取文件的blob
function getFile (url:string, name:string) {
function getFile (url: string, name: string) {
  return new Promise((resolve, reject) => {
    axios({
      method: 'get',
@@ -482,7 +496,7 @@

}

.button-wrapper{
.button-wrapper {
  background: #ffffff;
  padding-left: 20px;
}
@@ -493,7 +507,7 @@
  }
}

.modal{
.modal {
  position: absolute;
  top: 0;
  left: 0;
@@ -504,7 +518,7 @@
  align-items: center;
  justify-content: center;

  #videoPlayerId{
  #videoPlayerId {
    width: 70%;
    height: 80%;
  }