javascript - Video Poster Image not showing unless clicked on for MOBILE - Stack Overflow

admin管理员组

文章数量:1406020

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

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

• javascript
• html
• css
• media-player
• android-mediaplayer

Share Improve this question Follow edited Aug 31, 2016 at 15:04 somejkuser asked Aug 31, 2016 at 14:59 somejkusersomejkuser 9,0442121 gold badges6969 silver badges139139 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

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

本文标签： javascriptVideo Poster Image not showing unless clicked on for MOBILEStack Overflow