videoタグのコントロールバーについて

Question

HTML5のvideoタグのコントロールバーを再生完了後に自動的に出ないようしたいのですが、何か良い方法はございますでしょうか？
もしございましたら、コードまたは参考ページのURLを教えていただけましたら幸いです。
どうぞよろしくお願い申し上げます。

Answer 1

再生後にcontrols属性を削除するようにしてみたのですがどうでしょうか・・・
サンプル

const video = document.getElementById('video');
video.addEventListener('ended', function() {
  video.removeAttribute('controls'); 
});
// 以下追記
video.addEventListener('mouseenter', function() {
  video.setAttribute('controls', '');
});
video.addEventListener('mouseleave', function() {
  video.removeAttribute('controls');
});

<video id="video" src="sample.mp4" controls autoplay muted></video>

Comments

[yamadadayo]

takopo様
ご回答いただき、誠にありがとうございます。
コードまで書いていただき、感謝しかございません。
ただ、手動で再生できるようにもしておきたいので、
再度コントロールバーを表示させたく思っております。
マウスオーバーで表示、マウスアウトで非表示というのは可能でしょうか？
回答いただいた身にも拘わらず、不躾なことを申し上げてしまい、すみません。
お分かりになられたらで構いませんので、ご教授頂ければ幸いです。
どうぞよろしくお願いいたします。

[takopo]

一応マウスオーバー・マウスアウトでコントローラーが消えるようにしてみたのですがどうでしょうか。（controls属性を付けたり消したりしてるだけです。）
私もそれほど詳しいわけじゃないので、他にもっと良い方法があるかもしれません。。
※ mouseout じゃなくて mouseleave にしたのは Firefox でコントローラーが消えてしまうため

[yamadadayo]

takopo様
実装できました！
丁寧にご対応いただき、ありがとうございます。
大変お世話になりました。

[takopo]

無事実装できて良かったです！