如何使用 javascript 更改视频标签海报属性？答案

【问题标题】：How change the video tag poster attribute with javascript?如何使用 javascript 更改视频标签海报属性？
【发布时间】：2012-10-01 08:17:26
【问题描述】：

我想使用原生 JavaScript 或 jQuery 来更改 HTML 视频标签上的海报属性。任何帮助将不胜感激。

<div id="videoplayer" class="video-player" style="overflow: hidden; width: 582px; height: 326px; "> 
    <div id="myPlayer"> 
        <video id="htmlFive" width="100%" height="100%" controls="" poster="undefined">
            <source src="blank.m3u8">
        </video>
</div> 
     </div>

谢谢！

【问题讨论】：

标签： javascript jquery html5-video native poster

【解决方案1】：

要在本地做，只需更改属性：

document.getElementById('htmlFive').setAttribute('poster','newvalue');

【讨论】：

【解决方案2】：

使用jQuery的attr方法，例如：

$('#htmlFive').attr('poster', 'newvalue')

或原生setAttribute：

document.querySelector('#htmlFive').setAttribute('poster', 'newvalue')

【讨论】：

感谢这对 jQuery 来说是完美的，但现在我正在尝试在本地进行。
有没有办法在视频暂停时重新设置海报？

【解决方案3】：

$('#video source').attr('src', srcPath);

【讨论】：

【解决方案4】：

$("#example_video_1 .vjs-poster").css('background-image', 'url(http://video-   js.zencoder.com/oceans-clip.jpg)').show();

【讨论】：

这会设置背景图片 - 而不是视频海报。