video.jsで動画再生できんとなったが自分のポカだった

すずき

video.jsとは

動画再生をいい感じにしてくれるライブラリなのだ。
プレイヤーをいい感じに提供してくれたり、カスタムをできる口を提供してくれる。
プラグインを活用することでYoutubeの動画をシームレスに再生したり、HLSで動画を再生することを可能にしてくれる。

なにがあったのか

雰囲気で利用しようとしてうまくいかなかった。
うまくいかなった原因がしょうもなかったので戒めに記事に書くのだ。

video.jsを利用すると利用すると動画プレイヤーの様子が変わる。

自分の動かないvideo.jsの利用実装ではこうした見た目上の変化は起きるものの、再生ボタンを押してもうんともすんとも言わなかったのだ。

動かぬ動画

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" />
  </head>

  <body>
    <div>
      <p>Not Working</p>
      <video
        id="my-video"
        class="video-js"
        controls
        preload="auto"
        width="640"
        height="264"
        poster="//vjs.zencdn.net/v/oceans.png"
        src="//vjs.zencdn.net/v/oceans.mp4"
        data-setup="{}"
      >
        <p class="vjs-no-js">
          To view this video please enable JavaScript, and consider upgrading to
          a web browser that
          <a href="https://videojs.com/html5-video-support/" target="_blank"
            >supports HTML5 video</a
          >
        </p>
      </video>
    </div>
    <script src="https://vjs.zencdn.net/7.19.2/video.min.js"></script>
  </body>
</html>

video.jsの使い方はいくつかパターンがあるが非常にシンプルだ。
videoタグに「ちょっとした設定」を加えてやることでいい具合になるのだ。

「ちょっとした設定」は
1. videoタグのattributeにdata-setup="{}"を指定
2. videoタグのattributeにclass="video-js"を指定

ただそれだけのはずだった。なのに動かなかったのだ…
そうすべては、自分がvideoタグならこれで動くでしょーと鷹を括った故に…

動く動画

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" />
  </head>
  <body>
    <div>
      <p>Working</p>
      <video
        id="my-video"
        class="video-js"
        controls
        preload="auto"
        width="640"
        height="264"
        poster="//vjs.zencdn.net/v/oceans.png"
        data-setup="{}"
      >
        <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4" />
        <p class="vjs-no-js">
          To view this video please enable JavaScript, and consider upgrading to
          a web browser that
          <a href="https://videojs.com/html5-video-support/" target="_blank"
            >supports HTML5 video</a
          >
        </p>
      </video>
    </div>
    <script src="https://vjs.zencdn.net/7.19.2/video.min.js"></script>
  </body>
</html>

これで動くのだ。
なにが変わったかというとvideoタグのattribute、srcで指定していた動画ファイルをvideoタグの子要素にsourceタグとして指定するように変更した。

よくみると
https://github.com/videojs/videojs.com/search?q=src
サンプル内でvideoタグのsrcを指定するようなコードはないのだ。

videoタグの仕様としてはsrcで指定するのは何ら問題ない。
また、sourceで指定するのも仕様どおりなのだ。

反省

「videoタグにattributeつけたらいいんだな、ふーん。わかったわかった。」で進めてしまった。
「サンプルをよく読む。」というのはよーーーくやっている。
しかし、それでもダメだったのは過去の経験からvideo.jsがvideoタグをいい
感じにするなら「src指定でいけるっしょーーー。sourceタグをサンプルで使っているのは趣味かな。」ということでコトを進めてしまったところだ。

思い込み良くない！！！


この記事が気に入ったらサポートをしてみませんか？