You can view the javascript code here, https://dev.vitaes.com/wp-content/themes/vitaes-bridge-child/js/watch.js

The function, display_vitaes_iframe(), though we are not longer using video iframes, is the function that inserts the shortcode output.

It seems if the videos were set to autoplay then more than one are going to attempt to play on page load. But, using this code,

flowplayer(0).bind('finish', function(e,api,time) {
console.log('video has finished');
  if(jQuery(cdata).parent().next().length){
    jQuery(cdata).parent().next().find('a').click(); 	
  }  
});

I am able to switch to the next panel when a video finishes. The only issue is to get the currently displayed video to play. Often when I call api.load(), a video not currently visible begins to play. Is there a way to find the current video and give it the command to play?
The currently visible panel uses the class ‘vc_active’.

And yes, I am using

flowplayer( function(api,root) {
  api.load();
  ...
});

Thank you for your response.

Ok, I have rewritten my code. Now I am inserting the output of

do_shortcode(‘[fvplayer id="'.$video_id.'" width="'.$embed_width.'px" height="'.$embed_height.'px"] ‘);

into a page when a link is clicked.

Now there is no video element in the shortcode output until the play button is clicked. And I am not able to initialize the api with
if( typeof(flowplayer) != “undefined” ) {
flowplayer(function (api, root) {
…

Perhaps the inserting of the video html and the flowplayer initialization are not taking place in the correct order. But it does not seem to help to run flowplayer(function (api, root) before the video html is added to the page. Do you have any solutions?

The videos are ok. It must be the issue with iOS that is causing the problem. Than you for your help.

Admin: Video OK

Analysis of (redacted).m3u8

Mime Type: application/vnd.apple.mpegurl
crossdomain.xml: Warning: crossdomain.xml not found - won't play in IE 11 and below, see our guide here
Compatibility: CORS headers found
Duration: 00:21:49.00
Video:
[hls,applehttp @ 0x50673c0] Opening '(redacted).ts' for reading
[hls,applehttp @ 0x50673c0] Opening '(redacted).ts' for reading
Input #0, hls,applehttp, from '(redacted).m3u8':
Stream #0:0: Video: h264 (Main), yuv420p(tv, smpte170m), 640x360 [SAR 1:1 DAR 16:9], 25 fps, 25 tbr, 90k tbn, 50 tbc
Audio:
Stream #0:1: Audio: aac (LC), 48000 Hz, stereo, fltp

Analysis of (redacted).mp4

Mime Type: video/mp4
Format: mp42
Duration: 00:21:48.10
Bitrate: 650 kb/s
Video:
Input #0, mov,mp4,m4a,3gp,3g2,mj2, from '(redacted).mp4':
Stream #0:0(und): Video: h264 (High), yuv420p(tv, smpte170m), 640x360, 393 kb/s, 25 fps, 25 tbr, 25 tbn, 50 tbc (default)
handler_name : L-SMASH Video Handler
Audio:
Stream #0:1(und): Audio: aac (LC), 48000 Hz, stereo, fltp, 253 kb/s (default)
handler_name : L-SMASH Audio Handler
Video meta data: moov-atom not found at the start of the file. Please move the meta data to the start of video, otherwise it might have a slow start up time when using Flash. Plese check the "How do I fix the bad metadata (moov) position?" question in FAQ.

I uploaded a 360p MP4 file and used it for the mobile video in the FV Player and it plays on the old iPhone. That seems to solve this issue; I will use MP4 files instead of HLS files for mobile.