jkushner jkushner - 3 months ago 9
CSS Question

Video Poster Image not showing unless clicked on for MOBILE

I have the following code:

<video class="video" height="240" width="360" autobuffer="true" controls="true">
<source src="/data.mp4"/>
</video>
<video class="video" height="240" width="360" autobuffer="true" controls="true">
<source src="/data2.mp4"/>
</video>
<video class="video" height="240" width="360" autobuffer="true" controls="true">
<source src="/data3.mp4"/>
</video>

<script type="text/javascript">
var video=document.getElementsByClassName("video");
Array.prototype.forEach.call(video,function(el){
el.addEventListener('click',function(){
el.play();
},false);
});
</script>


When I look at it on a
PC Desktop Website
it looks great. All of the videos show a poster image. However when I view it in my mobile browser
(I have a Samsung Galaxy Note 5)
it does not initially show the video poster image until I click the video in which then the video poster image displays

Answer

Use the HTML5 video tag's poster attribute and define your own image to show (example below).

poster attribute: A URL indicating a poster frame to show until the user plays or seeks. If this attribute isn't specified, nothing is displayed until the first frame is available; then the first frame is shown as the poster frame.

 <video class="video" poster="my-poster.jpg" height="240" width="360" autobuffer="true" controls="true"> 
    <source src="/data.mp4"/>
</video>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video

This is typical mobile device functionality in that you don't want to cost the user data unless they've chosen to interact with the video. This is why you can't autoplay video on iOS devices. So without the poster attribute, the device would have to get the poster from the actual video content.