Menu
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!
779
The poster attribute specifies an image to be shown while the video is downloading, or until the user hits the play button.
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.
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.
The HTML <video> poster Attribute is used to display the image while video downloading or when user click the play button.
To do it natively, just change the attribute:
document.getElementById('htmlFive').setAttribute('poster','newvalue');
106
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
