Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How change the video tag poster attribute with javascript?

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!

like image 779
Justin Avatar asked Oct 10 '12 19:10

Justin


People also ask

Does the poster attribute do in the video tag?

The poster attribute specifies an image to be shown while the video is downloading, or until the user hits the play button.

Can I use JavaScript to dynamically change a video's source?

To use JavaScript to dynamically change a video's source, we can set the src property of the source element to the URL of the video. to add the video element with the source element's src attribute set to a video path. to select the source element in the video element with document.

How do I change the thumbnail of a video in HTML?

Approach: Sometimes the user wants to display a specific image of his choice as the thumbnail of the video. This can be simply done by using the poster attribute. All you have to do is create a poster attribute in the video tag and place the URL of the thumbnail image in it.

Which attribute is used to display an image inside a video?

The HTML <video> poster Attribute is used to display the image while video downloading or when user click the play button.


1 Answers

To do it natively, just change the attribute:

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

like image 106
TimHayes Avatar answered Sep 21 '22 13:09

TimHayes