< TOPに戻る <

Sessions

フロントエンドのエンジニアリングや、マークアップ、デザインなど、
Webに関わる全ての人に是非届けたい珠玉のセッション構成でお送りしております。

C-6 15:15 〜

# React Hooksで<video>を乗りこなす

「映像プレーヤー」を作成したことはあるでしょうか?
作成したことはなくても、おそらく日々様々なプレーヤーを利用していると思います。
HTML5で定義されるHTML Video elementからは、メディア状態・エラー・DRM複合処理・広告再生・読み込み、などブラウザごとに多種多様なイベントが発生します。プレーヤーはこのイベントに加え、ユーザーから入力される複雑な操作も併せて処理する必要があります。UIや内部要件を実装するには、このイベント制御を適切にハンドルし、のりこなすことが必要不可欠なのです。
今回のセッションでは、複雑な処理をReactHooksを用いてHTML Video elementを制御する手法を、現在映像サービス「GYAO!」でプロダクションで使用されているプレーヤーを事例に、フロントエンドの観点からご紹介します。

浜田 真成
ヤフー株式会社 / 株式会社GYAO

ヤフーでフロントエンド技術領域、デザイン領域を担当するエンジニア。映像事業領域のGYAOのWEBフロントエンドを統括し、プレーヤーやBFFなど幅広く開発を行う。WEB+DB PRESS の連載記事としてStorybook、HeadlessCMSの記事を執筆。


SHARE