iPhoneのブラウザ上のvideoタグで動画再生後に元の画面に戻る方法
8月 2nd, 2013
iPhoneのブラウザ上のvideoタグで動画を再生し終わった際、自動で元の画面に戻る方法です。
動画再生時は自動再生ができず、かつ全面再生になってしまう仕様がありますが、終了時はendedのイベントを取得し、制御することができます。
全面再生を解除し、元の画面に戻るときは、下記のように書きます。
webkitExitFullScreen();
【参考】再生終了時に何かする
iPhoneとAndroidでのHTML5 audioの合わせ方
11月 1st, 2012
スマートフォンのブラウザ上では、iPhoneとAndroidではaudioを鳴らすタイミングが微妙に違います。
Androidは、再生ボタンを押すと比較的即再生してくれるのですが、iPhoneの場合、プレイヤーがブラウザ内で起動し、音が鳴るまでにばらつきがあります。
音だけの場合は、特に問題ないのですが、音と合わせた画像が表示される場合などは、ずれが目立ってしまいます。
完全な解決方法とはいきませんが、音にあわせて画像を動かす方法として、playingというイベントを拾い、再生できる準備が整ったときに画像を動かす処理が走るようにしました。
——
video.addEventListener(“playing”, function() {
——
これでも少しiPhoneとAndroidで再生のタイミングはずれてしまいます。
現状、こういう処理はブラウザ上でなくアプリですべきなのでしょうが、何かの参考になればと思い書かせていただきました。
AfterEffectsを使ったiPhone用アニメーションjpgの作り方 の記事を書かせていただきました
5月 10th, 2012
AEP Project にチュートリアルを書かせていただきました。
『 AfterEffectsを使ったiPhone用アニメーションjpgの作り方 』
iPhone上で指でぐりぐりすることで動く、インタラクティブな感じが気持ちいいので、是非一度iOS上でお試しください。
ぐりぐり写真用 Photoshop自動化javascript
7月 15th, 2011
『停電の夜のベースボール』 や 『アップルストア上海 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
『停電の夜のベースボール』 作りました。
6月 27th, 2011
jsとHTML5で 『停電の夜のベースボール』 というサイトを作りました。
http://www.tatsuaki.net/nighter/
イントロの動画を含め１０分以内で全部見れるサイトとなっております。
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分』 内で作り方など発表させていただきました。