VPF::Audio и Video в HTML5 - Форум программистов

Areostar

Дата 13.10.2012, 09:13 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1191
Регистрация: 5.4.2008

Репутация: -1
Всего: -2

Пытаюсь вставить на страничку(HTML5) Аудио и видио:

Код


  <video width="320" height="240" controls="controls">
   <source src="Wildlife.mp4" type="video/mp4">
     Your browser does not support the video tag.
   </video> 
   
   <audio controls="controls">
   <source src="mozart.mp3" type="audio/mpeg">
   Your browser does not support the audio element.
   </audio>

Музыка ещё ничего а вот видео вообще не в одном браузере не проигрывается!! Хотя контролбар есть

ksnk

Дата 13.10.2012, 10:12 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

Areostar, Вообще-то рекомендуют писать так

Код


<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

OGG на сайте есть? Imho, mp4 проигрывается встроенными флеш-плагинами и/или оставлен "на будущее". получить ogg из mp4 можно любым конвертером, или даже в онлайне...

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Areostar

Дата 13.10.2012, 15:07 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1191
Регистрация: 5.4.2008

Репутация: -1
Всего: -2

Добавил версии файла и в ogg и в webm

написал так:

Код


<video id="movie" class="video_content" width="400" height="320" preload controls>
       <source src="video/snowman.mp4" />
       <source src="Wildlife.webm" type='video/webm; codecs="vp8, vorbis"' />
       <source src="Wildlife.ogv" type='video/ogg; codecs="theora, vorbis"' />
       <object id="flowplayer" type="application/x-shockwave-flash" 
          width="400" height="320">
       <param name="movie" value="video/flowplayer-3.2.5.swf" /> 
       <param name="flashvars" value='config={"clip":"video/snowman.mp4"}' />
       <p>Загрузить видео в <a href="video/snowman.mp4">MP4</a>, 
           <a href="video/snowman.ogv">OGG</a> или 
           <a href="video/snowman.webm">WebM</a></p>
   </object>
  </video>

вовсех браузерах кроме IE9 играет прикрасно! а в IE9 чёрный квадрат вместо плеера

ksnk

Дата 13.10.2012, 15:46 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

а вот ie9 играет как раз mp4 smile

http://www.w3schools.com/html/html5_video.asp

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Areostar

Дата 13.10.2012, 16:14 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1191
Регистрация: 5.4.2008

Репутация: -1
Всего: -2

Ну так и .mp4 там тоже есть

numerovan

Дата 15.10.2012, 15:40 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 549
Регистрация: 1.12.2007

Репутация: нет
Всего: 2

Как раз юзал эту тему не давно ... пришёл к следующему выводу ...
1. аудио использовать формата ogg
2. видео использовать формата webm

чтоб Фаерфокс отображал видео нужно в .htaccess написать там чтоб заголовки слал для файлов webm ...

и в итоге получаеться следующее .... такое читают все браузеры кроме Сафари и ИЕ ...

Areostar

Дата 15.10.2012, 15:45 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1191
Регистрация: 5.4.2008

Репутация: -1
Всего: -2

А если стрпничка ещё у меня на компьютере??

numerovan

Дата 15.10.2012, 15:49 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 549
Регистрация: 1.12.2007

Репутация: нет
Всего: 2

денвер поставьте и на нём тестируйте.

Areostar

Дата 15.10.2012, 16:20 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1191
Регистрация: 5.4.2008

Репутация: -1
Всего: -2

а что именно в .htaccess дописать надо??

numerovan

Дата 15.10.2012, 16:43 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 549
Регистрация: 1.12.2007

Репутация: нет
Всего: 2

Код


AddType video/webm .webm

Добавлено @ 16:46
вот так у меня прописано.

Код


<audio controls>
    <source src="путь/файл" type='audio/ogg; codecs="vorbis"'/>
   Ваш браузер не поддерживает аудио-элемент, можете скачать файл <a href="путь/файл">файл</a>
</audio>

<video controls>
    <source src="путь/файл"  type='video/webm; codecs="vp8, vorbis"' />
    Ваш браузер не поддерживает видео-элемент, можете скачать файл <a href="путь/файл">файл</a>
</video>

Добавлено @ 16:47
обрати внимание на атрибут type ... его точно таким же нужно сделать.

Это сообщение отредактировал(а) numerovan - 15.10.2012, 16:47

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »