HTML5 видео загружается, но не воспроизводится - PullRequest
Новая
       7

HTML5 видео загружается, но не воспроизводится

2 голосов
/ 20 октября 2011

Я пытаюсь загрузить документ HTML5 с помощью colorbox, который воспроизводит видео, добавленное с помощью тега video. Ссылка на видео: 

<a href="content/video/test-video-01.html" class="cboxElement"></a>

JS для добавления colorbox: 

var $gallery = $( 'a.cboxElement' ).colorbox({
    transition : 'elastic',
    speed : box_speed,
    maxHeight : 700,
    maxWidth : 900,
    initialHeight : 486,
    initialWidth : 722,
    fixed : true,
    preloading : false,
    onCleanup : function() {
        $( 'canvas#connector' ).fadeOut( box_speed );
    },
    onClosed : function() {
        box_opened = false;
        initiateActivity();
    }
} );


$( 'a.cboxElement' ).click( function( e ) {
    $gallery.eq(0).click();
    return false;
} );

И, наконец, test-video-01.html выглядит так: 

<video width="722px" height="487px" controls="controls">
    <source src="http://localhost:8888/ipm/content/video/test-video-01.m4v" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
    <source src="http://localhost:8888/ipm/content/video/test-video-01.webm" type='video/webm; codecs="vp8, vorbis"' />
    Your browser does not support the video tag.
</video>

Я добавил объявления AddType в мой файл .htaccess, чтобы разрешить разные типы MIME.

Проблема в том, что когда я загружаю контент через Colorbox, он показывает фильм и элементы управления; Однако фильм не будет воспроизводиться. Я могу щелкнуть по временной шкале фильма и увидеть разные кадры фильма, но ни в коем случае он не будет воспроизводиться. Когда я посещаю файл test-video-o1.html напрямую, он работает отлично. Colorbox делает AJAX-запрос на получение файла HTML, и мне интересно, если это что-то вызывает проблему. Любая помощь с этим была бы потрясающей. Спасибо!

1 Ответ

0 голосов
/ 25 июля 2012

Извините, опубликовано в качестве ответа, поскольку оно было слишком большим для комментария. Есть ли шанс, что вы можете опубликовать jsfiddle?

Несколько вещей с моей головы:

  1. Что происходит при использовании атрибута autoplay ?
  2. Вы закодировали видео, чтобы версия mp4 имела 'faststart' / moov atom / оптимизирован для потоковой передачи включен?
  3. У вас есть заголовки частичного содержимого, работающие на сервере (206 ответ .. часто вызывает пробы)
  4. Попробуйте присоединить слушателя js к элементу 'canplaythrough' событие посмотреть, если оно регистрируется.
...