フロントエンド学習記(仮題)

主にフロントエンドについて学習した事を記録・メモしていきます。

【学習ログ】MDN JavaScript チュートリアル (15 回目)

はじめに

この記事は、JavaScript チュートリアルの学習ログです。

学習したもの

MDN にある JavaScriptチュートリアルを学習しました。


MDN JavaScript コーナー

チュートリアル
  ┣ 完全な初心者向け
  ┃
  ┣ 中級者向け
  ┃ ┣ クライアントサイド Web API
  ┃ ┃ ┣ Web API の紹介
  ┃ ┃ ┣ 文章の操作
  ┃ ┃ ┣ サーバからのデータ取得
  ┃ ┃ ┣ サードパーティ API
  ┃ ┃ ┣ 絵を描く
  ┃ ┃ ┣ 動画と音声の API(本日の学習箇所)
  ┃ ┃ ┗ クライアント側でのデータ保存
  ┃ ┃
  ┃ ┣ JavaScript 「再」入門
  ┃ ┣ JavaScript のデータ構造
  ┃ ┣ 等価比較と同一性
  ┃ ┗ クロージャ
  ┃
  ┗ 上級者向け


概要

チュートリアルで習った事の概要は下記の通りです。

動画と音声の API

ブラウザ API を使用してビデオとオーディオの再生を制御する方法を学習します。

ノート・メモ

  • <video>そして<audio>要素を使うことで、ウェブページにビデオとオーディオを 埋め込むことができます。

  • <video>に controls 属性をつける事で、デフォルトの再生コントロールセットを 有効にできます。しかし、ブラウザーごとに異なるのでクロスブラウザー対応する 場合に問題があります。この問題を解決する為に、ネイティブコントロールを非表示に して(controls 属性を削除する)、HTML、CSS、および JavaScript を使用して独自の プログラミングを行います。

  • HTMLMediaElement API は、ビデオおよびオーディオプレーヤーをプログラムで制御 できる機能を提供します。

分かった事

  • HTMLMediaElement API を利用して、プレーヤーのコントロール部分を作成する考え方 がうっすら分かりました。

分からなかった事

まとめ

Web の動画サイトのプレーヤーもこうやって作られているのだなぁと感心しました。 分からない事が増えてきていて、焦りを感じますが少しづつ着実に学習していきたい と思います。

最後までご覧頂きありがとうございました。