[英]Force full-screen HTML5 video playback on iPad and Android tablets?
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 我通过javascript按钮播放它
$('[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. 视频在桌面和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. 在iPad上它是内联播放,但我想让它在默认的iOS视频播放器中全屏播放 - 就像在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. 我知道webkit-playsinline
属性可用于强制视频在iPhone上内联播放。 ( HTML5 inline video on iPhone vs iPad/Browser ) and ( Can I avoid the native fullscreen video player with HTML5 on iPhone or android? ) ( iPhone与iPad /浏览器上的HTML5内嵌视频 )和( 我可以在iPhone或Android上避免使用HTML5的原生全屏视频播放器吗? )
I, however, want the opposite: to play the video in the default-for-iPhone full-screen format on all iOS and Android devices. 但是,我想要反过来:在所有iOS和Android设备上以默认的iPhone全屏格式播放视频。
You can use webkitEnterFullscreen() method. 您可以使用webkitEnterFullscreen()方法。
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();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.