re:newalhttp://blog.flect.co.jp/cloud/からさらに引っ越しています2019-06-28video要素の再生中のシーンを印刷するこんにちは、エンジニアの藤野です。HTMLへの動画の埋め込みにvideo要素が使われるようになって久しいですが、これをブラウザの機能を用いて印刷するとどのようになるかご存知でしょうか?とあるお客様から「動画の再生中のシーンを印刷したい」という要望を受け、調査したところ、各ブラウザによって結果が異なることが分かりました。本記事では各ブラウザの動作と、「再生中のシーンを印刷する」方法を紹介します。下記環境で動作を確認しました。上のEdge確認に用いたコードは下記のとおりです。Classification」の動画ファイルです。それでは各ブラウザでの動作を見ていきましょう。Firefox動画部分が真っ白になります。ブラウザでの表示:印刷時の表示:Chrome動画部分が真っ白になります。ブラウザでの表示:印刷時の表示:ときどき表示できる場合もあったのですが、その条件は分かりませんでした。Edge実はEdgeでは再生中のシーンがそのまま印刷できます。FirefoxとChromeで同様の動作を実装すればよいことになります。画面と印刷時でvideo要素とcanvas要素の表示を切り替えるCanvasは要素の作成時にvideo要素をソースとすることができます。https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImageこれを用いることで、video要素の現在の再生中の画像をcanvasとして表示できます。画面と印刷時でvideo要素とcanvas要素の表示を切り替えることで、再生中のシーンを印刷します。canvasへの表示drawImageメソッドでcanvasを描画します。eventを使って、再生中のシーンが描画されるようにします。video.videoHeight);}表示の切り替えメディアクエリを使って画面(screen)と印刷(print)の表示を切り替えます。CSSの@mediaルールを使うとシンプルに実装できます。}}試してみるFirefoxブラウザでの表示:印刷時の表示:印刷した瞬間のシーンが表示できました。Chromeブラウザでの表示:印刷時の表示:印刷した瞬間のシーンが表示できました。終わりに無事、印刷時にvideo要素の表示を再現することが出来ました。ブラウザでwebページを印刷したときの表示は、配置の調整はあるものの大体そのままという先入観があったので、今回は勉強になりました。最終的に作成したコードは下記のとおりです。id="c"></canvas></body></html>本記事の作成にあたって、下記ページを参考にさせていただきました。Gatewayに握りつぶされていたエンジニアの佐藤です。動画コンテンツモデレーションサービスの比較みなさんこんにちは。エンジニアの佐藤です。専門知識に合格しました月別アーカイブはてなブログをはじめよう!flect_techさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。