Как лучше всего встроить mp4 в iPhone без использования JavaScript?

StackOverflow https://stackoverflow.com/questions/958899

  •  12-09-2019
  •  | 
  •  

Вопрос

Я пытаюсь устранить неполадки в этом коде и захожу в тупик, поэтому решил задать свой первый вопрос здесь.У меня есть три вопроса:

1) Как лучше всего встроить mp4 для конкретного представления iPhone, желательно без использования Javascript?

2) Существуют ли какие-либо предпочтительные методы отладки кода на iPhone?

3) Может ли кто-нибудь сказать мне, что не так с моим конкретным кодом ниже?Я должен заранее отметить, что переменная $fileName действительно содержит правильную информацию, я просто пропустил эту часть кода.Кроме того, изображение плаката на короткое время мерцает, прежде чем я получаю серое, сломанное изображение QuickTime, так что это признак того, что это частично работает.

Код:

<object width="448" height="335" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab">
    <param name="src" value="/libraries/images/$fileName.jpg" />
    <param name="href" value="/libraries/media/$fileName.mp4" />
    <param name="target" value="myself" />
    <param name="controller" value="true" />
    <param name="autoplay" value="false" />
    <param name="scale" value="aspect" />
    <embed src="/libraries/images/$fileName.jpg" href="/libraries/media/$fileName.mp4" type="video/mp4" target="myself" width="448" height="335" scale="aspect" controller="false" autoplay="false"> </embed>
</object>
Это было полезно?

Решение

Вы не встраиваете его, вы даете на него ссылку.Обычно ссылка представляет собой миниатюру самого видео.iPhone не поддерживает встраивание файлов фильмов непосредственно на сайт.

Нажатие на ссылку откроет Quicktime на iPhone пользователя, а затем вернет его на веб-страницу, когда он закончит.

Даже если встраивание работает, связанное изображение будет легче запомнить:

<a href="/libraries/media/$filename.mp4"><img src="/libraries/images/$filename.jpg" width="448" height="335" /></a>

Другие советы

Начиная с OS 3.0 вы можете использовать <VIDEO> ярлык

Несмотря на распространенное заблуждение, вместо тега embed можно использовать второй тег объекта, изменив при этом параметры на элементы и используя type="video/quicktime".Результат будет одинаковым практически во всех браузерах (я еще не видел проблемы, хотя мне сказали, что IE6 все испортил), и страница будет проверена.Результат на iPhone будет немного отличаться от результата в настольных браузерах.Если вы явно не установили рамку плаката, она будет использовать черную.Он также разместит собственную кнопку воспроизведения поверх рамки постера.(если кто-нибудь знает, как отключить что-либо из этого, мне бы хотелось знать, как это сделать). Сделав это, вы сможете сделать все это вообще без использования Javascript.Если вы хотите увидеть пример, вот он: http://www.cdjunior.com/CD_JR/view.php?name=jehovahs_witnesses.Соответствующая часть источника — строки 94–100.Я не знаю, сможете ли вы использовать тег для встраивания и заставить его работать.Теперь, когда я об этом думаю, я думаю, что именно так это делает Apple Javascript.

Вот реализация того, что упомянул AlBeebe (HTML 5 video ярлык).

Это возьмет mp4 и вставит его в рамка для iPhone без ЯС.Однако, вы, вероятно, столкнетесь с проблемами изменения размера, поэтому установите min-width: 758px; для тебя body.

Отрегулируйте с помощью video координаты, если что-то не выровнено.

HTML

<div id='photo'>
   <div id='phone'>
      <img src='img/phone-border.png'/>
      <video src='img/cloud.mp4' autoplay loop width="209" height="370" poster="img/first-frame.png"/>
   </div>
</div>

CSS

#phone {
   position: relative;
}
#phone img {
   width: 300px;
   height: auto;
}
#phone video {
   position: absolute;
   width: 209px;
   height: 370px;
   top: 50%;
   left: 50%;
   margin-left: -182px;
   margin-top: -185px;
}
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top