Здравствуйте! Хотела вставить видео на главную страницу, но почему-то ни Опера, ни Хром не загружают само видео. Как это исправить? Видео весит 1,55 Мб.

Ответы

Добрый день. Начиная с 27 версии Хром очень некоректно использует .mp4. Лучше всего размещать видео в .ogg или в .webm. В дальнейшем, Гугл собирается оставить поддержку  .mp4 только для мобильной версии.
Для Хром можно попробовать js хак, но не факт, что сработает: 
<code><span class="kwd">if</span><span class="pun">(</span><span class="pln">window</span><span class="pun">.</span><span class="pln">chrome</span><span class="pun">)</span><span class="pln"> $</span><span class="pun">(</span><span class="str">"[type=video\\\/mp4]"</span><span class="pun">).</span><span class="pln">each</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">()</span><span class="pun">{</span><span class="pln"> $</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">).</span><span class="pln">attr</span><span class="pun">(</span><span class="str">'src'</span><span class="pun">,</span><span class="pln"> $</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">).</span><span class="pln">attr</span><span class="pun">(</span><span class="str">'src'</span><span class="pun">).</span><span class="pln">replace</span><span class="pun">(</span><span class="str">".mp4"</span><span class="pun">,</span><span class="str">"_c.mp4"</span><span class="pun">));</span><span class="pun">});</span></code>Ссылки по вашей теме: 

stackoverflow.com/questions/25131906/mp4-file-not-playing-in-chrome
stackoverflow.com/questions/10757347/html5-video-tag-in-chrome-doesnt-work
Здесь: 
html5book.ru/html5-video
про различные кодеки, используемы в html5 для подключения видео. 


28.02.20
Да, хак вставить не получилось :)) Но в одной из тем на stackoverflow.com он упоминается.
28.02.20

Здравствуйте, Полина!

В Вашем коде страницы используется ссылка на CSS-файл (каскадная таблица стилей). Но, судя по результату, похоже сам файл у Вас не создан.

Создайте файл с указанным у Вас именем «Video.css» со примерно следующим содержимым:

.main {

               position:absolute;

               width:100%;

               height:100%;

               left: 0;

               top: 0;

}

.container {

               position:relative;

padding-bottom: 75%;

overflow: hidden;

}

Это для видео с отношением сторон 16:9. Для отношения сторон 4:3 вместо 75% нужно поставить 56,25%. Проверено для 4 браузеров, включая указанные.

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

Более точное решение можно найти только зная Вашу задачу.

С уважением,

Алексей Павлов.

 

29.02.20
Рекомендуем личную консультацию

Виталий

C++, C#, PHP, Java, JavaScript, web-разработка, мобильные приложения. Дорого, профессионально и качественно. На вопросы про проблемы с играми, железом и настройкой системы не отвечаю! На сайте постоянно не сижу, поэтому сразу могу не ответить.
Посмотреть всех экспертов из раздела Технологии > JavaScript,Ajax,HTML
Пользуйтесь нашим приложением Доступно на Google Play Загрузите в App Store