マルチメディア関連サンプル

音楽・映像：ＮＨＫクリエイティブ・ライブラリー

目次

audio要素【オーディオ】 ・source要素【メディアソース】

・audio要素 (src属性)

<audio src="media/drum-roll.mp4" >未サポート</audio>

・audio要素 (autoplay属性・controls属性・loop属性・muted属性)

<audio src="media/drum-roll.mp4" autoplay controls loop muted>未サポート</audio>

・audio要素
・source要素

<audio controls>
  <source src="media/drum-roll.mp4">
  未サポート
</audio>

・JavaScript

<script>
<!--
  var audio;
  function onLoad() {
   var obj;
   audio = document.getElementById("audio-sample");
   obj = document.getElementById("text-time-audio");
   obj.value = "";
   obj = document.getElementById("text-volume-audio");
   obj.value = "";
   obj = document.getElementById("text-info-audio");
   obj.value = "";
  }
  function onAudioTimeUpdate() {
   var obj = document.getElementById("text-time-audio");
   obj.value = audio.currentTime;
  }
  function onAudioVolumeChange() {
   var obj = document.getElementById("text-volume-audio");
   obj.value = Math.round(audio.volume * 10) / 10;
  }
  function playAudio() {
   audio.play();
  }
  function pauseAudio() {
   audio.pause();
  }
  function volumeAudio(volume) {
   volume = audio.volume + volume;
   if (volume < 0) volume = 0;
   if (1.0 < volume) volume = 1.0;
   audio.volume = volume;
  }
  function changeAudioControls() {
   audio.controls = ! audio.controls;
  }
  function changeAudioLoop() {
   audio.loop = ! audio.loop;
  }
  function changeAudioMute() {
   audio.muted = ! audio.muted;
  }
  function getAudioInfo() {
   var text, obj;
   text = "duration【オリジナルの秒数】 = " + audio.duration;
   obj = document.getElementById("text-info-audio");
   obj.value = text;
  }
  
// -->
</script>

<body onload="onLoad();">
  ・・・
  <audio id="audio-sample" src="media/drum-roll.mp4" ontimeupdate="onAudioTimeUpdate();" onvolumechange="onAudioVolumeChange();" controls>未サポート</audio><br>
  <noscript style="color:Red"> (JavaScript 無効)</noscript>
  <input id="text-time-audio" readonly style="width:100px; background-color:lightgray;">
  Vol：<input id="text-volume-audio" readonly style="width:50px; background-color:lightgray;"><br>
  <button type="button" onclick="playAudio()">再生</button>
  <button type="button" onclick="pauseAudio()">一時停止</button>
  <button type="button" onclick="volumeAudio(-0.1)">ボリューム (-0.1)</button>
  <button type="button" onclick="volumeAudio(+0.1)">ボリューム (+0.1)</button>
  <button type="button" onclick="changeAudioControls()">コントロール表示 切替</button>
  <button type="button" onclick="changeAudioLoop()">再生ループ 切替</button>
  <button type="button" onclick="changeAudioMute()">ミュート 切替</button>
  <br>
  <button type="button" onclick="getAudioInfo()">情報取得</button><br>
  <textarea id="text-info-audio" rows="2" readonly style="background-color:lightgray; width:99%;"></textarea>

volume：


video要素【ビデオ】 ・source要素【メディアソース】 ・track要素【テキストトラック】

・video要素 (src属性)

<video src="media/H2A5-1.mp4" width="320" height="180">
  未サポート
</video>

・video要素 (autoplay属性・controls属性・muted属性)

<video src="media/H2A5-1.mp4" width="320" height="180"
  autoplay controls muted>
  未サポート
</video>

・video要素 (controls属性・loop属性・poster属性)

<video src="media/H2A5-1.mp4" width="320" height="180"
  controls loop poster="media/poster.png">
  未サポート
</video>

・video要素
・source要素

<video width="320" height="180" controls>
  <source src="media/H2A5-1.mp4">
  未サポート
</video>

・video要素
・track要素 (kind属性：subtitles【翻訳字幕】・srclang属性・label属性)
(翻訳字幕をサポートしていれば、[CC]等のボタンでWebVTT 形式のファイル内容を表示、label属性で切替可)

<video src="media/H2A5-1.mp4" width="320" height="180" controls>
  <track kind="subtitles" srclang="ja" src="media/H2A5-1-subtitle-ja.vtt" label="日本語 字幕">
  <track kind="subtitles" srclang="ja" src="media/H2A5-1-subtitle-en.vtt" label="英語 字幕">
  未サポート
</video>
【日本語 字幕 ファイル内容 (H2A5-1-subtitle-ja.vtt)】
WEBVTT FILE

1
00:00:00.000 --> 00:00:15.000
日本語字幕 (00:00 ～ 00:14)

2
00:00:15.000 --> 00:00:30.000
日本語字幕 (00:15 ～ 00:29)

3
00:00:30.000 --> 00:00:45.000
日本語字幕 (00:30 ～ )
【英語 字幕 ファイル内容 (H2A5-1-subtitle-en.vtt)】
WEBVTT FILE

1
00:00:00.000 --> 00:00:15.000
English subtitle (00:00 - 00:14)

2
00:00:15.000 --> 00:00:30.000
English subtitle (00:15 - 00:29)

3
00:00:30.000 --> 00:00:45.000
English subtitle (00:30 -)

・video要素
・track要素 (kind属性：captions【字幕】・label属性)
(字幕をサポートしていれば、[CC]等のボタンでWebVTT 形式のファイル内容を表示)

<video src="media/H2A5-1.mp4" width="320" height="180" controls>
  <track kind="captions" src="media/H2A5-1-caption.vtt" label="字幕">
  未サポート
</video>
【字幕 ファイル内容 (H2A5-1-caption.vtt)】
WEBVTT FILE

1
00:00:00.000 --> 00:00:15.000
00:00 ～ 00:14 の字幕

2
00:00:15.000 --> 00:00:30.000
00:15 ～ 00:29 の字幕

3
00:00:30.000 --> 00:00:45.000
00:30 ～ の字幕

・JavaScript

<script>
<!--
  var video;
  function onLoad() {
   var obj;
   video = document.getElementById("video-sample");
   obj = document.getElementById("text-time-video");
   obj.value = "";
   obj = document.getElementById("text-info-video");
   obj.value = "";
  }
  function onVideoTimeUpdate() {
   var obj = document.getElementById("text-time-video");
   obj.value = video.currentTime;
  }
  function playVideo() {
   video.play();
  }
  function pauseVideo() {
   video.pause();
  }
  function moveVideo(skip) {
   video.currentTime += skip;
  }
  function changeVideoControls() {
   video.controls = ! video.controls;
  }
  function changeVideoLoop() {
   video.loop = ! video.loop;
  }
  function changeVideoMute() {
   video.muted = ! video.muted;
  }
  function getVideoInfo() {
   var text, obj;
   text = "videoWidth【オリジナルの幅】 = " + video.videoWidth + "\n" +
   "videoHeight【オリジナルの高さ】 = " + video.videoHeight + "\n" +
   "duration【オリジナルの秒数】 = " + video.duration;
   obj = document.getElementById("text-info-video");
   obj.value = text;
  }
// -->
</script>

<body onload="onLoad();">
  ・・・
  <video id="video-sample" src="media/H2A5-1.mp4" ontimeupdate="onVideoTimeUpdate();" controls width="320" height="180">未サポート</video><br>
  <noscript style="color:Red"> (JavaScript 無効)</noscript>
  <input id="text-time-video" readonly style="background-color:lightgray;"><br>
  <button type="button" onclick="playVideo();">再生</button>
  <button type="button" onclick="pauseVideo();">一時停止</button>
  <button type="button" onclick="moveVideo(-5);">－５秒</button>
  <button type="button" onclick="moveVideo(+5);">＋５秒</button>
  <button type="button" onclick="changeVideoControls();">コントロール表示 切替</button>
  <button type="button" onclick="changeVideoLoop();">再生ループ 切替</button>
  <button type="button" onclick="changeVideoMute();">ミュート 切替</button>
  <br>
  <button type="button" onclick="getVideoInfo();">情報取得</button><br>
  <textarea id="text-info-video" rows="4" readonly style="background-color:lightgray; width:99%;"></textarea>




関連

<audio>【オーディオ】 ・<source>【メディアソース】 ・<track>【テキストトラック】 ・<video>【ビデオ】