Q&A
提示の内容だけだとよくわからないので教えてください。
①CSSを指定しているならそのCSSコード
②video要素以外の全体的なHTMLの構造（大枠でいいです）
③カクカクの具体的な挙動（右にずれるとか縦に揺れるとか）
④本来表示したい画面のデザインまたはスクショを添えた説明
###前提
html5で背景動画を指定したところ、
最初にカクカクするようになった。
###発生している問題・エラーメッセージ
html5の<video>で背景動画を指定したところ、
最初にカクカクした後、通常どおりの位置に戻るという
挙動をする。
動画のサイズ：
1920×1080
形式：
mp4
###該当のソースコード
<video autoplay loop poster="img/anime_2.gif">
<source src="○○.mp4" type="video/mp4">
</video>
###コメント
素人なのでどうしていいか検討もつきません。
質問等お答えできる限り致します。
ご回答お待ちしております。
###ご質問の追記
①CSSを指定しているならそのCSSコード
video { position: fixed; top: 0; left: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -2; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline }
②video要素以外の全体的なHTMLの構造（大枠でいいです）
<body> <div class="bgAll"></div> <video autoplay loop poster="img/anime_2.gif"> <source src="img/COG_new2_1.mp4" type="video/mp4"> </video> <header>…</header> <section>…</section>繰り返し <footer></footer>
③カクカクの具体的な挙動（右にずれるとか縦に揺れるとか）
最初の読み込み時に挙動がおかしいです。（最終的には意図した位置になります）
最初に大きく拡大表示され、その後小さくなり上方に移動し、
意図した位置に収まる、といった具合です。
（その間1、2秒）
④本来表示したい画面のデザインまたはスクショを添えた説明
コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。
回答1件
0
提示のソースですが、関係するコードはこれだけでしょうか？
というのも、videoの幅と高さが下限で100％となっており、普通に考えると画面いっぱいに広がるのみで、あちこち移動するような記述にはなっていないと思います。
ふつうなら考えられる原因としては、画面の読み込み状況によって基準となる位置の座標が変化しているとか、video自体に対して影響するCSSのスタイル指定やJSによる動的処理が入っているのかなと思うのですが…
投稿2016/08/15 07:49
総合スコア1298
あなたの回答
tips
プレビュー
