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!

Hypophysis

Answer 1

To do it natively, just change the attribute:

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

Leukorrhea

Answer 2

Use jQuery's attr method, e.g:

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

Or native setAttribute:

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

Piegari

Thanks this works perfect for jQuery, but now I am trying to do it natively. – Hypophysis

Is there a way to re-set the poster when the video pause ? – Groom

Answer 3

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

Misty

Answer 4

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

Chor

This sets a background image - not the video poster. – Metalware