HTML5プロフェッショナル認定試験レベル2 例題解説
例題解説とその内容については、例題提供者の監修です。内容や試験問題に関わるお問い合わせにつきましては、LPI-Japan事務局ではお応えできませんのでご了承ください。
例題解説のご提供者さまを募集中です。LPI-Japan事務局までぜひご投稿ください。選ばれた方の例題解説は本サイトに掲載させていただきます。
2.4 マルチメディア
- 例題4.6 「2.4.1 メディア要素のAPI」
- レベル2の出題範囲「2.4.1 メディア要素のAPI」からの出題です。
動画ファイルを再生している環境において、再生位置を変えたいときに利用するプロパティとして正しいものはどれか選択せよ -
- currentTime
- playtime
- seekTime
- playbackRate
※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日：2020年2月5日
答えはこちら
- 正解 A
- currentTimeプロパティで再生位置を指定することで、現在の再生位置を変更することが可能です。playtimeおよびseekTimeというプロパティは存在しません。
playbackRateは再生速度を示すプロパティであり、変更することで、再生速度を変更することができますが、再生位置を変更することはできません。
例題解説の提供：株式会社クリーク・アンド・リバー社
関口 和真 氏
- 例題4.5 「2.4.1 メディア要素のAPI」
- レベル2の出題範囲「2.4.1 メディア要素のAPI」からの出題です。
video要素のリソースを再ロードする際に使用する方法として正しいものを選択しなさい。 -
- reload()メソッドを呼び出す
- load()メソッドを呼び出す
- preloadプロパティの値をfalseにしたあとtrueにする
- sourceプロパティに再ロードするリソースのURLを代入する
※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日：2018年10月2日
答えはこちら
- 正解 B
- audio,video共に、メディアリソースの再ロード方法は共通しています。
audio要素、video要素のDOMとしてHTMLMediaElementオブジェクトが取得できます。
HTMLMediaElementオブジェクトのload()メソッドを呼び出すことで、再ロードをおこなうことができます。
メディアリソースのロードの状態によって、readyStateプロパティの値が変化する点にも注意してください。
その他の選択肢については以下の通りです。
Aのreload()メソッドは存在しません。
Cのpreloadプロパティは存在しません。
video,audio要素にpreload属性はありますが再ロードには関係ありません。設定可能な値として、映像や音声を再生前に読み込むかどうかのヒントを与えるために使用します。読み込みを行うべきではないnone、長さなどのメタデータだけを読み込むmetadata、ファイル全体をダウンロードしても良いとするautoがあります。
Dのsourceプロパティは存在しません。srcプロパティにURLを代入すると再ロードが行なわれます。
例題解説の提供：株式会社クリーク・アンド・リバー社
HTML5レベル２認定者 高井 歩 氏
- 例題4.4 「2.4.1 メディア要素のAPI」
- レベル2の出題範囲「2.4.1 メディア要素のAPI」からの出題です。
audio要素の再生を一時停止しているかどうかをJavaScriptで判別するために仕様できるプロパティはどれか、正しいものを選択しなさい。 -
- playedプロパティがfalseになっている
- endedプロパティがtrueになっている
- pausedプロパティがtrueになっている
- readyStateプロパティが"pause"になっている
※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日：2018年8月21日
答えはこちら
- 正解 C
- audio,video共に、再生/停止状態の取得方法は共通しています。
pausedプロパティがfalseであれば再生、trueであれば停止しています。
ページが読み込まれてからファイルが再生される前や、再生が完了してループせずに終了した場合にも、pausedはtrueになります。
その他の選択肢については以下の通りです。
Aのplayedプロパティは現在再生している位置を表わすTimeRangesオブジェクトを返します。
Bのendedプロパティは最後まで再生するとtrueになります。
DのreadyStateはファイルの読み込み状態を表わします。
例題解説の提供：株式会社クリーク・アンド・リバー社
HTML5レベル２認定者 高井 歩 氏
- 例題4.3 「2.4.1 メディア要素のAPI」
- レベル2の出題範囲「2.4.1 メディア要素のAPI」からの出題です。
video要素で再生されるビデオデータをcanvas上で表示する以下のスクリプトについて[ A ]にはいるスクリプトとして正しいものを選択しなさい。 -
- 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);
<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>
※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
答えはこちら
- 正解 A
- Canvas上での動画表示に関する問題です。
video要素のビデオデータから、1フレームの画像を取得してcanvas要素に表示することができます。
setIntervalメソッドなどを使用して取得と表示を繰り返すことにより、ビデオデータをcanvas要素上で再生したかのように見せることができます。
canvas上でエフェクトを加えたり、スマートフォンではvideo要素が全画面表示になってしまう問題などを避けることに使用されています。
ビデオデータをcanvas要素(の2Dコンテキスト)に書き出すには、drawImageメソッドを使用します。
drawImageメソッドの第一引数にvideo要素をそのまま指定することで、自動的に現在再生しているフレームの画像が取得できます。
drawFrameやgetFrameImageというメソッドはありません。
任意の再生位置の画像が取得したい場合は、video要素の方をコントロールして再生位置の頭出しを行ないます。
また、出題のスクリプト内では、1000/30 ms 毎に繰り返しという値を設定していますが、これは元動画のフレームレート(この場合は30fps)に合せないと表示にガタつきが生じます。
例題解説の提供：株式会社クリーク・アンド・リバー社
HTML5レベル２認定者 高井 歩 氏
- 例題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レベル２認定者 高井 歩 氏
- 例題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>- エラーメッセージが表示される。
- 音声が再生される。
- 映像が表示される。
- ３つのファイルが連続して再生される。
※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
答えはこちら
- 正解 B, C
- このスクリプトでは、videoタグに再生されたメディアの映像に幅あるいは高さがなければ、videoタグのposter要素にて代替画像を表示する様に設定しています。
- 映像の有無をチェックするためには、仕様上定義されているvideoTracksを使用したいところですが、実装されていないため、幅や高さでチェックしています。同様に、音声の有無もaudioTracksが定義されていますが実装されていません。
- sourceタグが複数記述されていますが、再生できるものを一つだけ再生します。
sourceタグは、クライアントでの再生可能性を上げるためにメディアタイプなどを複数提示するために使用されるもので、プレイリストではありません。
例題解説の提供：
LPI-Japanプラチナスポンサー ＮＥＣソリューションイノベータ株式会社
武藤 周 氏
HTML5プロフェッショナル認定試験レベル2 例題解説
