如何制作适用于IOS和桌面浏览器的自定义全屏视频按钮?

Question

我是一个新手，正在努力建立一个视频网站。该网站适用于桌面和iOS，但是在iOS中，我的全屏视频按钮不起作用。

如果我打开标签中的"控件"属性，那么 iOS 将显示 Apple 的本机控件以全屏显示视频，以便我知道全屏视频适用于 iOS。 本机控件与我的网站布局冲突，所以我宁愿不要使用它们。 当我删除"控件"属性时，它们不显示哪个很好，但是无法将视频全屏放置。

我想要的是我的自定义全屏按钮，它可以在桌面上工作，也可以在iOS上运行。 我似乎无法将按钮与我从Apple开发指南中提取的iOS代码联系起来。

<video id="tv" autoplay muted controls playsinline autoplay onended="fine()"webkitallowfullscreen mozallowfullscreen allowfullscreen>

<div id="fullscreenbutton" onclick="openFullscreen(); webkitbeginfullscreen(); webkitEnterFullscreen(); addFullscreenButton(); goFullscreen();"></div>
</script>
<script type="text/javascript">
var vid;
function init() {
vid = document.getElementById("tv");
vid.addEventListener("loadedmetadata", addFullscreenButton, false);
}
function addFullscreenButton() {
if (vid.webkitSupportsFullscreen) {
var fs = document.getElementById("fullscreenbutton");
fs.style.visibility = "visible";
}
}
function goFullscreen() {
vid.webkitEnterFullscreen();
}
</script>

我是新手，但我希望当单击全屏按钮时，它会在ios中全屏播放视频

Answer 1

我实际上是通过使用这个让它工作的：

<script>
var video = document.getElementById('video'),
play = document.getElementById('play'),
time;
video.addEventListener('webkitbeginfullscreen', function() {
play.innerText = 'play fullscreen video';
window.clearInterval(time);
});
video.addEventListener('webkitendfullscreen', function() {
video.pause();
});
play.addEventListener('touchstart', function() {
time = window.setInterval(function() {
try {
video.webkitEnterFullscreen();
}
catch(e) {}
}, 250);
play.innerText = 'loading ...';
video.play();   
});
</script>

我在这里找到了它： https://gist.github.com/4rn0/3146246