Mam wideo HTML 5 wewnątrz mojej strony i chciałbym dynamicznie ustawić SRC. Używam Vue, w moim sterowniku JS ustawić zmienną z ścieżką wideo, a następnie używam zmiennej na mojej stronie jak poniżej:

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

Gracz nie ładuje wideo, ale mój var jest prawidłowo ustawiony z prawym adresem URL. Tutaj tutaj brakuje?

Dzięki

15
Mario Catena 25 czerwiec 2017, 16:13

4 odpowiedzi

Najlepsza odpowiedź

Po pierwsze, nie wiem, czy używasz var w szablonie, ale jeśli jesteś, Vue rzuci ostrzeżenie w szablonie.

  • Unikaj używania słowa kluczowego JavaScript jako nazwy właściwości: "var" w wyrażeniu: src = "var"

Po drugie, nie można dynamicznie zmieniać elementu źródłowego.

Z html5 Specyfikacja,

Dynamicznie modyfikowanie elementu źródłowego i jego atrybut, gdy element jest już włożony do elementu wideo lub audio nie będzie miało efektu. Aby zmienić to, co gra, wystarczy użyć atrybutu SRC na elemencie multimediów bezpośrednio, ewentualnie korzystać z metody CanPlayype (), aby wybrać spośród dostępnych zasobów. Ogólnie rzecz biorąc, manipulowanie elementami źródłowymi ręcznie po analizowanym dokumencie jest niepotrzebnie skomplikowanym podejściem.

Zatrukuj swoje dane do atrybutu src elementu video.

<video width="450" controls :src="video"></video>
console.clear()

new Vue({
  el:"#app",
  data:{
    video: "https://www.w3schools.com/tags/movie.mp4"
  },
  methods:{
    changeVideo(){
      this.video = "http://techslides.com/demos/sample-videos/small.mp4"
    }
  }
})
<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<div id="app">
  <video width="450" controls :src="video"></video>
  <div>
    <button @click="changeVideo">Change</button>
  </div>
</div>
25
Bert 25 czerwiec 2017, 19:12

Jeśli potrzebujesz, aby zmienić dynamicznie src, można zmienić src i załaduj nowy SRC z funkcją {x2}}.

new Vue({
  el:"#app",
  data:{
    src: ""
  },
  methods:{
    changeVideo(newSrc){
      this.$data.src = newSrc;
      //Force video load.
      var vid = this.$refs.video;
      vid.load();

    }
  }
})
<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<div id="app">
  <video width="450" controls :src="src" ref="video"></video>
  <div>
    <button @click="changeVideo('http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4')">Change1</button>
        <button @click="changeVideo('https://www.w3schools.com/tags/movie.mp4')">Change2</button>
  </div>
</div>
1
Dani GTA 12 czerwiec 2019, 17:16

Spróbuj ustawić całe source jako zmienna w kontrolerze.

<video controls autoplay>
  {{{ src }}}
</video>

new Vue({
  el: '#app',
  data: {
    src: '<source src="#url" type="video/mp4">'
  }
})
0
Dan Philip 25 czerwiec 2017, 13:30

Dodawanie atrybut z adresem URL źródła do elementu wideo spowodować zaktualizowanie zarówno wideo, jak i źródła, gdy zmieni się adres URL:

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

Obsługuje to dynamiczną wymianę źródła wideo +.

15
RWD 19 listopad 2019, 10:22