javascript - 如何制作一个同时适用于 IOS 和桌面浏览器的自定义全屏视频按钮？

Question

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

如果我打开标签中的“控件”属性，那么 iOS 将显示苹果的 native 控件以将视频全屏显示，因此我知道全屏视频适用于 iOS。 native 控件与我的网站布局冲突，因此我不想使用它们。当我删除“控件”属性时，它们不会显示，这很好，但无法将视频全屏显示。

我想要的是我的自定义全屏按钮，可以在桌面上工作，也可以在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