视频管理-展示视频时长

xiangpei

2025-05-26 ecd4199f54f2529738f2d07ab3527e0059e5daaf

 manager/src/views/video/VideoList.vue

@@ -92,6 +92,9 @@
              </div>
            </div>
          </Form-item>
          <Form-item label="视频时长：" :label-width="72">
            <div>{{formatSeconds(detail.videoDuration)}}</div>
          </Form-item>
          <Form-item class="video-warp" :label-width="0">
            <video :src="detail.videoUrl" autoplay controls style="width: 768px;height: 432px"/>
          </Form-item>
@@ -150,6 +153,9 @@
        </template>
        <template slot-scope="{ row, index }" slot="videoFileKey">
          <div class="play-text" @click="playVideo(row.videoFileKey, row.title)">点击播放</div>
        </template>
        <template slot-scope="{ row, index }" slot="videoDuration">
          <div>{{formatSeconds(row.videoDuration)}}</div>
        </template>
        <template slot-scope="{ row, index }" slot="recommend">
          <i-switch v-model="row.recommend" :before-change="() => handleBeforeChange(row)" true-color="#13ce66"/>
@@ -284,6 +290,13 @@
          slot: "videoFileKey"
        },
        {
          title: "时长",
          key: "videoDuration",
          width: 80,
          align: 'center',
          slot: "videoDuration",
        },
        {
          title: "播放量",
          key: "playNum",
          width: 80,
@@ -339,6 +352,18 @@
    this.getTags('')
  },
  methods: {
    // 秒转x分x秒
    formatSeconds(seconds) {
      if (isNaN(seconds) || seconds < 0) return '0秒';

      const mins = Math.floor(seconds / 60);
      const secs = seconds % 60;

      if (mins === 0) return `${secs}秒`;
      if (secs === 0) return `${mins}分`;

      return `${mins}分${secs}秒`;
    },
    // 获取标签列表
    getTags(tagName) {
      let params = {