videoタグでYoutubeの方に中央へ再生ボタンを表示したい

Question

videoタグのデフォルトの再生バーがUI的にも微妙なので、Youtubeのように再生ボタンを付けて操作できるようにしたいのですが、どなたか良いやり方がわかる方いらっしゃいますでしょうか？

実装したいこと。
案1）　hover時と動画終了時にコントロールバーと同時に表示
案2) 動画終了時・停止時に再生ボタンのみ表示
どちらかを実装したいです。
ちなみにAutoplayを外すは無しでお願いします。

<!-- movie -->
  <section class="movie">
	  <video id="video" autoplay muted controls src="動画素材.mp4" width="100%" height="600px"></video>
  </section>

試したこと
1、VideojsをCDNで読み込んで操作してみましたがいまいちやり方がわからず断念。
2、Videoタグのみでできないか探しましたが、やはりjQueryもしくはjsでないと再生停止を再生ボタンで制御ができないみたいなので、難しすぎて断念。

どなたかご教示頂けますとありがたいです。
よろしくお願い致します。

Answer 1

結論：JavaScriptを使わないと無理です。

video要素のUIを、自身の理想の形にするには、JavaScriptを使わないと無理です。
でないと、ブラウザのUI通り以外はできません。

ただ、jQueryないし、質問者さんが試したライブラリを使えば、比較的に簡単に実装できるはずです。

なんにせよ、JavaScriptを頑張って勉強しましょう。

Comments

[gerick]

なるほどですね、、、。
ちなみにvideojsのライブラリのオプションを日本語でわかりやすく開設したサイトなどはございますでしょうか？

[miyabi_pudding]

うーん、探してみましたが、日本語記事は、応用だったり、この機能のとか一部だったり、あまり初心者には優しくない記事ばかりなのは事実のようですね・・・。

video要素のUIをコントロールなどの、要素のカスタマイズを行うには、下記のJS機能をうまく使う必要があります。

・Web Lomponents
・HTML Templates
・Shadow DOM
・Custom Elements

ちなみに、Google Chromeに関しては、video要素自体が、ブラウザ側でのShadow DOMによって生成されています。

いずれにせよ、ガッツリJSで構築が必要です。

なので、上記四つの使い方などを、また調査されてみてはいかがでしょうか。
もしくは、video要素のUIだけを簡単にコントロールできるライブラリもあるかもしれません。

[gerick]

さらに頭が痛くなってきましたが、ちょっと頑張ってみたいと思います。
ただ、本日中に実装したいので、jQueryのvideojsもう少し触ってみてうまくハマらないか模索します、、、。

[miyabi_pudding]

ほ、本日中ですか！
多分、JSに相当慣れてても二日はかかるかと思います。
質問者さんのようにJSはまだよくわからない、となると、一週間はかかると思います。
今日の段では、デフォのUIで勘弁してもらって、
後日ブラッシュアップ、みたいな感じで交渉されてはいかがでしょうか？
（先方がいる仕事なのであれば）
と、仕事のことで口を出すのは、teratailでやる内容にならないので、ここまでにしますが、
いずれにせよ、かなり時間かかると思いますよ。

[gerick]

なんと！！そんなに厳しい作業だったのですね、、、。
さらっとお願いされてたのですぐできるものかと思ってました、、、。
とりあえず、実装工数がかかりそうなら大丈夫とのことなので、一旦持ち帰って色々検証してみたいと思います！
ご回答ありがとうございました！

[miyabi_pudding]

いやはや、交渉成立してよかったですね　汗
何をするのが時間かかりそうなのかは、経験を重ねることによって、パッと見でもわかるようになります。
どうかめげずに頑張ってください。