Apache + HTML5 Video Tag - Что может пойти не так? - PullRequest
6 голосов
/ 05 января 2012

[Смотрите обновления!- Работает в браузерах Android / IOS, но не где-либо еще.FireFox, Chrome, Opera, Safari все терпят неудачу.Несмотря на то, что они определенно готовы к тегу видео HTML5]

Просто пытаюсь транслировать видео с помощью тега html5.Все, что я получаю, это управление видеоплеером и ничего больше.Это так просто, я предположил, что это должно сработать:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Movie title</title>
</head>
<body>
<video id="movie" preload controls>
  <source src="test.mp4" />
</video>
</body>

Так где же я могу пойти не так?Я пробовал намного больше, чем этот маленький фрагмент.Я пробовал другие примеры на примере людей.Я перепробовал много видео, много форматов (mp4, flv, ogg).Я пробовал просматривать его в Chrome, Firefox, встроенном браузере Android, Opera, IE9.

Я могу без проблем передавать потоковый файл с URL-адреса в таких программах, как VLC.

Я начинаю думать, что проблема здесь может заключаться в Apache2, хотя я полагаю, что тот факт, что я могу без проблем передавать URL-адрес из VLC, предполагает, что Apache2 не является проблемой.

Любая помощь приветствуется.Я дергаю за волосы здесь.

Обновление:

  • Всякий раз, когда я пытаюсь получить доступ к URL-адресу каталога видео изнутри Chrome, возникает сообщение об ошибке: Ресурс интерпретируется как Другое, но передается с помощью MIME.тип undefined

  • Эта ошибка определенно является проблемой на стороне сервера, apache2 не должен быть настроен где-то должным образом?

  • Если я получаю доступ даже к FLV-файлукаталог из URL-адреса в моем сервере Apache2, он дает эту неопределенную ошибку типа MIME.Это видео контролирует.Всякий раз, когда я нажимаю кнопку воспроизведения, он спамит тип MIME, неопределенный несколько раз.

Обновление 2:

  • Проверено, что мой .htaccess читается

  • Добавлено следующее в мой.htaccess:

    AddType video / ogg .ogv

    AddType video / ogg .ogg

    AddType video / mp4 .mp4

  • По-прежнему не работает, по-прежнему видят MIME TYPE UNDEFINED в Chrome.

Update3:

  • Firefox и другие могут просматривать URL / test.mp4 без проблемно никто не может заставить видео тег работать должным образом.

Обновление 4:

  • Android может заставить видео тег работать сейчас.Изменения .htaccess, казалось, исправили это.Однако ни один браузер не может по какой-либо причине.

Ответы [ 2 ]

3 голосов
/ 05 января 2012

Firefox и Opera не поддерживают MP4, и Chrome скоро откажется от него. Хорошая идея также добавить источник WebM.

Попробуйте добавить атрибут type в объявление source:

<source src="test.mp4" type="video/mp4">
0 голосов
/ 26 апреля 2013

Вот мой HTML-код с моего сайта www.pi-corp.net. Это позволяет воспроизводить все коммерческие браузеры с резервным копированием на флэш-память.

<div class="video-js-box" style="width: 316px"><br><video class="video-js" width="320" height="240" controls preload autoplay poster="http://pi-corp.net/images/PIC_Full_Logo_PIC_HMI.png"><source src="http://pi-corp.net/picvideo/PIChmi.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /><source src="http://pi-corp.net/picvideo/PIChmi.ogv" type='video/ogg; codecs="theora, vorbis"' /><source src="http://pi-corp.net/picvideo/PIChmi.webm" type='video/webm; codecs="vp8, vorbis"' />
        <object id="flash_fallback_1" class="vjs-flash-fallback" width="320" height="240" type="application/x-shockwave-flash"
        data="flowplayer-3.2.1.swf"><div class="style23"> <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" /><param name="allowfullscreen" value="true" /><param name="flashvars" value='config={"playlist":["http://pi-corp.net/images/PIC_Full_Logo_PIC_HMI.png", {"url":"http://pi-corp.net/picvideo/PIChmi.mp4
        ","autoPlay":true,"autoBuffering":true}]}' /> <img src="http://pi-corp.net/images/PIC_no_playback.png" width="320" height="240" alt="Poster Image"
          title="No video playback capabilities." /> </div> </object></video>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...