LoginSignup
3
2

More than 5 years have passed since last update.

videoタグの描画がchromeでおかしい

Posted at

videoタグで横幅100%である程度までウィンドウサイズに合わせてリサイズしたかったのですが
なんかchromeで描画がおかしい。。。

chromeのバージョン 27.0.1453.110
Mac、windows共に同様の現象あり

具体的には
・音がするから動画は再生されているが何故か表示はされない
・下までスクロールして戻ってくるとたまに表示される
・デベロッパーツールとかでスタイルを変えてみると表示される

みたいな現象だったので読み込まれてはいるけど描画途中で止まっちゃたみたいな感じかなーと推測。
しかしなぜかcontrolsを表示するときちんと表示される。。。

とりあえずデザイン的にcontrolsはいらなかったので後からjsで消すというクソ対応で乗り切る。。。

<video id="vid" poster="img/cover.jpg" controls autoplay preload="auto">
<source src="video/video.mp4" type="video/mp4">
<source src="video/video.ogv" type="video/ogg">
<source src="video/video.webm" type="video/webm">
<p id="titile_top"><img src="img/cover.jpg" width="1100" height="621" alt="カバー"/></p>
</video>
var v = document.getElementById("vid");
v.controls = false;

ちなみに動画のサイズは
mp4:8.7MB
ogv:16.4MB
webM:10MB

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2