HTML5 video player behavior on iPhone and iPod in Safari Web Apps

htmliphonemobile-safarivideowebkit

On the iPhone and iPod, if a YouTube video is embedded in a web page, the user can touch the video and the video will start playing—the iOS media player slides in and the video plays full screen in landscape orientation. Once the video has finished playing, the iOS media player slides back out, revealing the web page where the video was embedded.

Using the HTML5 <video> tag, the user can touch the video and the video will "zoom" to full screen and start playing in whatever the current device orientation is. Once the video has finished playing, the user must tap once to bring up the player controls, and then tap "Done" in order to return to the web page.

Unfortunately, uploading my videos to YouTube is not an option for this application, and I haven't found an HTML5 video player that returns to the website after the video is finished playing. I would prefer either that the video player exhibits the same behavior as the YouTube embedded videos, or that the video plays inline. Forcing inline video is possible in a customized UIWebView, but unfortunately that is not an option (as this is meant to be a web app, not a native app). Additionally, the <video> property webkit-playsinline does not work.

Are there any HTML5 video players that can replicate the embedded YouTube video behavior? Am I missing any obvious Javascript workarounds? Is there a method to tell the window that the video is finished playing without user interaction?

EDIT:

Thanks to Jan, this problem is solved. Working code follows, along with a list of mistakes/notes.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>scratchpad</title>
</head>
<body>
<video id="video">
    <source src="movie.mp4" type="video/mp4" />
</video>
<script type="text/javascript">
document.getElementById('video').addEventListener('ended',function(){document.getElementById('video').webkitExitFullScreen();},false);
</script>
</body>
</html>

Mistakes I made:
1. Forgot to add an ID in the <video> tag.
2. Testing for webkitSupportsFullscreen—I couldn't ever get that property to test as "true." A comment in code in this forum post says, 

// note: .webkitSupportsFullscreen is false while the video is loading

but I was unable to create a condition in which it returned true.
3. Completely missed this stackoverflow post.

Best Answer

Hm, can't try that myself...but sure you've seen this?

http://developer.apple.com/library/safari/#documentation/AudioVideo/Reference/HTMLVideoElementClassReference/HTMLVideoElement/HTMLVideoElement.html#//apple_ref/doc/uid/TP40009356

So, "webkitEnterFullScreen()" might be your friend (although the doc says its read-only):

http://nathanbuskirk.com/?p=1

Inline video is not possible on any iOS device beside iPad (so far).

Anyway, you may detect the end of a video in Javascript by using an Event Listener:

document.getElementById('video').addEventListener('ended',videoEndListener,false);

Cheers,

Jan

Related Topic