如何使用JavaScript更改视频标签的海报属性？

Question

我想使用原生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>

谢谢！

- Justin

Answer 1

要以本地方式实现，只需更改属性：

document.getElementById('htmlFive').setAttribute('poster','新值');

- TimHayes

Answer 2

使用 jQuery 的 attr 方法，例如：

attr

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

或者使用本地的setAttribute方法：

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

- Dominic

---

谢谢，这对于 jQuery 很有效，但现在我正在尝试使用原生方式实现。 - Justin

有没有办法在视频暂停时重新设置海报？ - daslicht

Answer 3

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

- Steven Hunt

Answer 4

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

- pigletfly

---

这将设置一个背景图像 - 而不是视频海报。 - heytricia