有没有办法在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...");
}
}
}
在用户动作时,向上述函数传递视频元素,如果全屏可用,则在视频元素上执行全屏。
这在Safari for IPAD上不起作用。
一种解决方法是将控件属性应用于视频标签,然后让用户使用本地播放器全屏启动全屏。
<video id="mobile_content" controls>
<source src="someurltocontent"></source>
</video>
除了前面提到的以外,还有其他想法吗?
您可以使用以下代码在Safari for iPad上轻松触发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
}
}
然而,这种方法只适用于Safari for iPad中的媒体DOM元素,并且我总是在请求另一个DOM元素(如div
、section
等)上的全屏时遇到麻烦。
在Safari for iPad中,webkitRequestFullscreen
似乎总是在每个DOM元素上返回undefined
。
祝你今天愉快!
嘿,对于所有感兴趣的人,我花了几天时间研究处理全屏视频的最佳方法,同时考虑到跨浏览兼容性。
有3种方法:
1-就像Netflix一样,你不播放视频,而是将用户重定向到应用商店。
2-你可以"模仿";通过使用";playsinline";属性,它将避免触发移动IOS中的本地控件,并且宽度为100%,看起来视频是全屏的。
3-第三种方法类似于公认的答案,但包括检测全屏被触发和管理退出全屏的方法。
基本上,你会在视频周围制作一个包装器,我通过useRef()(react)获得引用,然后你会在包装器中触发全屏api(如果可能的话)。
但在最后一种情况下,在最后一个情况下(不支持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();
}
}