I have a simple video tag:
<video id="video-1" poster="img/video/poster-1.jpg" preload="none">
<source src="http://player.vimeo.com/external/the_video-id" type="video/mp4">
</video>
I play it via a javascript button
$('[data-play-video]').click(function(){
var video_id = $(this).data('playVideo');
var video_control = $(video_id)[0];
video_control.play();
});
The video plays inline on the desktop and in the full-screen player on iPhone. On iPad it plays inline, but I want it to play full-screen in the default iOS video player—the same as on the iPhone. How can I achieve this?
I am aware of the webkit-playsinline
attribute which may be used to force the video to play inline on the iPhone. (HTML5 inline video on iPhone vs iPad/Browser) and (Can I avoid the native fullscreen video player with HTML5 on iPhone or android?)
I, however, want the opposite: to play the video in the default-for-iPhone full-screen format on all iOS and Android devices.
You can use webkitEnterFullscreen() method.
var vid;
function init() {
vid = document.getElementById("myVideo");
vid.addEventListener("loadedmetadata", addFullscreenButton, false);
}
function addFullscreenButton() {
if (vid.webkitSupportsFullscreen) {
var fs = document.getElementById("fs");
fs.style.visibility = "visible";
}
}
function goFullscreen() {
vid.webkitEnterFullscreen();
}