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

Question

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

  <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'
  }
],

Answer 1

你的对话框也需要一个 v-if，像这样：

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

v-if 将元素从您的 DOM 中移除（如果其为 false。

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

Vuetify v-dialog to stop playing video on close

vue.js

vuetify.js