Q&A
>動画を流用
これってあくまで同じ動画を読み込んでいるというだけですよね？
「流用」となるとそれぞれ個別でファイルがあるような印象を受けます。
こんにちは。
ご存知でしたらご教示ください。
現在制作してるWEBサイトで背景に動画を流しています。
他の下層ページもすべて同じ動画を読み込んでいます（ページ数でいくと計10ページくらいです。）
（mts10806さんご指摘ありがとうございます）
最初にアクセスすると固まっていて…別のコンテンツに移動すると正常に動き出します。
下層ページでも動画を流用しているがためにページが重くなっているのか…キャッシュの問題か…
それともコードが誤っているのか…悩んでいます。
mp4で800KB以下の動画です。
使用しているOSはwinで、ブラウザはchrome（最新）を使用しています（dice142さんご指摘ありがとうございます）
★追記
PC
win→firefox ◎、IE◎、chrome ×、safari ×
mac→firefox ◎、IE◎、chrome ×、safari ×
SP
iphone(端末はX)→firefox ◎、chrome ×、safari ×
android（7.1.1）→firefox ◎、chrome ×、
基本的に最新のバージョンで確認しています。
ひとまず"chrome"での動画の動きをどうにかしたく思っていますので、ご存知の方は教えて頂けると嬉しいです。
（dice142さん、たびたびご指摘ありがとうございます）
HTML
1<video id="bg-video" src="/img/move.mp4" poster="" autoplay loop></video>
posterに入れると、読み込みまでに時間がかかるのかposterの差し替えのままなのでブランクにしてます。
CSS
1#bg-video { 2 position: fixed ; 3 right: 0 ; 4 bottom: 0 ; 5 min-width: 100% ; 6 min-height: 100% ; 7 width: auto ; 8 height: auto ; 9 z-index: -100 ; 10 background: url('/img/top.jpg') no-repeat ; 11 background-size: cover ; 12} 13
mts10806さん、ご指摘ありがとうございます。
修正させて頂きました。
動作環境（OS、ブラウザ）はなにかを書くと回答を得られやすくなるかもしれません。
また、他のOSやブラウザではどうかも確認すると、ブラウザの問題なのかとか絞り込めるようになると思います。
dice142さん、ご指摘ありがとうございます。
確かに動作環境のことを忘れていました！早速、修正させて頂きました。
windowsであればfirefoxとかも確認してみて、同じ現象が起こるか確認した方が良さそうですね。
dice142さん、たびたびのご指摘ありがとうございました。
追記しましたのでご教示頂ければ幸いです。
「chrome 背景 動画」でGoogle検索すると結構出てきますね。
もしかしたらこれかも。
「chrome」というワードを抜かして調べていました。
ヒントありがとうございます。
回答1件
0
自己解決
mts10806さんのヒントを元に検索しました。
chromeの場合、無音でも再生できない事象があるそうです。
その場合「muted」を付け加えることで再生できます。
こちらの記事を参考にしました。
Chrome最新版にて背景動画が自動再生されない事象：原因と対処方法
またiPhoneですが、このような記事を発見しました。
自分はまだ未熟なので理解が出来ていません。追って分かったら、わかりやすく書こうと思います。
iPhoneでvideoタグで指定してた動画が表示されない
皆様、ありがとうございました。
投稿2019/02/19 04:41
編集2019/02/19 04:44総合スコア11
