vue中動態修改video的src

Vue是一款流行的JavaScript框架，它可以方便地建立使用者介面。在Vue中，我們可以輕鬆地將資料綁定到視圖中，使一些動態資料的顯示變得非常簡單。對於影片的播放，在Vue中也可以非常方便地控制。本文將介紹如何在Vue中動態修改video的src。

1. 初始化Video

首先，在Vue元件中初始化Video，我們可以使用HTML標籤

<template>
  <div>
    <video ref="videoRef" width="640" height="360" :src="videoSrc" controls></video>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoSrc: "/test.mp4",
    };
  }
}
</script>

在上面的範例中，定義了一個data對象，其中videoSrc表示視訊來源的位址。我們在Vue組件的template標籤中建立了一個video標籤，並使用了V-bind指令把videoSrc綁定到video的src屬性上。這樣，Vue就會在初始化之後自動把videoSrc值填入video標籤中。

2. 動態修改video的src

現在，我們已經在Vue元件中建立了一個video標籤，並成功地把視訊來源位址綁定到了它的src屬性上。如果我們想要在app執行過程中動態修改視訊來源，可以使用$.refs.videoRef屬性。

<template>
  <div>
    <video ref="videoRef" width="640" height="360" :src="videoSrc" controls></video>
    <button @click="changeVideo()">修改视频</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoSrc: "/test.mp4",
    };
  },
  methods: {
    changeVideo() {
      this.videoSrc = "/newVideo.mp4";
      this.$refs.videoRef.load();
      this.$refs.videoRef.play();
    },
  }
}
</script>

在上面的範例中，我們定義了一個按鈕，並給它綁定一個click事件。當使用者點擊該按鈕時，會呼叫changeVideo方法。在這個方法中，我們動態修改了資料物件中的videoSrc值。當videoSrc值改變時，Vue框架會自動更新video標籤的src屬性。但是video標籤並不會自動重新載入新的視訊串流，所以我們需要手動呼叫load()方法來重新載入新的視訊來源，並且呼叫play()方法來開始播放。

3. 小結

本文介紹如何在Vue中動態修改video的src。透過在Vue元件中建立video標籤，並將視訊來源位址綁定到它的src屬性上，我們可以輕鬆地呈現出一個可播放的影片。如果需要在應用程式運行期間動態修改視訊來源，請使用$refs.videoRef屬性來取得video標籤的引用，並使用load()和play()方法重新載入和播放新的視訊來源。

以上是vue中動態修改video的src的詳細內容。更多資訊請關注PHP中文網其他相關文章！