☰

HTML 5 ビデオと src 値 (vue を使用) 質問する

tag-icon • tag-icon javascript vue.js
HTML 5 ビデオと src 値 (vue を使用) 質問する

ページ内に HTML 5 ビデオがあり、src を動的に設定したいと考えています。vue を使用しており、js コントローラー内でビデオ パスを含む変数を設定し、次のようにページでその変数を使用します。

<video width="450" controls>
    <source v-model="controller.var" v-bind:src="var" type="video/mp4">
</video>

プレーヤーはビデオをロードしませんが、var は正しい URL で適切に設定されています。ここで何が欠けているのでしょうか?

ありがとう

ベストアンサー1

追加する鍵属性にソースのURLをビデオ要素により、URL が変更されたときにビデオとソースの両方が更新されます。

<template>
  <video
    :key="src"
    :width="width"
    controls
  >
    <source
      :src="src"
      :type="type"
    >
  </video>
</template>

<script>
  export default {
    data() {
      return {
        src: 'https://www.example.org/video.mp4',
        type: 'video/mp4',
        width: 450
      }
    }
  }
</script>

これは、ビデオ + ソースの動的な置き換えをサポートします。

おすすめ記事