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

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

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

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

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

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

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

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

映像とウェブ

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

AEP Project にチュートリアルを書かせていただきました。
AfterEffectsを使ったiPhone用アニメーションjpgの作り方

iPhone上で指でぐりぐりすることで動く、インタラクティブな感じが気持ちいいので、是非一度iOS上でお試しください。

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

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 );
------------

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