ビデオタグで自動ポスター画像生成を無効にするにはどうすればよいですか?
-
28-09-2019 - |
質問
私はビデオタグで「ポスター」属性を使用していますが、少なくともWebKitブラウザで機能するように見える方法は、ポスター画像をロードしてから、ビデオが十分にロードされると、そのポスターをオートに置き換えます。ビデオファイル自体から生成されたポスター。
ただし、私のポスター画像は、自動生成されたポスターと一致しないため、1つの画像が読み込まれた奇妙なエクスペリエンスが発生し、自動生成画像に数秒で交換されます。自動生成された画像が使用されないようにする方法はありますか?
解決
私たちはなんとかこれを回避することができました HTML5のJWプレーヤー. 。最も簡単な方法は次のとおりです。
- 場合u003Cvideo> SRC プロパティが設定され、設定され、その場所を保存します。
- クリックハンドラーをに追加しますu003Cvideo>鬼ごっこ。クリックしたら、再セットしますu003Cvideo>SRCプロパティ。
これは正常に機能しますが、再び登場するポスターイメージは、JSマジックをもう少ししない限り、元のポスターと同じではないため、再生に問題があることを意味します。
また、あなたが何も上に置くことができないことに注意する価値がありますu003Cvideo>モバイルサファリのタグ。これを回避する方法:
- をセットするu003Cvideo>CSS 表示:なし
- 別のものを追加しますu003Cdiv>同じ場所で、u003Cvideo>要素、Poser画像と同じCSS背景画像を備えています。
- クリックハンドラーを新しいに追加しますu003Cdiv>。新しいときu003Cdiv>クリックして、新しいものを非表示にしますu003Cdiv>ビデオタグを表示します。
- ビデオが再生が完了したら、隠しますu003Cvideo>そして、新しいものを見せますu003Cdiv>。
うまくいけばそれは助けになります!
一番、
ザック
開発者、ロングテールビデオ
他のヒント
これは、WebKitブラウザがスペックを実装することを決定した方法です(上記のように)。それは非常に直感的ではなく、ユーザーが再生ボタンにぶつかるまでポスター画像を維持することを好むことに同意します。バグレポート(または機能要求)をWebKitに送信することをお勧めします https://bugs.webkit.org/ .
オプションのみが、ビデオの最初のフレームがポスターと同じか、まったく使用しないことを確認することです。
「ビデオ要素が一時停止し、現在の再生位置がビデオの最初のフレームである場合、要素はユーザーエージェントの裁量で、現在の再生位置またはポスターフレームに対応するビデオのフレームを表します。」 - http://www.w3.org/tr/html5/video.html#attr-video-ポスター