🎥

【A-Frame】a-videoにサムネイルを設定する

2022/02/26に公開

videoタグのposter属性のようなことをa-videoで実装する。
通常a-videoは最初真っ黒になってしまう。

poster属性:
映像のダウンロード中に表示される画像。youtubeのサムネイルのような役割

実装

a-videoのmaterialを最初は静止画にし、
動画の再生時 or 再生の準備ができたらmaterialをvideoに切り替える。

<a-assets>
    <img id="movie_thumbnail" src="/images/movie_thumbnail.png" crossorigin="anonymous">
    <video id="movie" muted webkit-playsinline playsinline preload loop="true" src="/movies/movie.mp4"></video>
</a-assets>
<a-video
    material="src: #movie_thumbnail"
    width="16"
    height="9"
    movie
></a-video>

AFRAME.registerComponent('movie', {
  init: function () {
    const el = this.el

    let isPlayed = false
    const movie = document.getElementById("movie")

    // a-videoがクリックされたら動画を再生
    this.el.addEventListener("click", () => {
      if(!isPlayed) {
        el.attributes["material"].value = "src: #movie"
        isPlayed = true
      }

      if(movie.paused) {
        movie.play()
      }else {
        movie.pause()
      }
    })

    // 動画の読み込みが完了したら動画を再生
    // ただしiPhoneでは自動再生ができないのでクリックする必要がある
    movie.addEventListener("loadeddata", () => {
      aVideo.attributes["material"].value = "src: #movie"
      isPlayed = true
      movie.play()
    })
  }
})

実装

Discussion