How change the video tag poster attribute with javascript?

Question

I want to use either native JavaScript or jQuery to change the poster attribute on the HTML video tag. Any help would be greatly appreciated.

<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>

Thank you!

score 22 · Accepted Answer · answered Oct 10 '12 at 20:46

22

To do it natively, just change the attribute:

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

answered Oct 10 '12 at 20:46

TimHayes

3,684
21
26

Dominic · Answer 2 · 2020-12-14T11:59:48.910

10

Use jQuery's attr method, e.g:

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

Or native setAttribute:

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

edited Dec 14 '20 at 11:59

answered Oct 10 '12 at 19:03

Dominic

62,658
20
139
163

1

Thanks this works perfect for jQuery, but now I am trying to do it natively. – Justin Oct 10 '12 at 20:14
Is there a way to re-set the poster when the video pause ? – daslicht Oct 13 '18 at 10:41

score -4 · Answer 3 · answered Oct 10 '12 at 19:04

-4

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

answered Oct 10 '12 at 19:04

Steven Hunt

2,321
19
18

score -5 · Answer 4 · answered Aug 01 '13 at 04:09

-5

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

answered Aug 01 '13 at 04:09

pigletfly

1,051
1
16
32

This sets a background image - not the video poster. – heytricia Nov 09 '18 at 19:43

How change the video tag poster attribute with javascript?

4 Answers4