时间戳

首页 > 解决方案 > Vuetify v-dialog 在关闭时停止播放视频

vue.js - Vuetify v-dialog 在关闭时停止播放视频

问题描述

我有一个播放列表，可以播放音频和视频文件的组合。对于视频，我使用 v-dialog 来播放嵌入式 Youtube 或 Vimeo 播放器。我想做的是当我关闭视频停止播放的视频的 v 对话框时。有没有一种简单的方法可以强制视频停止播放？目前对话框关闭但视频声音仍在后台播放？

  <v-list>
    <v-list-item
      v-for="media in media"
      :key="media.id"
      class="mb-2"
    >
      <v-list-item-content
        class="pa-4"
      >
        <v-list-item-title
          class="title"
          v-text="media.title"
        />
      </v-list-item-content>

      <v-list-item-action>
        <div>
          <v-btn
            icon
            @click="pause"
          >
            <v-icon>pause</v-icon>
          </v-btn>
          <v-btn
            v-else
            icon
            @click="play(media)"
          >
            <v-icon>play_arrow</v-icon>
          </v-btn>
        </div>
        <div v-else>
          <v-dialog
            v-model="media.show"
            persistent
            width="800px"
            :retain-focus="false"
          >
            <template v-slot:activator="{ on, attrs }">
              <v-btn
                icon
                v-bind="attrs"
                v-on="on"
              >
                <v-icon>mdi-open-in-new</v-icon>
              </v-btn>
            </template>
            <v-card>
              <Video
                :video-url="media.url"
              />
            </v-card>
            <v-card-actions>
              <v-spacer />
              <v-btn
                color="primary"
                text
                @click="media.show = false"
              >
                Close
              </v-btn>
            </v-card-actions>
          </v-dialog>
        </div>
      </v-list-item-action>
    </v-list-item>
  </v-list>

..在下面我有一个包含音频和视频文件组合的媒体数组

media: [
  {
    id: 0,
    title: 'Audio 1',
    url: 'https://mcdn.podbean.com/abc.mp3',
  },
  {
    id: 1,
    title: 'Video 1',
    show: false,
    url: 'https://vimeo.com/347119375'
  },
  {
    id: 2,
    title: 'Audio 2',
    url: url: 'https://mcdn.podbean.com/edf.mp3',
  },
  {
    id: 3,
    title: 'Audio 3',
    url: 'url: 'https://mcdn.podbean.com/ghi.mp3'
  },
  {
    id: 4,
    title: 'Video 2',
    show: false,
    url: 'https://youtu.be/LtpGLNRlwA0'
  }
],

标签： vue.jsvuetify.js

解决方案

您的对话框也需要一个 v-if，如下所示：

<v-dialog
  v-model="media.show"
  v-if="media.show" <-------
  persistent
  width="800px"
  :retain-focus="false"
>

v-if 如果元素为假，则从 DOM 中删除该元素。

推荐阅读