Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8728

ChromeでCSSのTransformと動画再生を6画面で併用したら…

$
0
0

動画の再生が止まってしまった。。ので解消の方法をメモ

状態の再現

Chromeを複数立ち上げて
動画、CSSのアニメーション、CSSのアニメーション、CSSのアニメーション
を同時に表示する。。

試した限りでは
CSSアニメのタブが2つまでなら共存できた
3つ以上からは、動画ページの動画が停止した

CSSアニメが終了すると、一瞬は再生された。

原因っぽい?箇所

GPUが良くない?
Videoと3Dが交互になって、そのタイミングで動画再生されたので
VideoのGPUレンダを停止できればよさそう?
NoName_2019-11-20_19-49-49_No-00.png
NoName_2019-11-20_19-49-29_No-00.png

解消した方法

下記設定にすることで、動画再生とCSSアニメ再生が共存できた

CSSアニメは、3つ以上になると、カクつき始めてしまったが
動画が停止は回避できたのでOK

ChromeのGPU動画デコードの停止

NoName_2019-11-20_20-2-43_No-00.png

(CSSがGPU再生すると同時にはできないようなので、動画再生はGPU使わない)

chrome://flags/#disable-accelerated-video-decode

Chromeのハードウェアアクセラレーションを有効化

NoName_2019-11-20_20-3-10_No-00.png

(CSSの描画をGPUでがんばってもらう)

設定 > 詳細 > システム > ハードウェア アクセラレーションが使用可能な場合は使用する

参考サイト

各種ブラウザのハードウェアアクセラレーション(GPU)の有効/無効の切り替え
http://utaukitune.ldblog.jp/?p=133


Viewing all articles
Browse latest Browse all 8728

Latest Images

Trending Articles

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>