Ubah suai src video dalam vue secara dinamik

Vue ialah rangka kerja JavaScript popular yang memudahkan untuk membina antara muka pengguna. Dalam Vue, kami boleh mengikat data dengan mudah pada paparan, menjadikan paparan beberapa data dinamik sangat mudah. Main balik video juga boleh dikawal dengan sangat mudah dalam Vue. Artikel ini akan memperkenalkan cara mengubah suai src video dalam Vue secara dinamik.

1. Initialize Video

Mula-mula, mulakan Video dalam komponen Vue, kita boleh menggunakan tag 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>

Dalam contoh di atas, objek data ditakrifkan, dengan videoSrc mewakili alamat sumber video. Kami mencipta teg video dalam teg templat komponen Vue dan menggunakan arahan V-bind untuk mengikat videoSrc kepada atribut src video. Dengan cara ini, Vue akan mengisi nilai videoSrc secara automatik ke dalam teg video selepas pemulaan.

2. Ubah suai src video secara dinamik

Kini, kami telah mencipta teg video dalam komponen Vue dan berjaya mengikat alamat sumber video kepada sifat src Onnya. Jika kami ingin mengubah suai sumber video secara dinamik semasa pelaksanaan apl, kami boleh menggunakan sifat $.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>

Dalam contoh di atas, kami mentakrifkan butang dan mengikat acara klik padanya. Apabila pengguna mengklik butang, kaedah changeVideo dipanggil. Dalam kaedah ini, kami mengubah suai nilai videoSrc secara dinamik dalam objek data. Apabila nilai videoSrc berubah, rangka kerja Vue akan mengemas kini atribut src teg video secara automatik. Walau bagaimanapun, teg video tidak memuatkan semula strim video baharu secara automatik, jadi kami perlu memanggil kaedah load() secara manual untuk memuatkan semula sumber video baharu dan memanggil kaedah main() untuk memulakan main balik.

3. Ringkasan

Artikel ini memperkenalkan cara mengubah suai src video dalam Vue secara dinamik. Dengan membuat teg video dalam komponen Vue dan mengikat alamat sumber video pada atribut srcnya, kami boleh memaparkan video yang boleh dimainkan dengan mudah. Jika anda perlu mengubah suai sumber video secara dinamik semasa aplikasi sedang berjalan, gunakan sifat $refs.videoRef untuk mendapatkan rujukan kepada teg video dan gunakan kaedah load() dan play() untuk memuat semula dan memainkan sumber video baharu .

Atas ialah kandungan terperinci Ubah suai src video dalam vue secara dinamik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!