SPAでvideo要素とsource要素を組み合わせるときに気をつけること

video要素を使うときにsource要素を使って動画リソースを指定する場合、source要素の生成タイミングに気を使う必要があります。

例えば、Vue.js で動画リソースのvideoUrl という変数をHTMLテンプレートにバインディングなら下のHTMLように書きます。

<video>
    <source :src="videoUrl" >
</video>

この書き方だと、video要素とsource要素は最初から書き出されます。 しかし、src属性は videoUrl に値が設定された後に追加されるので、空のsource要素となってしまっている瞬間がありえます。 ちゃんと仕様を調べたわけではないのですが、どうやら既に存在しているsource要素のsrc属性が後から変更されてもvideo要素のリソースとしては読み込んでくれません。

こういう場合、とりあえずはsource要素も videoUrl を設定するタイミングで新たに書き出してあげる挙動にしておけばよいようです。

<video>
    <source v-if="videoUrl" :src="videoUrl" >
</video>

もっとも、このくらい単純な実装の場合、source要素を使わずにvideo要素に直接src属性を書いてもいいのですけど。