私は自分のページ内にHTML 5ビデオを持っており、srcを動的に設定したいと思います。 私は、私は以下のように私のページに変数を使用し、私はビデオパスで変数を設定し、私のjsコントローラ内部で、VUEを使用しています：HTML 5ビデオとsrc値とvue
<video width="450" controls>
<source v-model="controller.var" v-bind:src="var" type="video/mp4">
</video>
プレイヤーがビデオをロードしませんが、私のvarが適切です右のURLで設定します。 私はここで何が欠けていますか？
おかげ
まず、あなたが実際にあなたのテンプレートでvarを使用している場合、私は知りませんが、あなたがしている場合、Vueがテンプレートに警告がスローされます。プロパティ名としてJavaScriptのキーワードを使用して
- 避ける：表現で "VAR"：SRC = "VAR"
第二に、あなたは、動的にソース要素を変更することはできません。 要素が既にビデオまたはオーディオ要素に挿入されたときにHTML5 specification、
から
が動的ソース要素およびその属性を変更しても 影響を与えないであろう。再生中の内容を変更するには、 メディア要素のsrc属性を直接使用してください。可能であれば、canPlayType（） メソッドを使用して、利用可能なリソースの中から選択します。一般的に、文書が で解析された後で手動でソース要素を操作するのは、不必要に複雑なアプローチです。
したがって、データをvideo要素のsrc属性にバインドします。
<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/[email protected]/dist/vue.js"></script>
<div id="app">
<video width="450" controls :src="video"></video>
<div>
<button @click="changeVideo">Change</button>
</div>
</div>それは問題を解決しました。 video要素のsrc属性をバインドするとうまく動作します。 Tnx。 –
は、コントローラに変数として全体sourceを設定してみてください。
<video controls autoplay>
{{{ src }}}
</video>
new Vue({
el: '#app',
data: {
src: '<source src="#url" type="video/mp4">'
}
})
あなたVUEのコードが含まれてもらえますか？それはこのペンで働いているようです：https://codepen.io/anon/pen/bRogVw –