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

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

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

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

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

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

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

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

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

「映像とウェブ」というセミナーをやります

映像とWeb -WebクリエイターのためのAfter Effects勉強会-

映像とウェブ

「WebクリエイターのためのAfter Effects勉強会」というサブタイトルが付いていますが、After Effectsの使い方に限らず、動画をうまく活用したウェブサイトの作成方法など、幅広いセミナーになればと思っております。
私も、スマートフォン上での映像を用いた表現方法について、お話したいと思います。
よろしくお願いいたします。

『ウェブフォントとは』 を作りました。

ウェブフォントの使い方などを説明した 『 ウェブフォントとは 』 を作りました。

HTML5 webfont

HTML5・CSS3で全編できています。
webkitアニメーションを終わりを下記のように取得し、CSSを切り替えています。

------------
Scene_01.addEventListener( 'webkitAnimationEnd', function() {
document.getElementById("Scene_01").className="Scene_mute";
	document.getElementById("Scene_02").className="Scene_02_play";
	obj_koe02.play();
}, false );
------------

ウェブフォントの現状の問題点なども解説していますので、よろしければご覧くださいませ。

「絶対に起きるWEB目覚まし」 を作りました

「絶対に起きるWEB目覚まし」 を作りました。

絶対に起きるWEB目覚まし ログイン画面

HTML5のaudioを使用しています。
canPlayTypeを使用し、wavなどを再生できるかどうかでブラウザを判別しています。

----------------
if (objAlarm1.canPlayType) {
	var bWav = ('' !== objAlarm1.canPlayType('audio/wav'));
----------------

漫画で使い方の簡単な説明ページも用意してみました。
http://tatsuaki.net/web_timer/manga1.html

設定した時間の5分前、3分前、1分前になると目覚まし声が鳴るのですが、特徴的な音声にしてみたので、よろしければ一度使って聞いていただけたらと思います。

divタグ一つでサラリーマンを書きました。

1DIV サラリーマン(全身) forked: 1DIV リラックマ – jsdo.it – share JavaScript, HTML5 and CSS

(「PLAY」押すとサラリーマンが表示されます。jsdo.itのサイトに遷移しFullscreen表示すると全身が表示されます)

css3を使い、divタグ一つでサラリーマンを書いてみました。
cssの擬似要素のbeforeとafterを使い、基本box-shadowで表現しています。
メガネフレームや髪は、影をいくつも重ねて作りました。

ページ下部にくっつくフッターのCSS

以前作った レコメガール のように、ページ下部にくっつき、ウィンドウサイズに合わせて可変するフッターのサンプルです。

可変フッターサンプル

position: absolute と bottom だけだと、ウィンドウの縦幅が狭いときは上のコンテンツにフッターがかぶってしまうことがあります。
HTML5用に !doctype html と宣言するとdivをheight 100% としてもウィンドウの縦幅いっぱいにdivが拡がらないので、htmlとbodyにheight 100% を指定し、min-heightで最小幅を指定することで、ある程度の縦幅があるときはウィンドウの大きさに合わせて可変し、縦幅が狭いときは可変しないフッターを実装することができます。

----------------
html,body {
	height:100%;
}
#wrap {
	height:100%;
	min-height:300px;
	position: relative;
}
#footer {
	position: absolute;
	width:100%;
	height:40px;
	bottom:30px;
	background-color: #999;
}
----------------

※IE6など、古いブラウザではmin-heightは実装されておらず、下記のような方法で対応する必要があります。
【参考】IE で min-width を指定する方法 – lucky bag

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

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

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

イントロの動画を含め10分以内で全部見れるサイトとなっております。
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分』 内で作り方など発表させていただきました。

アップルストア上海のぐりぐり写真 (上海に行ってきました その3)

アップルストア上海を、360度写真で撮って動かせるようにし、jsdo.itに投稿させていただきました。(HTML5でできています)

参考:ぐりぐり写真を作ろう

夜はリンゴマークが浮かびあがって幻想的でした。

夜のアップルストア上海
夜のアップルストア上海

 
追記: 後日、jsdo.it の Hot code 入りし、トップページの目立つところに載りました。
favoritesしてくださった方やRTしてくださった方、本当にありがとうございました。

jsdo.it Hot code
hc

【関連】 海外用ポケットwifi MiFi (上海に行ってきました その2)
【関連】 羽田空港国際線のwifiやパソコンの電源について (上海に行ってきました その1)