jquery VIDEOタグでsrcを変更すると再生できなかった。

 HTML の VIDEOタグを用意して、アクションで自動的にビデオを再生するようにしてみましたら、「再生できません」というエラーで困っちゃいました。

HTML(抜粋)

<div id="div_video">
  <video id="id_video" poster="poster.gif" autoplay loop muted></video>
</div>

javascript(抜粋)

<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript">
function play_video() {

    $('#id_video').attr('src', "video.mp4");
    $('#id_video').get(0).play();
}
</script>

こんな感じです。window.onload() でやると再生できるんですが、アクション後に実行すると poster.gif は表示されますが、ビデオ再生はうまくいきませんでした。

開発者ツールで $('#id_video').attr('src') を見ると、予定されていない内容が入ってます。

video タグでは <source></source>タグを使って複数のファイルを指定できますので get(0) がおかしいのだと思われます。

今回の再生は複数ファイルは必要ないので、get(0) で正しく処理できるよう、次のように記述しました。

function play_video() {
    $('#div_video').children().remove();
    $('#div_video').append('<video id="id_video" autoplay loop muted></video>');
    var target = $('#id_video');
    target.attr("poster",  "poster.gif");
    target.attr("src", "video.mp4");
    target.get(0).play();
}

毎回 <video>タグを作り直すことで get(0) が正しく取得できるようになります。

※ここでは書きませんが、上記アクション実行の前に、前回再生中のタグがある場合は再生を止める必要があるみたいです。（リークしてしまうことがあるのかな？）

※<video> の属性に 'muted' を付けているのは、Chrome でデバッグするとエラーになっちゃうからです。