StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHTML5 video player behavior on iPhone and iPod in Safari Web Apps
primarykey
Id
5438520
data
AcceptedAnswerId
5442249
AnswerCount
2
ClosedDate
CommentCount
0
CommunityOwnedDate
CreationDate
2011-03-25T21:53:16.453
FavoriteCount
16
LastActivityDate
2012-02-01T10:47:19.373
LastEditDate
2017-05-23T10:28:27.750
LastEditorUserId
-1
OwnerUserId
650427
ParentId
0
PostTypeId
1
Score
14
ViewCount
30494
LastEditorDisplayName
text
Body
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 <code><video></code> 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 <code>UIWebView</code>, but unfortunately that is not an option (as this is meant to be a web app, not a native app). Additionally, the <code><video></code> property <code>webkit-playsinline</code> 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. <pre><code><!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> </code></pre> Mistakes I made: 1. Forgot to add an ID in the <code><video></code> tag. 2. Testing for <code>webkitSupportsFullscreen</code>—I couldn't ever get that property to test as "true." A comment in code in <a href="http://www.wowzamedia.com/forums/showthread.php?7602-Ipad-streaming" rel="nofollow noreferrer">this forum post</a> says, <pre><code>// note: .webkitSupportsFullscreen is false while the video is loading </code></pre> but I was unable to create a condition in which it returned true. 3. Completely missed <a href="https://stackoverflow.com/questions/4497789/mobile-safari-video-question">this stackoverflow post</a>.
Tags
<iphone><html5><video><webkit><mobile-safari>
Title
HTML5 video player behavior on iPhone and iPod in Safari Web Apps
singulars
PostAcceptedAnswerId
1. PO
 singulars
 PostTypePostTypeId
 PTAnswer
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USCommunity
UserOwnerUserId
1. USwhlteXbread
plurals
PostLinksPostIdRelatedPostId
1. PL
 singulars
 LinkTypeLinkTypeId
 LTLinked
PostLinksRelatedPostIdPostId
1. PL
 singulars
 LinkTypeLinkTypeId
 LTLinked
2. PL
 singulars
 LinkTypeLinkTypeId
 LTLinked
3. PL
 singulars
 LinkTypeLinkTypeId
 LTLinked
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
 singulars
 PostTypePostTypeId
 PTAnswer
2. PO
 singulars
 PostTypePostTypeId
 PTAnswer
VotesPostIdCreationDate
CommentsPostId
1. This table or related slice is empty.

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.