魔術師見習いのノート

プロフィール

魔術師見習い
Author魔術師見習い-_-.
Twitter魔術師見習い

コンピュータ関係のメモを主に書きます.

MENU

videoタグとaudioタグ

投稿日:
編集日:
タグ:

本稿はvideoタグとaudioタグに関するメモ。 参考にしたものとしては,このページなどを利用した。

videoタグ

動画を扱うためのタグ。どうやらWebブラウザはちゃんとバッファリングしてくれるようだった。

動画はWebで検索して見つかった動画素材を使用。ソースコードはこのような感じである。
<video controls width="320" height="240">
<source src="./downloads/a63/test.mp4">
<p>ご利用のWebブラウザでは再生できません。</p>
</video>
videoタグやaudioタグで囲んだものはそのタグをサポートしていないブラウザ向けの内容を書く。

再生できる動画フォーマットはWebブラウザに依存するが,videoタグはsourceタグを使用することでいくつかの候補を用意することができる。

<video controls autoplay poster="firstframe.jpg" width="320"
height="240">
<source src="./sample.flv">
<source src="./sample.mp4">
<p>ご利用のWebブラウザでは再生できません。</p>
</video>
videタグの属性には次のようなものがある。
controls
再生やシーク,音量などのインタフェースを表示。
autoplay
読み込み次第再生。
poster
初期画面。
width
横のサイズ。
height
縦のサイズ。

CSSやJavascriptを利用したコメント付き動画のサンプル

videoタグやCSS,Javascriptを使用すればニコニコ動画のように動画にコメントが流れるようなものも生成できる。以下にサンプルを示す。なお停止やシークの移動によりコメントが戻るような機能はついていない。また,サンプルでは追加されたタグは削除されないので注意。

CSS
div#comments {
  position:absolute;
  width:420px;
  height:200px;
  color:black;
  z-index:1;
  font-size:20px;
  text-align:center;
  opacity:0.7;
}

video#comments_video {
    z-index:0;
    position:absolute;
    padding-left:100px;
}
Javascript
const ID = 0;
const COMMENT = 1;
const START = 2;
const LEFT = 3;
const TOP = 4;
const DEFAULT_LEFT = 420
const COMMENT_NUM = 11;
var comments = [
    // [element, comment, start_time, default_left, top]
    [null, "comment0", 0, DEFAULT_LEFT, 60],
    [null, "comment1", 1000, DEFAULT_LEFT, 40],
    [null, "comment2", 1000, DEFAULT_LEFT, 80],
    [null, "comment3", 2000, DEFAULT_LEFT, 40],
    [null, "comment4", 3000, DEFAULT_LEFT, 140],
    [null, "comment5", 5000, DEFAULT_LEFT, 40],
    [null, "comment6", 5000, DEFAULT_LEFT, 80],
    [null, "comment7", 5000, DEFAULT_LEFT, 100],
    [null, "comment8", 6000, DEFAULT_LEFT, 80],
    [null, "comment9", 6500, DEFAULT_LEFT, 100],
    [null, "comment10", 7000, DEFAULT_LEFT, 160]
];
var rtime;
var time=0;
var min = 0;
var index=0;

function controlComments()
{
    var child;
    
    time += 50;
    if (index < COMMENT_NUM)
	while (comments[index][START] < time){
	    comments[index][ID] = document.createElement("span");
	    child = comments[index][ID];
	    document.getElementById("comments").appendChild(child)
	    child.innerHTML = comments[index][COMMENT];
	    child.style.color = "black";
	    child.style.position = "absolute";
	    child.style.left = comments[index][LEFT] + "px";
	    child.style.top = comments[index][TOP] + "px";
	    document.getElementById("comments").appendChild(comments[index][ID])
	    index += 1;
	}
    
    
    for (i=min;i<index;i++){
	if (comments[i][LEFT] > 0){
	    comments[i][LEFT] -= 5;
	    comments[i][ID].style.left = comments[i][LEFT] + "px";
	}else{
   	    // TODO: spanタグの削除
	    if (i>min)
		min = i;
	}
    }
}

function doPlay()
{
    rtime = setInterval('controlComments()', 50);
}

function doPause()
{
    clearInterval(rtime);
}
html5
<div id="comments">
</div>

<video id="comments_video" controls poster="firstframe.jpg" onplay="doPlay();" onpause="doPause()" width="320" height="240">
<source src="./downloads/a63/test.mp4">
<p>動画を再生するにはvideoタグをサポートしたブラウザが必要です。</p>
</video>

audioタグ

音楽を扱うためのタグ。 audioタグもvideoタグ同様controls属性を使えるが,以下にjavascriptやhtml,cssでインタフェースを作成した例を示す。



曲はWebで検索したものから適当なページを選択。

css3
hr {
    display:none;
}

section#music_controller {
    background-color:black;
    text-align:center;
    width:20em;
    padding:1em;
}

select {
    background-color:#111111;
    color:white;
    width:20em;
}

#music_seek {
    height:2em;
    width:20em;
}

.cir_btn {
    color:red;
    background-color:black;
    text-align:center;
    width:3em;
    height:3em;
    margin:0;
    padding:2px;
    border-radius: 30px;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
}
javascript
var playing = false;	// 再生中か否か
var rtime;		// シークバーの管理
var idx=0;		// 音楽番号
var MUSIC_NUM=3;	// 曲数
var MUSIC_LIST = [	// 曲名一覧
    "http://pied-piper.net/note/downloads/a63/Brahms-Symphony-No1-1st.mp3",
    "http://pied-piper.net/note/downloads/a63/Ravel-Bolero.mp3",
    "http://pied-piper.net/note/downloads/a63/Beethoven-SymNo7-1.mp3"
];


/* 再生位置をシークバーの位置に設定 */
function jumpMusicSeek()
{
    document.getElementById("my_audio").currentTime = document.getElementById("music_seek").value;
}


/* 曲名を指定した番号に変更 */
function changeMusic(i)
{
    if (playing)
	stopMusic();
    
    idx = i;
    document.getElementById("my_audio").src = MUSIC_LIST[idx];
    document.getElementById("music_list").selectedIndex = idx;
}


/* 選択された曲を再生 */
function selectMusic()
{
    if (playing)
	stopMusic();
    
    idx = document.getElementById("music_list").selectedIndex;
    document.getElementById("my_audio").src = MUSIC_LIST[idx];
    
    playMusic();
}


/* シークバーを進める */
function advanceMusicSeek()
{
    var audio = document.getElementById("my_audio");
    if (audio.ended){
	idx++;
	if (idx<MUSIC_NUM){
	    changeMusic(idx);
	    playMusic();
	}else{
	    idx = 0;
	    changeMusic(idx);
	}
    }
    document.getElementById("music_seek").value = audio.currentTime;
}


/* 次の曲を再生 */
function nextMusic()
{
    idx++;
    if (idx >= MUSIC_NUM){
        idx = 0;
    }
    if (playing){
        changeMusic(idx);
        playMusic();
    }else{
        changeMusic(idx);
    }
}


/* 前の曲を再生 */
function prevMusic()
{
    idx--;
    if (idx < 0){
        idx = MUSIC_NUM-1;
    }
    if (playing){
        changeMusic(idx);
        playMusic();
    }else{
        changeMusic(idx);
    }
}


/* 曲を再生/一時停止 */
function playMusic()
{
    if (playing){
	document.getElementById("play_button").innerHTML = "▶";
	document.getElementById("my_audio").pause();
	playing = false;
	clearInterval(rtime);
    }else{
	var audio;
	var seek = document.getElementById("music_seek");
	audio = document.getElementById("my_audio");
	audio.play();
	document.getElementById("play_button").innerHTML = "||";
	playing = true;
	rtime = setInterval("advanceMusicSeek()", 500);
    }
}


/* 再生中の音楽を停止 & 再生位置を0に */
function stopMusic()
{
    var audio = document.getElementById("my_audio");
    if (playing){
	audio.pause();	
	document.getElementById("play_button").innerHTML = "▶";
	document.getElementById("my_audio").pause();
	playing=false;
	clearInterval(rtime);
    }
    audio.currentTime = 0.0;
    document.getElementById("music_seek").value = audio.currentTime;
}


/* 早送り */
function ffMusic()
{
    audio = document.getElementById("my_audio");
    audio.currentTime += 2.0;
    document.getElementById("music_seek").value = audio.currentTime;
}


/* 巻き戻し */
function rewindowMusic()
{
    audio = document.getElementById("my_audio");
    audio.currentTime -= 2.0;
    document.getElementById("music_seek").value = audio.currentTime;
}


/* 曲の再生時間を設定 */
function setMaxTime()
{
    document.getElementById("music_seek").max = document.getElementById("my_audio").duration;
}
html5
<div id="music_player">
<section id="music_controller">
<button id="prev_button" onClick="prevMusic()" class="cir_btn">|◀◀</button>
<button id="rewind_button" onClick="rewindMusic()" class="cir_btn">◀◀</button>
<button id="play_button" onClick="playMusic()" class="cir_btn">▶</button>
<button id="stop_button" onClick="stopMusic()" class="cir_btn">■</button>
<button id="ff_button" onClick="ffMusic()" class="cir_btn">▶▶</button>
<button id="next_button" onClick="nextMusic()" class="cir_btn">▶▶|</button>

<br>

<input id="music_seek" type="range" onChange="jumpMusicSeek()" min="0.0" value="0.0">

<br>

<select id="music_list" onChange="selectMusic()" size="3">




<option selected>ブラ1</option>
<option>ボレロ</option>
<option>ベト7</option>
</select>
</section>

<audio id="my_audio" src="http://www.sousound.com/music/jazz_fusion/jazz_01.mp3" onloadeddata="setMaxTime();">
<p>このブラウザはaudioタグをサポートしていません</p>
</audio>
</div>

一覧