魔術師見習いのノート

プロフィール

魔術師見習い
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>

JavaScriptコードレシピ

投稿日:
タグ:

本稿はJavascriptやHTML5，CSSを使ったコードレシピ集である(随時更新予定)。

ファイル生成

HTMLでボタンを押したら"Hello, World!"と記述されたテキストファイルを生成するには，次のようなコードを記述する。 

<script>
function createFile(){
  blob = new Blob(["Hello, World!\n"]); 
  var anchor = document.createElement("a");
  var evt = document.createEvent("MouseEvent");

  anchor.download = "file.txt";
  anchor.href = (window.URL || window.webkitURL).createObjectURL(blob);
  evt.initEvent("click", true, true, window, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
  anchor.dispatchEvent(evt);
}
<script>
<input type="button" onClick="createFile();" value="button">
IE

IE相手にで同じような処理を行わせたい場合，msSaveBlobやmsSaveOrOpenBlobメソッドを使用する方法がある。前者は保存させたい場合に，後者は保存か開くかを選ばせたい場合に使用する。使い方は同じであるが，ここではmsSaveBlobメソッドを使用した例を示す。 

function createCSV(){
  var str = "得意先コード,得意先名,電話番号,住所 \n\
AX0001,山田太郎,999-999-9999,ほげ県ふが市ぴよ町0-0 \n\
BX0002,鈴木次郎,000-000-0000,ほげ県ふが市ぴよ町1-1 \n\
CX0003,佐藤三郎,111-111-1111,ほげ県ふが市ぴよ町0-0 \n\
DX0004,衛宮四郎,222-222-2222,ほげ県ばあ市ぴよ町0-0\n";
  var blobObject = new Blob([str], { type: "text/csv" });
  window.navigator.msSaveBlob(blobObject, 'file.csv');
}

私の環境では生成されたファイルの文字コードがUTF-8になったが，それをShift_JISとして生成する方法は次の通りである。 

function createSJIS(){
  var bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
  var str = "得意先コード,得意先名,電話番号,住所 \n\
AX0001,山田太郎,999-999-9999,ほげ県ふが市ぴよ町0-0 \n\
BX0002,鈴木次郎,000-000-0000,ほげ県ふが市ぴよ町1-1 \n\
CX0003,佐藤三郎,111-111-1111,ほげ県ふが市ぴよ町0-0 \n\
DX0004,衛宮四郎,222-222-2222,ほげ県ばあ市ぴよ町0-0\n";
  var blobObject = new Blob([bom, str], { type: "text/csv" });
  window.navigator.msSaveBlob(blobObject, 'hoge.csv');
}

ページ?

selectタグやinnerHTMLを使用してページを指定するようにして画面の表示を変更する例を以下に示す。

得意先コード得意先名電話番号住所
AX0001山田太郎999-999-9999ほげ県ふが市ぴよ町0-0
BX0002鈴木次郎000-000-0000ほげ県ふが市ぴよ町1-1

/2 
<script>
var ary = ["AX0001山田太郎000-000-0000ほげ県ふが市ぴよ町0-0BX0001鈴木次郎000-000-0000ほげ県ふが市ぴよ町1-1","CX0001佐藤三郎000-000-0000ほげ県ふが市ぴよ町0-0DX0001衛宮四郎000-000-0000ほげ県ばあ市ぴよ町0-0"];
function changePage(){
  document.getElementById("cpage_tbody").innerHTML = ary[parseInt(this.cpage.value) - 1];
}
</script>

<div align="center">
  <table class="sep">
    <thead>
      <tr><th>得意先コード</th><th>得意先名</th><th>電話番号</th><th>住所</th></tr>
    </thead>

    <tbody id="cpage_tbody">
      <tr><td>AX0001</td><td>山田太郎</td><td>000-000-0000</td><td>ほげ県ふが市ぴよ町0-0</td></tr>
      <tr><td>BX0001</td><td>鈴木次郎</td><td>000-000-0000</td><td>ほげ県ふが市ぴよ町1-1</td></tr>
  </table>

  <br>

  <select id="cpage" name="cpage" onChange="changePage()">
    <option value="1" selected>1</option>
    <option value="2">2</option>
  </select>/2
</div>

jQueryの利用

投稿日:
修正日:
タグ:

jQueryとは，JavaScriptのコーディングを簡潔にしたり，強力にするためのライブラリである。本稿ではjQueryを使ったいろいろなサンプルを紹介する(随時更新予定)。

サンプル一覧

jQueryの基本

jQueryを使用する場合，はじめに通常のJavaScriptファイルと同様に，scriptタグを使ってファイルを読み込む。 

<script type="text/javascript" src="〜">

指定するURLもまたローカルでもグローバルでも良い。

そしてjQueryを実際に利用したい場合は，$関数またはjQuery関数を使う。使い方は両者とも全く同じと考えても問題はないはず。

例えば後述するハッシュ値に変換する機能を利用したい場合，次のように記述する。 

  • var str = "hoge";
var hash = $.md5(str);

  • var str = "hoge";
var hash = jQuery.md5(str);

また，タグに何らかの処理を行いたい場合は次のように記述する。 

$("セレクタ").関数(引数)

補足すると，セレクタとは，CSSで記述しているidやクラス，擬似クラスなどのことである(hoge {color:red;}のhogeの部分)。この文では，セレクタで指定したタグに，指定した関数の処理を行う。

このような処理を行う場合，ページのDOMツリーが用意された状態でなければならない。そのため，そのような処理は次のような関数を使用する。 

$(document).ready(実際に処理を行う関数);

これはwindow.onloadに似ているが，$(document).readyはwindow.onloadと異なり，HTML文書が完全にロードされなくてもHTMLをDOMツリーに変換した時点で処理される。ちなみにreadyは省略可能である。 

$(function(){});

住所の補完

「郵便番号を入力すると住所を自動保管してくれるjQueryプラグイン・jquery.jpostal.js - かちびと.net」を参考。というかコードはほぼコピペ。

郵便番号 〒 -
都道府県
市区町村
町域 
<div>
<script type="text/javascript" src="http://code.jquery.com/jquery-git2.js"></script>
<script type="text/javascript" src="http://jpostal.googlecode.com/svn/trunk/jquery.jpostal.js"></script>
<script type="text/javascript">
<!--
$(document).ready( function() {
  $('#postcode1').jpostal({
    postcode : [
      '#postcode1',
      '#postcode2'
    ],
    address : {
      '#prefecture'  : '%3',
      '#city'  : '%4',
      '#town'  : '%5'
    }
  });
});
-->
</script>
<form>


<span>郵便番号 〒</span>
<input id="postcode1" name="postcode1" maxlength="3">-<input id="postcode2" name="postcode2" maxlength="4"><br />

<span>都道府県</span>
<select id="prefecture" name="prefecture">
 <option value="北海道" selected>北海道</option>
 <option value="青森県">青森県</option>
 <option value="岩手県">岩手県</option>
 <option value="宮城県">宮城県</option>
 <option value="秋田県">秋田県</option>
 <option value="山形県">山形県</option>
 <option value="福島県">福島県</option>
 <option value="茨城県">茨城県</option>
 <option value="栃木県">栃木県</option>
 <option value="群馬県">群馬県</option>
 <option value="埼玉県">埼玉県</option>
 <option value="千葉県">千葉県</option>
 <option value="東京都">東京都</option>
 <option value="神奈川県">神奈川県</option>
 <option value="新潟県">新潟県</option>
 <option value="富山県">富山県</option>
 <option value="石川県">石川県</option>
 <option value="福井県">福井県</option>
 <option value="山梨県">山梨県</option>
 <option value="長野県">長野県</option>
 <option value="岐阜県">岐阜県</option>
 <option value="静岡県">静岡県</option>
 <option value="愛知県">愛知県</option>
 <option value="三重県">三重県</option>
 <option value="滋賀県">滋賀県</option>
 <option value="京都府">京都府</option>
 <option value="大阪府">大阪府</option>
 <option value="兵庫県">兵庫県</option>
 <option value="奈良県">奈良県</option>
 <option value="和歌山県">和歌山県</option>
 <option value="鳥取県">鳥取県</option>
 <option value="島根県">島根県</option>
 <option value="岡山県">岡山県</option>
 <option value="広島県">広島県</option>
 <option value="山口県">山口県</option>
 <option value="徳島県">徳島県</option>
 <option value="香川県">香川県</option>
 <option value="愛媛県">愛媛県</option>
 <option value="高知県">高知県</option>
 <option value="福岡県">福岡県</option>
 <option value="佐賀県">佐賀県</option>
 <option value="長崎県">長崎県</option>
 <option value="熊本県">熊本県</option>
 <option value="大分県">大分県</option>
 <option value="宮崎県">宮崎県</option>
 <option value="鹿児島県">鹿児島県</option>
 <option value="沖縄県">沖縄県 </option>
</select>
<br>

<span>市区町村</span>
<input type="text" id="city" name="city">
<br>

<span>町域</span>
<input type="text" id="town" name="town">
<br>

<input type="button" value="送信">
<input type="reset"  value="クリア">
</form>
</div>
住所の補完とinput:hidden

hiddenタイプの入力と組み合わせれば，前述の方法で住所を補完する場合でも1つの入力フォームの補完ができる。

郵便番号 〒 - 

<script type="text/javascript">
$(function() {
  $('#postcode1').jpostal({
    postcode : [
      '#postcode1',
      '#postcode2'
    ],
    address : {
      '#prefecture'  : '%3',
      '#city'  : '%4',
      '#town'  : '%5'
    }
  });
});
</script>

<span>郵便番号 〒</span>
<input id="postcode1b" name="postcode1b" maxlength="3" style="width:3em">-<input id="postcode2b" name="postcode2b" maxlength="4" style="width:4em;">
<input type="button" value="補完" onClick="document.getElementById('addressb').value = document.getElementById('prefectureb').value + document.getElementById('cityb').value + document.getElementById('townb').value;">
<br>
<input type="text" id="addressb">
<input type="hidden" id="prefectureb" name="prefectureb">
<input type="hidden" id="cityb" name="cityb">
<input type="hidden" id="townb" name="townb">
<br>

<input type="reset"  value="クリア">
</form>
</div>

このサンプルでは，onClick属性にそのまま処理を記述しているが，当然ながら関数化した方が可読性は良い。

並び替え可能なウィジェット

タグを並び替えるjQueryには、Sortableを使用する。
  1. hoge
  2. fuga
  3. piyo
  4. foo
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script>
$(function() {
    $('#sortable').sortable();
});
</script>
<ol id="sortable">
 <li id="d01"><div>hoge</div></li>
 <li id="d02"><div>fuga</div></li>
 <li id="d03"><div>piyo</div></li>
 <li id="d04"><div>foo</div></li>
</ol>
説明例
cursorドラッグ時のカーソルcursor: 'move'
opacityドラッグ時の透明度opacity: 0.6
updateドロップ時に実行する処理update: function(){〜}

ドラッグ可能なウィジェット

タグのドラッグ可能なjQueryには、Draggableを使用する。
ドラッグ可能 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script>
$(function() {
  $('#draggable').draggable({
    containment: 'parent'
  });
});
</script>
<div style="border:inset; width:100%; height: 3em;">
<div id="draggable" style="background-color:blue; width:6em;">
ドラッグ可能
</div>
</div>
説明例
containmentドラッグ可能な範囲を制限containment: 'parent'
curssorドラッグ時のカーソルcursor:move
opacityドラッグ時の透明度opacity:0.8
revertドロップ後元の位置に戻すrevert:true
startドラッグ開始時の処理start: function(){〜}
dragドラッグ中の処理drag: function(){〜}
stopドラッグ終了時の処理stop: function(){〜}

時期が近い記事

一覧

Glogal link