Вставка HTML5-видео с помощью JavaScript для iPad

Question

Я пытаюсь вставить видео в HTML с помощью jQuery для iPad, но вижу только черный экран. Если я добавлю тег видео прямо на страницу HTML, все будет работать нормально.

Вот что у меня есть в моем JavaScript, и я вызываю это, используя функцию для события onClick.

var html = "";
html += '<video id="someVideo" width="'+settings.width+'" height="'+settings.height+'" controls="controls">';
html += '<source src="'+url+'"  type="video/mp4" />';
html += '</video>';
$("#videoDiv").html(html); 

Если я создаю видео тег прямо внутри тела, кажется, все работает нормально

<video width=708px height=300px controls="controls"><source src="video.mp4" type="video/mp4"></video>

Причина, по которой я планирую JavaScript, заключается в том, что у меня есть несколько видео на одной странице, и я хотел, чтобы пользователь выбрал видео для просмотра, а не одно видео на странице ... Любая идея, которая также поможет

Любая помощь будет принята с благодарностью Спасибо

Answer 1

В веб-наборе iPad есть ошибка, которая препятствует правильной загрузке динамически создаваемых видеоэлементов.

Чтобы обойти это, задайте атрибут источника и вызовите метод загрузки видеоэлементов после установки html

var html = "";
html += '<video id="someVideo" width="'+settings.width+'" height="'+settings.height+'" controls="controls">';
html += '<source src="'+url+'"  type="video/mp4" />';
html += '</video>';
$("#videoDiv").html(html);

$('#someVideo').attr('src', url);
$('#someVideo')[0].load();

Answer 2

Повторный ответ: обратите внимание, что вызов load () для элемента video работает только в том случае, если ваш код запускается действием пользователя, например обработчиком щелчка.

Для меня это не сработало, поскольку Apple, похоже, не думает, что обработчик истории (изменение хеша) является обработчиком, запускаемым пользователем.

Для получения более подробной информации см. Документацию яблок на javascript и элемент видео

Answer 3

Причина, по которой я планирую JavaScript, заключается в том, что у меня есть несколько видео на одной странице, и я хотел, чтобы пользователь выбрал видео для просмотра, а не одно видео на странице ... Любая идея об этомтакже поможет

Поместите все видео на страницу, каждое со стилем "display: none".Затем .show () соответствующий div для события click.