时间戳

首页 > 解决方案 > 如何制作适用于 IOS 和桌面浏览器的自定义全屏视频按钮？

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

问题描述

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

如果我打开标签中的“控件”属性，那么 iOS 将显示苹果的本机控件以将视频置于全屏状态，因此我知道全屏视频适用于 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 中播放全屏视频

标签： javascripthtmliosvideofullscreen

解决方案

我实际上是通过使用它来工作的：

<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

推荐阅读