-1

On firefox the poster image completely loads before video starts. Is it possible to force it to play video first with either pure JS or jquery? Doesn't matter if it stops to buffer, i just don't want to see the poster first.

Using standard code:

<video class="myvideo" width="500" height="700" poster="" autoplay muted>
  <source src="" type="video/webm">
</video>

Super easy fix just needed a preload="none"

Esvee
  • 31
  • 7
  • What poster? The image you do set from the [`poster` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-poster)? Here you don't set any, you should thus not see it, and given how you formulated your question, that sounds like the correct thing to do (to not set it). – Kaiido Jul 08 '19 at 07:38
  • in poster attribute yes, and i do need it for browsers that don't support transparent webm. – Esvee Jul 08 '19 at 07:51
  • So you are willing to "*Conditionally show a poster, based on whether the browser supports webm with transparency or not*"? If so ask this instead of "*Force video to play before poster loads*"... And before asking this, the first step will obviously be to ["Detect whether the browser supports webm with transparency"](https://stackoverflow.com/questions/29416579/how-to-feature-detect-if-browser-supports-webm-alpha-transparency). – Kaiido Jul 08 '19 at 08:00
  • No, i am always willing to show the poster, but after video loads/doesn't play. – Esvee Jul 08 '19 at 08:03
  • But you have `autoplay` in your markup. So when the video will have loaded enough data to play it, it will play it (and this even before it's actually loaded). From there, your poster won't ever be shown. – Kaiido Jul 08 '19 at 08:12
  • Let me just explain what happens in the video. The video starts with a paper rollout effect. The poster is basically the end frame of the video (rolled out paper). So now when the poster loads first you can see the whole paper, and as sudden as it's loaded the video starts from beginning, rolling out. So maybe you understand now why i need the video to load first. – Esvee Jul 08 '19 at 08:18
  • Please [edit] your question so it asks exactly what you want. You are clearly taking the problem from the wrong end (pun intended). The [`poster` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-poster) is used to set "*an image to be shown while the video is downloading*". That's clearly not what you want. So ask for what you want please (show an image when the video ended?) – Kaiido Jul 08 '19 at 08:22
  • A video will display the final frame once it's played, no need for a poster image. On the other hand you want to display an image when the format is not supported? Doesn't the video element display an error in this case? – slynagh Jul 08 '19 at 09:12
  • Yep, when video is not supported it will show the image.No it won't show any errors, works like this in IE/edge for example. – Esvee Jul 08 '19 at 09:53
  • But what happens when you try to play that video in IE? – slynagh Jul 08 '19 at 10:36
  • Video gets ignored and the image will be displayed instead. And it will still look good as it won't transfer from image to first frame of video. – Esvee Jul 08 '19 at 10:44
  • And what do you want to happen when WebM is supported, but not transparency? In those cases the video will be played. (Edge) – slynagh Jul 08 '19 at 11:27
  • Since transparent WebM is not supported in Edge it will just display the image... – Esvee Jul 08 '19 at 11:43

2 Answers2

0

You could try to play the video per JavaScript when it has been loaded. To do that, you will have to add an id to the video. 

<video id="myivdeo" class="myvideo" width="500" height="700" poster="" autoplay muted onload="javascript:this.play();">
    <source src="" type="video/webm">
</video>

~ MarvMan

MarvMan
  • 41
  • 9
0

Just needed to include preload="none".

<video class="myvideo" width="500" height="700" autoplay muted preload="none" poster="" >
  <source src="" type="video/webm">
</video>
Esvee
  • 31
  • 7