vue.jsで動画を連続再生してみるネッサンス

vue.jsで動画を連続再生してみるネッサンス。
※何も難しいことしてないです。ただのメモ。

作ったもの

弾き語りするネッサンスまとめ - 原田珠々華 - アイドルネッサンス

2018年2月24日に惜しくも解散（涙）してしまう、アイドルネッサンスに所属している原田珠々華さんがtwitterの公式アカウントに投稿している弾き語りするネッサンスを連続で再生したくて作りました。
撮影カメラをオンオフする動作と動画の切り替えがシンクロしていて…良い！
えっと…公式アカウントが消えても多分見r(ry)

サンプル

http://planet-ape.net/vuejs_video_sample/
実際に作ったものだとphpとか入っててごちゃっとしてるので簡易なやつを…。
4つの動画ファイル（mp4）を連続で再生します。

html

<div id="app">
    <video id="video1" v-bind:src="video" v-on:ended="onEnded" autoplay></video>
    <a href="javascript:vplay();">再生</a>
</div>

videoタグのsrcをv-bindして書き換えられるようにします。
また動画再生の終了イベントを拾えるようにするためにv-on:endedも仕掛けます。
autoplayを設定しておくことでsrcを書き換えた後に自動で再生が始まります。
再生用のリンクはautoplayの効かないiPhone用です。

javascript

<script>
    var v = new Vue({
        el: "#app",
        data: {
            items: [{"url": "v001.mp4"}, {"url": "v002.mp4"}, {"url": "v003.mp4"}, {"url": "v004.mp4"}],
            next: 0,
            video: ""
        },
        created: function () {
            this.getItems();
        },
        methods: {
            onEnded: function () {
                this.getItems();
            },
            getItems: function () {
                var url = this.items[this.next].url;
                console.log('success:' + new Date());
                this.video = url;
                this.next++;
                if (this.items.length <= this.next) {
                    this.next = 0;
                }
            }
        }
    });

    function vplay() {
        var v = document.getElementById("video1");
        v.play();
    }
</script>

動画の再生が終了（onEnded）するたびにgetItemsが実行されてvideoの中身を書き換えます。