Menu
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.
778
HTML5 semantic elements is Fully Supported on Safari 13, which means that any user who'd be accessing your page through Safari 13 can see it perfectly.
Safari supports HTML5. If YouTube video doesn't play, try either disabling or uninstalling extensions like ClickToFlash.
Double-Click home button to get the task switcher outside of Safari, tap and hold on the safari icon until the kill button shows. Open safari (restarted). At this point, if you load the test page (the one with just one video), the poster will show.
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
85
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.
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
