• このエントリーをはてなブックマークに追加

HTML5プロフェッショナル認定試験レベル2 サンプル問題

例題解説とその内容については、例題提供者の監修です。内容や試験問題に関わるお問い合わせにつきましては、LPI事務局ではお応えできませんのでご了承ください。
例題解説のご提供者さまを募集中です。LPI-Japan事務局までぜひご投稿ください。選ばれた方の例題解説は本サイトに掲載させていただきます。

2.4 マルチメディア

例題4.2 「2.4.1 メディア要素のAPI」
レベル2の出題範囲「2.4.1 メディア要素のAPI」からの出題です。
audio要素でメディアファイルが存在しない場合の判定に使用できる、HTMLMediaElementのプロパティを全て選択しなさい。
  • networkState
  • readyState
  • mediaLoaded
  • error
  • loadError

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

正解 A, B
メディアの読み込みに成功すると、
readyStateプロパティはHAVE_ENOUGH_DATA(4)、
networkStateプロパティはNETWORK_IDLE(1)
を返すようになります。
指定したファイルが無いなど、メディアの読み込みに失敗すると、
readyStateプロパティはHAVE_NOTHING(0)、
networkStateプロパティはNETWORK_NO_SOURCE(3)
を返します。
その他の選択肢については、
C. mediaLoadedというプロパティはありません。
D. errorプロパティはネットワークからメディアをダウンロード中に発生したトラブルについての情報を表わすため、最初からリソースが存在しない場合の判定には使用できません。
E. loadErrorというプロパティはありません。

出題範囲の詳細

例題解説の提供:HTML5アカデミック認定校 株式会社クリーク・アンド・リバー社
HTML5レベル2認定者 高井 歩 氏

例題4.1 「2.4.1 メディア要素のAPI」
レベル2の出題範囲「2.4.1 メディア要素のAPI」からの出題です。
次のHTMLを表示した際の説明として正しいものをすべて選びなさい。
sample.html

<!DOCTYPE html>
<html lang="ja">
<head></head>
<body>
    <video id="sample" controls autoplay>
        <source src="tyw.flac" />
        <source src="oae.wav" />
        <source src="ths.mp3" />
    </video>
    <script>
        var video = document.getElementById("sample");
        video.addEventListener("play", function(){
            if(this.videoWidth == 0 || this.videoHeight == 0){
                this.poster="39.png";
            }
        }, false);
    </script>
</body>
</html>

  • エラーメッセージが表示される。
  • 音声が再生される。
  • 映像が表示される。
  • 3つのファイルが連続して再生される。

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

正解 B, C
このスクリプトでは、videoタグに再生されたメディアの映像に幅あるいは高さがなければ、videoタグのposter要素にて代替画像を表示する様に設定しています。
映像の有無をチェックするためには、仕様上定義されているvideoTracksを使用したいところですが、実装されていないため、幅や高さでチェックしています。同様に、音声の有無もaudioTracksが定義されていますが実装されていません。
sourceタグが複数記述されていますが、再生できるものを一つだけ再生します。
sourceタグは、クライアントでの再生可能性を上げるためにメディアタイプなどを複数提示するために使用されるもので、プレイリストではありません。

出題範囲の詳細

例題解説の提供:
LPI-Japanプラチナスポンサー NECソリューションイノベータ株式会社
武藤 周 氏

このページの先頭へ