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

Question

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

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>

Answer 1

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

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

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

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

Answer 2

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

Answer 3

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

Answer 4

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

Это возьмет mp4 и вставит его в рамку iPhone без JS. Тем не менее, вы, вероятно, столкнетесь с проблемами изменения размера, поэтому установите 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;
}