CODEWITHSUNDEEP
csshtmlvideoionic-frameworkhtml5-video
me9867
me9867

Reputation: 1599

Getting a large ugly play button before MP4 video starts in HTML5 App

We use mp4 videos that are embedded into our app and loaded locally. Before the video starts playing there is a brief flash of an ugly large play button the size of the container.

Is there a way to avoid this or perhaps put a holding image before it plays?

Here is a screenshot of what flashes up for a moment
https://i.sstatic.net/Qz349.jpg

My html5 video code is 

<ion-content padding="true" overflow-scroll="true">
    <div class="video-container" data-tap-disable="true">
    <video id="myVideo" controls="controls" preload="metadata" autoplay="autoplay" webkit-playsinline="webkit-playsinline" class="videoPlayer"><source src="{{product.video}}" type="video/mp4"/></video>
    </div>  
  </ion-content>

Upvotes: 0

Views: 821

Answers (1)

me9867
me9867

Reputation: 1599

I have set a background color with !important to the video-container and a background image as the poster poster="img/poster.jpg" to the video selector which I think is the part that has solved this.

Upvotes: 1

Related Questions