Блог

Я занимаюсь составлением списка видео. При этом есть три ссылки с тремя разными идентификаторами. Как только пользователь нажимает на ссылку, видео и постер видео должны измениться. Пока я использую свой код jquery, видео меняется, но надпись attr «poster» вообще не меняется… есть причина? Это мой код, который я использую…

HTML-код видео :

 <video width="600" height="360" id="player2" poster="videos/video1/video1.jpg" controls="controls" preload="none">
    <!-- MP4 source must come first for iOS -->
    <source type="video/mp4" src="videos/video1/video1.mp4" />
    <!-- WebM for Firefox 4 and Opera -->
    <source type="video/webm" src="videos/video1/video1.webm" />
    <!-- OGG for Firefox 3 -->
    <source type="video/ogg" src="videos/video1/video1.ogv" />
    <!-- Fallback flash player for no-HTML5 browsers with JavaScript turned off -->
    <object width="640" height="360" type="application/x-shockwave-flash" data="videos/flashmediaelement.swf">
        <param name="movie" value="videos/flashmediaelement.swf" />
        <param name="flashvars" value="controls=trueamp;amp;file=videos/video1/video1.mp4" />
        <!-- Image fall back for non-HTML5 browser with JavaScript turned off and no Flash player installed -->
        <img src="videos/video1/video1.jpg" width="640" height="360" alt="Here we are"
            title="No video playback capabilities" />
    </object>
</video>
 

Мой код jquery:

 $('div.video-box-area img').click(function(){
    var nowSrc = $('video').attr('src');
    var change = nowSrc.replace(nowSrc.substr(12,1),$(this).parent().attr('id').substr(length-1));

    var poster = $('video').attr("poster");
    var posterChange = poster.replace(poster.substr(12,1),$(this).parent().attr('id').substr(length-1));

    $('video').attr("poster",posterChange);
    $('video').attr('src',change);

    return false;
});
 

Согласно спецификациям видео HTML5, постер отображается, когда видеоданные недоступны (атрибут readyState для видео равен либо HAVE_NOTHING, либо HAVE_METADATA, но видеоданные еще не получены вообще, или атрибут readyState элемента имеет любое последующее значение, но медиа-ресурс не имеет видеоканала). Когда видео приостановлено, а текущая позиция воспроизведения является первым кадром видео, элемент представляет либо кадр видео, соответствующий текущей позиции воспроизведения, либо кадр постера, в зависимости от браузеров.

В ваших обстоятельствах видеоданные, вероятно, доступны, поэтому постер не отображается. Я могу помочь вам разобраться в проблеме, если вы предоставите мне живую демонстрацию.

Я не думаю, что вы можете получить доступ к атрибуту напрямую, используя tagname .

То, на что я ссылаюсь, — это ваш $('video') тег, по моему опыту, который должен возвращать массив всех тегов на странице, если вы можете, вы должны сопоставить его по идентификатору.

Если это невозможно, и вы абсолютно уверены, что на странице есть только один тег видео, вы можете сделать что-то вроде $('video')[0] , но это не очень хорошее решение.

Можете ли вы опубликовать весь свой код, включая <div class="video-box-area"> ?

Я только что попробовал несколько вещей, и, похоже, ваши вызовы jquery в порядке. Единственное, что я вижу posterChange , это то, действительно ли переменная posterValue == '' . Если строка пуста, attr не будет изменен.

Сделайте оповещение сразу после вычисления переменной posterChange и посмотрите, пуста ли она…