autostart not working in Android Browser 4.0

@ if i add a splash image to a video then “autostart” is disabled. So I don’t insert a splash image and every video in Android Browser 4.0 is shown in dark grey with play symbol. ??

you cannot autoplay videos on mobile devices. No chance. See https://github.com/flowplayer/flowplayer/wiki/1.3-Autoplay-does-not-work-on-mobile-device for some links explaining this.

Splash setups disable autostart in any event, as the player is not loaded in a splash setup until click. For mobiel evices, Flowplayer force spash state since ther even first-frame setups cannot work (they would require a preload, which is alos forbidden on mobiel devices).

@bbb0: you’re *not* right! look at https://www.garantie-hebel-plan.de . The video has a splash image *and* makes autostart. On this site the commercial marketing plugin “optimizepress” is installed and the video is played with internal integration of flowplayer. Call this site with Android 4 and you see the splash!

So please tell me how to configure the flowplayer plugin so that the splash doesn’t disable autostart.

BTW: optimizepress demands the video in mp4 format only and perhaps plays the video in (old) flash only.

You can add this css to add an image before the video plays.

@media screen and (max-width: 480px) {
#post-773 .flowplayer {
   background: #000 url(/media/img/demos/black_big.jpg) 0 0 no-repeat;
   background-size: 200%;
   -webkit-transition: background 1s .5s;
   -moz-transition: background 1s .5s;
}

#post-773 .flowplayer.is-poster {
   background-size: 100%;
}
}

as Ulrich says, that is not a splash setup, but a poster setup with a transition or other custom css rule (did not check)

This does not influence the fact that it does _not_ autostart on any of my Android devices.

It doe not play anyway though on most devices, as it’s encoded at High profile level 2.1 which is not supported by Andorid.

@bbb0 : yes the subject of this thread is already answered.

@ulrich: I inserted the code within <p style=” …..”>[flowplayer id=”770″]</p> . right so? but it doesn’t work, see https://aiai.de . I turned off autoplay for testing the splash image.

<p style="@media screen and (max-width: 480px) {
#post-773 .flowplayer {
   background: #000 url(https://www.zeitmanagement-fuer-aerzte.de/wp-content/uploads/2014/03/schnell-scannen-video-splash.jpg) 0 0 no-repeat;
   background-size: 200%;
   -webkit-transition: background 1s .5s;
   -moz-transition: background 1s .5s;
}
#post-773 .flowplayer.is-poster {
   background-size: 100%;
}
}">
[flowplayer id="770"]</p>

No, you would place the css in the style.css of your child theme or custom css section e.g https://jetpack.me/support/custom-css/

thx. I inserted the code into the custom css of my theme optimizepress. Now the video is flickering but rests without the splash jpg image. The first image of the video is shown for about half a second, not the splash image. After the video rests grey. Same behaviour with “autoplay” set or not. The code is seen in source code of the page. I turned autoplay off so it may be easier for you to analyse.

change the background css to

background: url(https://www.zeitmanagement-fuer-aerzte.de/wp-content/uploads/2014/03/schnell-scannen-video-splash.jpg) 0 0 no-repeat !important;

Thx! I changed it. But no effect. Here is the entire code copied with copy&paste:

@media screen and (max-width: 480px) {
#post-773 .flowplayer {
   background: url(https://www.zeitmanagement-fuer-aerzte.de/wp-content/uploads/2014/03/schnell-scannen-video-splash.jpg) 0 0 no-repeat !important;
   background-size: 200%;
   -webkit-transition: background 1s .5s;
   -moz-transition: background 1s .5s;
}

#post-773 .flowplayer.is-poster {
   background-size: 100%;
}
}

I tried with and without autostart.

It seems to working now.

Where does it work? Not on my Android 4.2.2 tablet! The video is flickering and grey after. But no splash image.

I updated flowplayer 3 hours ago to latest version. Maybe that your Android System now works. What version of android do you have?

I turn now “autoplay on”, this will be normal state in future. Please tell me if it now works on your Android system.

Ok, the max width that you see defines the what size the device is when the image is applied. As you at first mentioned android I thought of a smaller device.

If you only added this then it should work.

#post-773 .flowplayer {
   background: url(https://www.zeitmanagement-fuer-aerzte.de/wp-content/uploads/2014/03/schnell-scannen-video-splash.jpg) 0 0 no-repeat !important;
   background-size: 200%;
   -webkit-transition: background 1s .5s;
   -moz-transition: background 1s .5s;
}

#post-773 .flowplayer.is-poster {
   background-size: 100%;
}

Yeah great! It works! With both, Android 2.3.5 (HTC Desire Smartphone 9cm ) and Android 4.2.2 18cm tablet. Thank you very much Ulrich!!

BTW: the previous code didn’t work with my small HTC Desire Smartphone 9cm either.

Great ??