[英]Fullscreen html5 video with iOS Safari web browser
有没有办法在 iOS Safari(移动网络)上触发全屏。 全屏或全视口都很棒。 这是我在下面尝试过的:
<video id="mobile_content">
<source src="someurltocontent"></source>
</video>
function makefullscreen(element){
if(element.requestFullscreen) {
element.requestFullscreen();
}
else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
}
else if(element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
}
else if(element.msRequestFullscreen) {
element.msRequestFullscreen();
}
else{
var requestFullscreen =
document.documentElement.requestFullscreen ||
document.documentElement.webkitRequestFullscreen ||
document.documentElement.mozRequestFullscreen ||
document.documentElement.requestFullScreen ||
document.documentElement.webkitRequestFullScreen ||
document.documentElement.mozRequestFullScreen;
if (requestFullscreen) {
requestFullscreen.call(document.documentElement);
}
else {
console.log("really!? come on...");
}
}
}
在用户操作时,上述函数会传递一个视频元素,如果全屏可用,则在视频元素上执行全屏。
这不适用于 iPad 的 Safari。
一种解决方法是将控件 attr 应用于视频标签,然后让用户使用本机播放器全屏启动全屏。
<video id="mobile_content" controls>
<source src="someurltocontent"></source>
</video>
除了上述之外还有其他想法吗?
您可以使用以下代码轻松地在iPad Safari上的Media DOM 元素(如video
)上触发全屏:
HTML
<div id="video-container">
<video>
<source src="path/to/file.webm"></source>
<source src="path/to/file.mp4"></source>
</video>
</div>
JavaScript
var videoContainer = document.getElementById('video-container');
var video = videoContainer.getElementsByTagName('video');
function toggleVideoFullscreen() {
if (video.webkitEnterFullScreen) {
// Toggle fullscreen in Safari for iPad
video.webkitEnterFullScreen();
} else {
// Toggle fullscreen for other OS / Devices / Browsers
}
}
但是,此方法仅适用于iPad Safari 中的 Media DOM Elem,并且我总是在请求另一个 DOM Elem 上的全屏显示时遇到麻烦,例如div
、 section
等。
似乎webkitRequestFullscreen
总是在 iPad Safari 中的每个 DOM 元素上返回undefined
。
祝你今天过得愉快 !
嘿对于每个感兴趣的人,我花了几天时间研究处理全屏视频的最佳方法,同时考虑到交叉浏览兼容性。
有3种方法:
1- 像 Netflix 一样,您将用户重定向到应用商店,而不是播放视频。
2- 您可以通过使用“playsinline”属性来“模拟”全屏,这将避免触发移动 IOS 中的本机控件,并且宽度为 100% 看起来视频是全屏的。
3- 第三种方法类似于已接受的答案,但包括检测全屏已触发和管理退出全屏的方法。
基本上你会在视频周围制作一个包装器,我通过 useRef() (react) 获取参考,你将在包装器中触发全屏 api(如果可能)。
但是在最后一种情况下,最后的 else(不支持 IOS Mobile 的地方)您将触发另一种方法。
好的,这是代码!!
const video = document.getElementsByTagName('video')[0];
const isInFullScreen =
(document.fullscreenElement && document.fullscreenElement !== null) ||
(document.webkitFullscreenElement && document.webkitFullscreenElement !== null) ||
(document.mozFullScreenElement && document.mozFullScreenElement !== null) ||
(document.msFullscreenElement && document.msFullscreenElement !== null);
if (!isInFullScreen) {
if (playerWrapper.current.requestFullScreen) {
// W3C API
playerWrapper.current.requestFullScreen();
} else if (playerWrapper.current.mozRequestFullScreen) {
// Mozilla current API
playerWrapper.current.mozRequestFullScreen();
} else if (playerWrapper.current.webkitRequestFullScreen) {
// Webkit current API
playerWrapper.current.webkitRequestFullScreen();
} else if (video.webkitEnterFullScreen) {
// This is the IOS Mobile edge case
video.webkitEnterFullScreen();
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.