Question

我正在做视频列表工作。在那里，有三个链接有三个不同的ID。一旦用户点击链接，视频和视频的海报就必须改变。当我使用我的jquery代码时，视频正在改变，但attr“海报”根本没有改变......任何原因？这是我正在使用的代码...

视频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=true&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;
});

Answer 1

根据HTML5 video specs，当没有可用的视频数据时，显示海报（视频的readyState属性为HAVE_NOTHING或HAVE_METADATA但没有视频数据根本没有获得，或者元素的readyState属性是任何后续值，但媒体资源没有视频通道）。当视频暂停，当前播放位置是视频的第一帧时，该元素表示对应于当前播放位置或海报帧的视频帧，取决于浏览器。

在您的情况下，视频数据可能是可用的，因此海报不会呈现。如果你给我一个现场演示，我可以帮助你调查问题。

Answer 2

我不认为您可以使用标记名直接访问该属性。

我推荐的是您的$('video')代码，根据我的经验，应该返回页面上所有代码的数组，如果可以的话，您应该通过 id 匹配它代替。

如果不可能，并且您绝对确定页面上只有一个视频标记，则可以执行$('video')[0]之类的操作，但这不是一个好的解决方案。

您可以发布整个代码，包括<div class="video-box-area">吗？

Answer 3

我刚试了一个few things，看起来你的jquery调用还可以。我唯一能看到的是posterChange变量实际上是posterValue == ''。如果字符串为空，则不会更改attr。

在计算posterChange变量后立即发出警报并查看它是否为空......

如何使用jquery更改视频海报？

3 个答案: