6

HTML5 で要素をミラーリングするにはどうすればよいですか? 私は最初にスケール/回転で CSS 変換を使用しようとしましたが、残念ながらそれはコントロールをビデオ要素にもミラーリングします。ビデオ自体をミラーリングしたいだけです。

技術的には、キャンバスを使用し、ビデオをキャンバスに描画し、それを画像操作でミラーリングすることはできますが、非常に単純なものにしては複雑すぎる/無駄に思えます。

これが必要な理由は、ウェブカメラの入力を取得していて、残念ながらミラーリングされているためです。これは、ユーザーにとって少し直感的ではありません。この画像にいくつかの画像処理を実行し、結果も表示します。コントロールをミラーリングせずにビデオをミラーリングできれば、すべてうまくいきます。

助言がありますか？

4

2 に答える 2

3

ビデオがコントロールと一緒にミラーリングされることが問題である場合は、ビデオのデフォルト コントロールを使用せず、javascript で作成します。

w3.org の HTML5 Videoの例に従えば、作成するのは難しくありません。また、bloken-link.comのBuilding HTML5 video controls javascriptなど、それを行うためのオンライン チュートリアルもいくつかあります。

これにより、ビデオのコントロールを個別にスタイルする自由も得られるため、css を使用してそれらに適用する変換を決定できます。元のコントロールを模倣したい場合は、それらをホバー時に表示し、CSS アニメーションを使用してフェードアウトさせることを検討してください。

補遺: VideoJSをチェックしてください。これはまさにそれを実現する非常に優れたソリューションです。ただし、変換を試してみる必要があります。

于 2013-10-27T04:40:35.597 に答える
1

次のcssでこの問題を解決しました：

#container{
  -webkit-appearance: none;
  transform: rotateY(180deg);
}

#container video::-webkit-media-controls{
  transform: rotateY(180deg) !important;
}
于 2021-10-25T18:50:00.653 に答える