Q&A
質問内容からはフルスクリーンの話がメインでないように感じました。＞タイトル
お世話になります。
mp4動画をフルスクリーンで表示するページを作ろうとしています。
video.html というリンクをクリックした時に動画がフルスクリーンで開くという動きです。
ネット上で検索して同様のことを実装するためのソースが公開されており、開くことは開くのですが、
動画を止めたり、先送りするためのパネルが出てこないので、画面を閉じるか最後まで見るしか選択肢がありません。
videoタグにcontrols属性を入れたのですが、反応しません。
再生開始ボタンをクリックできれば、自動起動は必ずしも必要ではないので、何等かの方法はないでしょうか？
アドバイス頂ければ幸いです。
OS:Windows10 ブラウザ：Chrome を使用しています。
html
1<!DOCTYPE html> 2<html> 3<head> 4 <title>Full Screen Movie</title> 5 <meta charset="UTF-8"> 6<style type="text/css"> 7body { 8 margin: 0; 9 padding: 0; 10} 11.bg-video-wrap { 12 position: relative; 13 overflow: hidden; 14 width: 100%; 15 height: 100vh; 16} 17video { 18 min-width: 100%; 19 min-height: 100vh; 20 z-index: 1; 21} 22.overlay { 23 width: 100%; 24 height: 100vh; 25 position: absolute; 26 top: 0; 27 left: 0; 28 background-size: 3px 3px; 29 z-index: 2; 30} 31</style> 32 33</head> 34<body> 35 36 <div class="bg-video-wrap"> 37 <video src="video/PPPD-281-1.mp4" controls loop muted autoplay> 38 </video> 39 <div class="overlay"> 40 </div> 41 </div> 42 43</body> 44</html> 45
ブラウザ上のフルスクリーンでコントロールパネルを出す方法 としたほうが判りやすかったですね。ちょっと長いかと思って端折ってしまいました。ご指摘感謝します。
回答1件
0
やりたいことを実現する（フルスクリーンでmp4を表示する）方法についての回答にはならないかもしれず、恐縮ですが、
お困りの「動画を止めたり、先送りするためのパネルが出てこない」箇所についてお答えします。
videoにcontrolsを指定しても、コントロールが出ない理由
.bg-video-wrapがheight:100vhかつoverflow:hiddenになっているため、
動画の下部に表示されるコントロールが見切れて、見えなくなっている。
→ overflow:hidden;を消した状態で、画面下方向へスクロールすると、コントロールが見えるのではないかと思います。
動画をクリックしても一時停止等ができない理由
（通常コントロールが見切れていても、動画領域をクリックすれば一時停止等ができると思いますが）
.overlayの要素がvideo要素の上に重なっており、video要素を直接クリックすることができず、
（.overlayの要素をクリックしてしまい）動画の一時停止等ができない。
→ .overlayのdivを一度消してみると、動画の見えているところをクリックすれば一時停止＆再生ができるのではないかと思います。
投稿2021/02/09 15:09
総合スコア296
あなたの回答
tips
プレビュー
