VIDEO タグの動画で大きな再生ボタンを配置する方法

動画をホームページに置きたい場合，Youtube を利用するのが手軽ではあるが，自分のサイトにファイルを置きたい場合の方法を書く．

再生ボタンを中心に配置した VIDEO タグでの動画表示

Chrome で video タグを使った場合，再生ボタンが左下隅にしか現れないので少し押しにくい．
そこで再生ボタンを上の方に大きく表示する方法を紹介する．

動画表示サンプル

水族館でクラゲを撮った動画だがこんなのしか見つからなかったので画像が粗いのは勘弁してください．
特に意味はないが４つ並べている．複数動画を置いても機能するように作っている．
HTML や CSS は動画の個数やレイアウトに応じて自由に変えてください．

大きな再生ボタン実装に対する考え方

video タグを使って動画を置いたページを Chrome で見ると再生ボタンが下にあって押しにくい．

独自の動画を置く場合，HTML5 では video という便利なタグがあるのでこれを利用するのが簡単．
動画をクリックすれば再生が始まるのだが，再生ボタンを押さないと始まらないように見えるので，真ん中に大きく再生ボタンを配置して再生ボタンを押すと再生ボタンが消える方法を説明する．

大きな再生ボタンを実装するのに Video.js を使われた方がおられたのだが，どうにもこの Video.js が重たくて再生ボタンを表示するためだけに Video.js を使うのは最適ではないと感じたので，なんとか軽く実装できないかと考えたことが始まり．

当初，CSS で表示して，checkbox によるトグルで再生ボタンの表示・非表示を制御できると思っていたが，どうも label の中の video タグの controls はマウスクリックのイベントを独占してしまうようで，checkbox が効かなくなる．
そこで，A タグの target 属性による表示・非表示もやってみようとしたが，そもそもこれは場所を移動してしまうのでうまく行かない．

仕方がないので javascript で行うことにした．

HTML のサンプルコード

箇条書きで動画を４つ並べている．

<ul class="movie fas">
  <li><video preload="metadata" controls="controls" poster="/wp/wp-content/uploads/2022/11/kurage.jpg"><source type="video/mp4" src="/wp/wp-content/uploads/2022/11/kurage.mp4"></video></li>
  <li><video preload="metadata" controls="controls" poster="/wp/wp-content/uploads/2022/11/kurage.jpg"><source type="video/mp4" src="/wp/wp-content/uploads/2022/11/kurage.mp4"></video></li>
  <li><video preload="metadata" controls="controls" poster="/wp/wp-content/uploads/2022/11/kurage.jpg"><source type="video/mp4" src="/wp/wp-content/uploads/2022/11/kurage.mp4"></video></li>
  <li><video preload="metadata" controls="controls" poster="/wp/wp-content/uploads/2022/11/kurage.jpg"><source type="video/mp4" src="/wp/wp-content/uploads/2022/11/kurage.mp4"></video></li>
</ul>

CSS のサンプルコード

アニメーションで一時停止ボタンが 1 秒だけ表示されるようにしている．
その後は再生中は邪魔なのでボタンはどちらも表示されない．

スマホの時は自動的に大きな再生ボタンが表示されるので表示されないように消している．
Firefox でも小さいが再生ボタンが自動で表示されるので何もしないようにしている．

ul.movie video {
  background: rgb(255,255,255,0);
  width: 100%;
  height: auto;
}
ul.movie li {
  width: 23.6%;
  margin-bottom: 24px;
  position: relative;
  padding: 0;
}
ul.movie {
  display: flex;
  justify-content: space-between;
  list-style: none;
}
ul.movie li::before {
  content: "\f04b";
  font-weight: 900;
  color: #fff;
  font-size: 40px;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}
ul.movie li.noplay::before {
  content: "";
  animation: removing 1s both;
}
@keyframes removing {
  from {
    content: "\f04c";
  }
}
@media screen and (max-width: 928px) {
  ul.movie li.noplay::before,
  ul.movie li::before {
    content: "";
  }
}
@-moz-document url-prefix() {
  ul.movie li.noplay::before,
  ul.movie li::before {
    content: "";
  }
}
.fas {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-family: "Font Awesome 5 Free",sans-serif;
  font-weight: 900;
}
@font-face {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("//use.fontawesome.com/releases/v5.11.2/webfonts/fa-solid-900.eot");
  src: url("//use.fontawesome.com/releases/v5.11.2/webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"),url("//use.fontawesome.com/releases/v5.11.2/webfonts/fa-solid-900.woff2") format("woff2"),url("//use.fontawesome.com/releases/v5.11.2/webfonts/fa-solid-900.woff") format("woff"),url("//use.fontawesome.com/releases/v5.11.2/webfonts/fa-solid-900.ttf") format("truetype"),url("//use.fontawesome.com/releases/v5.11.2/webfonts/fa-solid-900.svg#fontawesome") format("svg")
}

javascript のサンプルコード

再生が完了(終了)した場合に「再生ボタン」を再度表示するようにした．
途中でボタンを押して，再開した時でも，最後まで再生が終わったら，「再生ボタン」が表示される．

スマホの場合は自動で再生ボタン周りの表示をやってくれるので，javascript の表示・非表示の部分は動かないようにしている．
Firefox も同様．

function isPC() {
  var w = window.innerWidth;
  if (w < 928) {
    return false;
  } else {
    return true;
  }
}
function isFF() {
  const agent = window.navigator.userAgent.toLowerCase()
  if (agent.indexOf("firefox") != -1) {
    return true;
  } else {
    return false;
  }
}
const mv = document.querySelectorAll('.movie');
mv.forEach(function(vd, i) {
  vd.childNodes.forEach(function(el, i) {
    el.addEventListener('click', function() {
      if (isPC() && !isFF()) {
        this.classList.toggle('noplay');
        var _this = this;
        this.childNodes[0].addEventListener("ended", function() {
          if (_this.classList.contains("noplay")) {
            _this.classList.toggle('noplay');
          }
        });
      };
    })
  })
})