视频播放控件配置

guoshilong

2023-09-26 fc1591b18cad18680e879a6df711bcac62d5d15f

视频播放控件配置

 src/components/MediaPanel.vue

@@ -35,7 +35,8 @@

    <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"
      <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">

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

interface MediaFile {
  fingerprint: string,
  drone: string,
@@ -327,14 +329,26 @@
  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)
  })
}

// 打包选中项