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

iphone html video webkit mobile-safari

31,816

Solution 1

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

Solution 2

From the Safari documentation:

"Important: The webkitEnterFullscreen() method can be invoked only in response to a user action, such as clicking a button. You cannot invoke webkitEnterFullscreen() in response to an onload() event, for example."

That might explain why your webkitEnterFullscreen is always false.

http://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/ControllingMediaWithJavaScript/ControllingMediaWithJavaScript.html#//apple_ref/doc/uid/TP40009523-CH3-SW13

Jan's solution handling the 'ended' event is the best in your case.

31,816

Author by

whlteXbread

Updated on July 09, 2022

Comments

whlteXbread almost 2 years
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.
whlteXbread about 13 years

No, I hadn't managed to find that. Thanks for the link. I will work out some code to see if I can get this going, and then accept your answer and update my question with the code.
whlteXbread about 13 years

Awesome. Thanks so much for your help!
simianarmy over 12 years

If you are trying to handle the "Done" button pushed event, but be warned that the 'ended' event is no longer fired in iOS > 4.3. Now the only event that is fired is 'pause', which is not helpful at all since this is the same event fired when the Play AND Pause buttons are pressed.
whlteXbread over 12 years

In this example I am not trying to handle the "Done" button pushed event. I just tested the listed code in iOS 5.0 and it worked as advertised. That is to say that the ended event fired when the video finished playing and the video player exited.
Hiral Vadodaria almost 12 years

@whlteXbread: can I get "paused" event of video likewise? I want to exit full screen when user press pause on default video player of iPhone..
mems about 9 years

Instead using video's events like paused or ended, to handle the "Done" button, use video's webkitbeginfullscreen and webkitendfullscreen events. See developer.apple.com/library/safari/documentation/AudioVideo/‌…