Блог

Я пытаюсь создать видеоэлемент в HTML5 / js, чтобы я мог полностью загрузить его в память и воспроизвести без необходимости буферизации.

Проблема в том, что когда я создаю видеоэлемент в iOS, он всегда будет отображать его в полноэкранном режиме, когда я начинаю его воспроизводить. В iOS можно воспроизвести скрытое видео, если использовать тег video со стилем «display:hidden». Однако при попытке сделать это с помощью 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;
}
  

Мой коллега нашел решение. Что я сделал video.playsinline = true; , но есть еще один устаревший параметр, который необходимо установить. webkit-playsinline , но его нельзя установить таким образом из-за - . Итак, в конце концов он обнаружил, что вам нужно установить его с setAttribute помощью so, чтобы решение, которое работает, выглядело так:

         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;
        }
  

1. полная загрузка видео:

Встроенный в тег HTML5 video атрибут предварительной загрузки. preload=»auto» сообщает браузеру загрузить все видео. (YMMV — Chrome загружает «много» видео, но не все).

Добавление element.preload = "auto" — это трюк, который вы ищете.

2. display:none не скрывает видео?

Ссылка на MDN