如何在 iOS 中创建一个将保持隐藏的 HTML5 视频元素？

Question

我正在尝试在 HTML5/js 中创建一个视频元素，这样我就可以将它完全下载到内存中，无需缓冲即可播放。

问题是当我在 iOS 中创建一个视频元素时，当我开始播放它时它总是全屏显示它的播放器。如果您使用样式为“display:hidden”的视频标签，则可以在 iOS 中播放隐藏视频。但是，当尝试使用js代码执行此操作时，它不起作用。

function CreateVideoElement(url, callback)
{
    var element = document.createElement('video');
    element.hidden = true;
    element.controls = false;
    element.style.display = "none";
    element.autoplay = false;
    element.playsinline = true;
    element.onloadedmetadata = function() {
        callback();
    };
    element.src = url;
    return element;
}

Answer 1

完整下载视频：

内置在 HTML5 视频标签中的是 preload 属性。 preload="auto" 告诉浏览器下载整个视频。（YMMV - Chrome 下载“很多”视频，但不是全部）。

添加 element.preload = "auto" 是您正在寻找的技巧。

是display:none没有隐藏视频吗？

MDN reference

Answer 2

我的同事找到了解决方案。我所做的是 video.playsinline = true; 但还有另一个遗留选项需要设置。 webkit-playsinline，但是因为-不能这样设置。所以最终他发现你需要用 setAttribute 来设置它，所以有效的解决方案是这样的：

        function CreateVideoElement(url, callback)
        {
            var element = document.createElement('video');
            element.controls = false;
            element.style.display = "none";
            element.autoplay = false;
            element.setAttribute('webkit-playsinline', 'webkit-playsinline');
            element.setAttribute('playsinline', 'playsinline');
            element.onloadedmetadata = function() {
                callback();
            };
            element.src = url;
            return element;
        }

如何在 iOS 中创建一个将保持隐藏的 HTML5 视频元素？

How to create an HTML5 video element in iOS that will stay hidden?

html

javascript

video

ios