投稿日:

iPhoneのブラウザ上のvideoタグで動画再生後に元の画面に戻る方法

iPhoneのブラウザ上のvideoタグで動画を再生し終わった際、自動で元の画面に戻る方法です。
動画再生時は自動再生ができず、かつ全面再生になってしまう仕様がありますが、終了時はendedのイベントを取得し、制御することができます。

全面再生を解除し、元の画面に戻るときは、下記のように書きます。
webkitExitFullScreen();

【参考】再生終了時に何かする

投稿日:

iPhoneとAndroidでのHTML5 audioの合わせ方

スマートフォンのブラウザ上では、iPhoneとAndroidではaudioを鳴らすタイミングが微妙に違います。
Androidは、再生ボタンを押すと比較的即再生してくれるのですが、iPhoneの場合、プレイヤーがブラウザ内で起動し、音が鳴るまでにばらつきがあります。
音だけの場合は、特に問題ないのですが、音と合わせた画像が表示される場合などは、ずれが目立ってしまいます。

完全な解決方法とはいきませんが、音にあわせて画像を動かす方法として、playingというイベントを拾い、再生できる準備が整ったときに画像を動かす処理が走るようにしました。

——
video.addEventListener(“playing”, function() {
——

これでも少しiPhoneとAndroidで再生のタイミングはずれてしまいます。
現状、こういう処理はブラウザ上でなくアプリですべきなのでしょうが、何かの参考になればと思い書かせていただきました。

投稿日:

ぐりぐり写真用 Photoshop自動化javascript

『停電の夜のベースボール』 や 『アップルストア上海 forked from: guriguri simple』 では、縦長の写真（参考）を使い、マウスの位置が変わるごとに表示領域を移動させ動いているように見せています。
その縦長画像を作るために、Photoshop上で画像を自動配置してくれる javascript を作りました。

レイヤーの画像数から、キャンパスの大きさを自動で作成し、上から順番にリサイズし配置してくれるjsです。

---------------------
main();

function main(){
var cntl;
var i=0;
var Ypos = 0;

// 一枚の画像の大きさを入力します
// （停電の夜のベースボールの場合、表示されるのは640px-360pxでした）
var Wpic = 640;
var Hpic = 360;

docObj = activeDocument.artLayers;
cntl = docObj.length;

// ピクセル単位で処理を行うようにする
preferences.rulerUnits = Units.PIXELS;
// ピクセル単位で処理を行うようにする
activeDocument.resizeCanvas(Wpic, Hpic*cntl, AnchorPosition.TOPLEFT);

for(i=0; i

よろしければ下記からダウンロードしてお使いください。
transratLayer.js

Photoshopにデフォルトで入っている Load Files into Stack.jsx の末尾に下記を記載することで、「ファイルをレイヤーとして読み込み」 が終わったあと自動でリサイズし、縦長画像に配置してくれます。（下記の動画のように自動配置してくれます）
※Load Files into Stack.jsx は、　…\Adobe Photoshop CS5.1 (64 Bit)\Presets\Scripts 以下にあります

Photoshop 縦長画像作成自動化jsx

投稿日:

『停電の夜のベースボール』 作りました。

jsとHTML5で 『停電の夜のベースボール』 というサイトを作りました。

http://www.tatsuaki.net/nighter/
nighter_top

イントロの動画を含め１０分以内で全部見れるサイトとなっております。
HTML5のサイトですが、主要なブラウザ全て対応いたしました。（safari、chrome、firefox、IE9）

ブラウザごとのメディアファイル（audioやvideo）の出しわけは、modernizr.js というライブラリを使用しました。
下記のように対応のコーデック名などで判別ができるため、とても使いやすかったです。

-------------------
if ((!Modernizr.audio.ogg && !Modernizr.audio.mp3) ||
(!Modernizr.video.ogg && !Modernizr.video.h264) ||
-------------------

firefoxのaudioのloop機能が、うまくできなかったため、loopのプロパティを使わずに、firefoxでの音楽のloopは、下記のように再生し終わったら0秒に戻すという処理でループするようにしています。

-------------------
// firefox doesn't support audio loop property
if (window.navigator.userAgent.toLowerCase().indexOf('firefox') >= 0) {
audio.addEventListener('ended', function() {
audio.currentTime = 0;
}, false);
}
-------------------

全ソースを、githubへ登録しておりますので、詳細につきましてはそちらをご覧ください。
cou929 / Outage-Night-Baseball

画像がマウスに沿って動く部分は、以前jsdo.itで作った 『アップルストア上海　のぐりぐり写真』 （参考：ぐりぐり写真を作ろう） のソースを元にしました。
この連番画像の作成は、AfterEffectsとPhotoshopの自動化を行い縦長画像を作っています。
自動化したjsなどについては、別途記載いたしました。
【関連】ぐりぐり写真用 Photoshop自動化javascript
　

※東京てら子Vol.16 『ドキッ、JavaScriptだらけの240分』 内で作り方など発表させていただきました。

投稿日:

HTML5のaudioをjavascriptで再生する方法

HTML5のサイト内で、音楽の切り替えをするとき、jQueryのappendToを使って下記のようのしていたのですが、safariなどで音が2重に聞こえてしまったりと、不具合がありました。
------------------------
$('<audio src="./sound/en/html5en_05.mp3" volume="0.1" autoplay></audio>').appendTo('body');
------------------------

HTML5のタグ追加ではなく、Javascriptから直接HTML5のaudio要素を操作するには、下記のようにすることで操作できます。
jsから操作することで、safariなどで2重に聞こえてしまう不具合は解消されました。
------------------------
var html5_audio;
html5_audio = new Audio("./sound/en/html5en_05.mp3");
html5_audio.play(); //再生
html5_audio.pause(); //ストップ
------------------------

ループの設定などは下記のようにします。
------------------------
html5_audio.loop = "true";
------------------------

投稿日:

JavaScriptで定期的に処理を行なう方法(setTimeoutを使う方法)

jsで、定期的に処理を行う方法です。
画像のスライドショー（フォトフレームみたいな）的な見せ方もこれで可能になります。
setTimeoutを使い、ループさせる方法で実現しました。

-------------------------
function changimg(){
/* 定期的に行う処理 */
//ここに処理内容を書きます。

/* 何秒おきに行うか 3000だと3秒おき */
window.setTimeout("changimg()", 3000);
}

setTimeout("changimg()", 3000);
-------------------------

投稿日:

javascript 日時指定で切り替え

何かの締め切りなど用に仕込むjs例。
日時指定で、画像などの切り替わり。
簡単ですが、メモ。

<script language="JavaScript">
<!--
endtime = new Date(2008,5,20,23)
today = new Date()
 if((endtime - today) > 0){
 document.write('<a href=\"お好きなURL\">うへへ</a>')
 }else{
 document.write('\終わりました的な文章とか\')
 }
// -->
</script>