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

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

2.4 マルチメディア

例題4.3 「2.4.1 メディア要素のAPI」
レベル2の出題範囲「2.4.1 メディア要素のAPI」からの出題です。
video要素で再生されるビデオデータをcanvas上で表示する以下のスクリプトについて[ A ]にはいるスクリプトとして正しいものを選択しなさい。

<video controls id="vsrc" width="300" height="200" autoplay>
<source src="video/sample.mp4">
<source src="video/sample.webm">
<source src="video/sample.ogg">
</video>

<canvas id="screen" width="300" height="200"></canvas>

<script>
var video = document.getElementById("vsrc");
var framerate = 1000/30;

setInterval(function(){
  var canvas = document.getElementById('screen');
  var ctx = canvas.getContext("2d");
  [ A ]
}, framerate);
</script>

  • ctx.drawImage(video, 0, 0, 300, 200);
  • ctx.drawFrame(video, 0, 0, 300, 200);
  • ctx.drawImage(video.getFrameImage(),0,0,300,200);
  • ctx.drawFrame(video.getFrameImage(),0,0,300,200);

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

答えはこちら

正解 A
Canvas上での動画表示に関する問題です。

video要素のビデオデータから、1フレームの画像を取得してcanvas要素に表示することができます。
setIntervalメソッドなどを使用して取得と表示を繰り返すことにより、ビデオデータをcanvas要素上で再生したかのように見せることができます。
canvas上でエフェクトを加えたり、スマートフォンではvideo要素が全画面表示になってしまう問題などを避けることに使用されています。

ビデオデータをcanvas要素(の2Dコンテキスト)に書き出すには、drawImageメソッドを使用します。
drawImageメソッドの第一引数にvideo要素をそのまま指定することで、自動的に現在再生しているフレームの画像が取得できます。

drawFrameやgetFrameImageというメソッドはありません。

任意の再生位置の画像が取得したい場合は、video要素の方をコントロールして再生位置の頭出しを行ないます。

また、出題のスクリプト内では、1000/30 ms 毎に繰り返しという値を設定していますが、これは元動画のフレームレート(この場合は30fps)に合せないと表示にガタつきが生じます。

出題範囲の詳細

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

例題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ソリューションイノベータ株式会社
武藤 周 氏

メルマガ登録E-mail Magazine

受験を決めたら、まずメルマガ登録。
学習に役立つ例題解説付きメールマガジンを定期発行

氏名

ご提供いただく個人情報の取り扱いについて

ご提供いただいた情報につきましては、当団体内において管理し第三者には開示いたしません。 ご提供いただいた情報につきましては、当団体のオープンソース普及/促進活動のための統計データに反映し、Linux技術者認定事業サービスの充実に活用させて頂くとともに、当団体からの最新情報やイベント情報のご案内を差上げる目的に利用させていただきます。 当団体のプライバシーポリシーについてはこちらをご参照ください。