More Related Content
第九回ネットワークチーム講座資料
- 2. 概要 • audio要素 • video要素 • source要素
- 4. 使用例 • 例１ <audio src=“xxx.mp3” controls></audio> • 例２ <audio controls><source src=“xxx.mp3” type=“audio/mp3”></audio>
- 5. 書いてみよう
- 7. audio要素の属性 • audio要素には７つの属性がある • src属性 • preload属性 • autoplay属性 • loop属性 • controls属性 • mediagroup属性 • muted属性
- 8. src属性 • 音声ファイルのパスを指定する属性 • <audio src=“xxx.mp3”></audio>
- 9. preload属性 • 音声ファイルの読み込みを制御する属性 • 再生時まで読み込まない <audio src=“xxx.mp3” preload=“none”></audio> • メタ情報のみ先に読み込む <audio src=“xxx.mp3” preload=“metadata”></audio> • 先に読み込む <audio src=“xxx.mp3” preload=“auto”></audio>
- 10. autoplay属性 • 音声が再生可能になった場合に 自動で再生を行なうかを指定する論理属性 • 音声を自動再生させる <audio src=“xxx.mp3” autoplay><audio>
- 11. loop属性 • 再生が終了した後に、頭から再生させるかを指定 する論理属性 • 音声をループさせる <audio src=“xxx.mp3” loop><audio>
- 12. controls属性 • 再生ボタンや停止ボタンなどのユーザインター フェースの表示を指定する論理属性 • ユーザインターフェースを表示 <audio src=“xxx.mp3” controls><audio>
- 13. mediagroup属性 • メディアグループの名前を指定する属性 • 主に、複数のメディア要素を連携させたいときに使用する <audio src=“xxx.mp3” mediagroup=“player”><audio>
- 14. muted属性 • 音声を出さずに再生することを指定する論理属性 • 音声をミュートさせる <audio src=“xxx.mp3” muted><audio>
- 16. 使用例 • 例１ <video src=“xxx.mp4” controls></video> • 例２ <video controls><source src=“xxx.mp4” type=“video/mp4”></video>
- 17. 書いてみよう
- 19. video要素の属性 • video要素にはaudio要素にある属性の他に３つの属性がある • poster属性 • width属性 • height属性
- 20. poster属性 • 動画を再生できない時に、代わりとして表示させる 画像のファイルパスを指定する属性 • <video src=“xxx.mp4” poster=”xxx.jpg”></video>
- 21. width属性・height属性 • width属性は動画の幅を指定する属性 • height属性は動画の高さを指定する属性 <video src=“xxx.mp4” width=”640” height=“360”></video>
- 22. source要素 • HTML5で新しく追加された要素 • source要素は再生候補のメディアファイルを指定する要素 • この要素はaudio要素・video要素の子要素として使用する
- 23. 使用例 • 例１ <audio controls><source src=“xxx.mp3” type=“video/mp3”></audio> • 例２ <video controls> <source src=“xxx.mp4” type=“video/mp4”> <source src=“xxx.ogv” type”video/ogv”> </video>
- 24. source要素の属性 • source要素には３つの属性がある • src属性(必須属性) • type属性 • media属性
- 25. src属性 • メディアファイルのパスを指定する属性 • <source src=“xxx.mp3”> • <source src=“xxx.mp4”>
- 26. type属性 • メディアファイルのMIMEタイプを指定する属性 • コーデック名も指定することができる • ブラウザがメディアファイルを取得する前に再生可能かどうかを判断できる • <source src=“xxx.mp3” type=“audio/mp3”> • コーデックあり(avc1.42E01E=H.264, mp4a.40.2=AAC-LC) • <source src=“xxx.mp4” type=“ video/mp4; codecs=‘avc1.42E01E, mp4a.40.2’ ”>
- 27. media属性 • メディアクエリを指定する属性 • コンピュータ画面を対象にする • <source src=“xxx.mp4” media=“screen”> • テレビを対象にする • <source src=“xxx.ogv” media=“tv”>