vueでビデオのsrcを動的に変更する

Vue は、ユーザー インターフェイスの構築を容易にする人気の JavaScript フレームワークです。 Vue では、データをビューに簡単にバインドできるため、一部の動的データの表示が非常に簡単になります。ビデオ再生も Vue で非常に簡単に制御できます。この記事では、Vueで動画のsrcを動的に変更する方法を紹介します。

1. ビデオの初期化

まず、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>

上の例では、データ オブジェクトが定義されています。ここで、videoSrc はビデオ ソースのアドレスを表します。 Vue コンポーネントのテンプレート タグにビデオ タグを作成し、V-bind ディレクティブを使用して videoSrc をビデオの src 属性にバインドしました。このように、Vue は初期化後に videoSrc 値を video タグに自動的に入力します。

2. ビデオの src を動的に変更する

これで、Vue コンポーネントにビデオ タグが作成され、ビデオ ソース アドレスがその src On プロパティに正常にバインドされました。アプリの実行中にビデオ ソースを動的に変更したい場合は、$.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>

上の例では、ボタンを定義し、それにクリック イベントをバインドしました。ユーザーがボタンをクリックすると、changeVideo メソッドが呼び出されます。このメソッドでは、データ オブジェクトの videoSrc 値を動的に変更します。 videoSrc 値が変更されると、Vue フレームワークは video タグの src 属性を自動的に更新します。ただし、video タグは新しいビデオ ストリームを自動的にリロードしないため、手動でload() メソッドを呼び出して新しいビデオ ソースをリロードし、play() メソッドを呼び出して再生を開始する必要があります。

3. 概要

この記事では、Vue でビデオの src を動的に変更する方法を紹介します。 Vue コンポーネントでビデオ タグを作成し、ビデオ ソース アドレスをその src 属性にバインドすることで、再生可能なビデオを簡単にレンダリングできます。アプリケーションの実行中にビデオ ソースを動的に変更する必要がある場合は、$refs.videoRef プロパティを使用してビデオ タグへの参照を取得し、load() メソッドと play() メソッドを使用して新しいビデオ ソースをリロードして再生します。 。

以上がvueでビデオのsrcを動的に変更するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。