Как буферизовать видео, размещенное на другом сервере, в html

  1. У меня есть URL-адрес видео файла .mp4
  2. Когда я пытаюсь воспроизвести видео с тегом html5 или video.js, видео никогда не буферизуется.
  3. Но когда я пробую ту же ссылку в браузере, он загружает видео.

Код :

<html>
    <head>
        <link href="http://vjs.zencdn.net/4.5/video-js.css" rel="stylesheet">
        <script src="http://vjs.zencdn.net/4.5/video.js"></script>
    </head>
    <body>
        <video width="320" height="240" controls>
        <source src="http://vl.mccont.com/ItemFiles/%5BFrom%20www.metacafe.com%5D%2011334027.29120961.4.mp4?__gda__=1397298243_b382c45af7c5325b3f7443f57412d04c 
" type="video/mp4">
            Your browser does not support the video tag.
        </video>
        <video id="my_video_1" class="video-js vjs-default-skin" controls
 preload="auto" width="640" height="264" poster="my_video_poster.png"
 data-setup="{}">
 <source src="http://vl.mccont.com/ItemFiles/%5BFrom%20www.metacafe.com%5D%2011334027.29120961.4.mp4?__gda__=1397298243_b382c45af7c5325b3f7443f57412d04c" type='video/mp4'>

</video>
    </body>
</html>

Я не могу понять/погуглить проблему. Пожалуйста помоги.

ИЗМЕНИТЬ

Приведенный выше код хорошо работает в Firefox, и видео воспроизводится. Он не работает с хромом, похоже, проблема с плагином или что-то в этом роде...


person coding_idiot    schedule 12.04.2014    source источник


Ответы (2)


У меня та же проблема, которую вы описали на моей стороне с вашим кодом. Работает везде, кроме Chrome. Я обнаружил, что если я размещаю ваш mp4 на одном из своих серверов, он работает нормально ... даже в Chrome.

Исходя из этого, я подозреваю, что проблема на стороне сервера, т.е. сервер, с которого доставляется ваш mp4, не настроен должным образом для видео HTML5. Распространенным источником этой проблемы являются типы MIME. Я бы посоветовал вам дважды проверить эту область.

Раздел «MIME-типы поднимают свою уродливую голову» из здесь может показать вам, как это сделать (другие связанные статьи на Google также занимается этой темой для разных видов серверов).

Дайте нам знать, если это работает для вас.

person Arnaud Leyder    schedule 13.04.2014
comment
Я не могу понять точную проблему, но небольшое изменение в коде сработало. Я только что опубликовал решение. - person coding_idiot; 15.04.2014

Я изменил код видео, как показано ниже:

<video id="movie" width="320" height="240" preload controls>

  <source src="http://c6969c880f66ae12a3e2-87bf587b08b2b7b4541aa273825a564d.r1.cf1.rackcdn.com/11334027.29120961.4.mp4" />
  <object width="320" height="240" type="application/x-shockwave-flash"
    data="flowplayer-3.2.1.swf">
    <param name="movie" value="flowplayer-3.2.1.swf" />
    <param name="allowfullscreen" value="true" />
    <param name="flashvars" value="config={'clip': {'url': 'http://c6969c880f66ae12a3e2-87bf587b08b2b7b4541aa273825a564d.r1.cf1.rackcdn.com/11334027.29120961.4.mp4', 'autoPlay':false, 'autoBuffering':true}}" />

  </object>
</video>

и теперь это работает для всех браузеров. Хотя намерение использовать video.js не выполнено.

person coding_idiot    schedule 15.04.2014
comment
Вы изменили src исходного тега на поставщика сервера, который лучше поддерживает доставку видео HTML5 (rackcdn в вашем случае), поэтому ваша проблема была решена. Хотя я мог заставить ваш новый URL работать с videojs в Chrome, он зависал. - person Arnaud Leyder; 15.04.2014
comment
@ Florestan06 Извините, я забыл, что изменил URL-адрес видео, и, следовательно, это неправильный ответ. Ищу плагин или что-то, что может исправить это в хроме. - person coding_idiot; 15.04.2014
comment
Что ж, мы можем подумать об обнаружении пользовательского агента и принудительном переходе на флэш-память для Chrome, но это было бы не идеально. Например, Chrome на Android застрянет без прошивки, и тогда вам нужно будет обнаружить Android... - person Arnaud Leyder; 15.04.2014
comment
В прошлом я успешно доставлял видео HTML5 в Chrome, но для этого требуется правильный файл mp4 и сервер с правильными типами mime. Если у вас нет контроля над сервером и вы не можете разместить файл в другом месте, вы застряли с полуудовлетворительным решением. Например, попробуйте этот URL-адрес provideoencoding.com/stack/test.mp4 вашего видео, и он должен отлично работает в любом из ваших примеров. - person Arnaud Leyder; 15.04.2014
comment
Возможно, что-то не так с вашим видеофайлом mp4, так как Chrome изо всех сил пытается воспроизвести его, когда на одной странице есть тег видео и видео. Эталонный файл mp4 из видеоjs vjs.zencdn.net/v/oceans.mp4 работает хорошо везде с несколькими экземплярами. - person Arnaud Leyder; 15.04.2014
comment
@ Florestan06 Меня больше беспокоит, почему он не работает в Chrome и работает где-то еще, и, следовательно, я не думаю, что проблема в .mp4, должно быть какое-то исправление, чтобы заставить его работать в Chrome. Можете ли вы предоставить флэш-откат, который заставит его работать в Chrome на рабочем столе на данный момент? - person coding_idiot; 15.04.2014
comment
Для меня это нужно было бы исправить либо с форматом файла, либо на стороне сервера (ну, в любом случае, это необходимо дополнительно изучить). Если вам нужен резервный вариант flash, посмотрите на strobe от Adobe, которая бесплатна: osmf.org/dev/ 2.0gm/setup.html - person Arnaud Leyder; 15.04.2014