jwplayer: seek function doesn't work on mobile safari?

Test page (not working properly on iPhones)

I have hundreds of videos on my site, and I want to replace their openings. To avoid re-render all the videos again, I use the following code to add the new opening as a playlist item that is going to play before the original video, and then when the original video is being played, the first 20 seconds (where the old opening is) will be cut.

<html>
<head>
  <script src="/templates/it_365news/js/jwplayer/jwplayer.js" type="text/javascript"></script>
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script>
    $(document).ready(function(){
      $('#ready').html('document is ready at ' + new Date().getMinutes() + ":" + new Date().getSeconds() + ":" + new Date().getMilliseconds())
    })
  </script>
</head>
<body>
  <div id="vp0">

  </div>
  <div id="ready" style="background:yellow">

  </div>
  <div id="vr" style="background:red">

  </div>

  <div id="vl" style="background:blue">

  </div>
  <script>
    jwplayer.key = 'bwIDfauoN3m+MClNdkQb0YamUxTfzWw7ygugtA==';
    jwplayer('vp0').setup({
      "file": "http://video.jiuan.org/2017/May/luntan.mp4",
      "image": "http://www.jiuan.org/ffmpeg_image.php?file=2017/May/luntan.mp4&time=00:00:03&browser=true",
      "width": "100%",
      "aspectratio": "16:9"
    })
  </script>
  <script>
    var jw = jwplayer('vp0');
    var file = jw.getPlaylistItem('0').file;
    var image = "http://www.jiuan.org/ffmpeg_image.php?file=2017/May/UNG1.mp4&time=00:00:09&browser=true";
    var title = jw.getPlaylistItem('0').title;
    var openning = {"file": "/videos/UNG.mp4","image": image,"title":title};
    var video = {"file":file};
    jw.setup({
      "playlist":[openning,video],
      "visualplaylist": "false",
      "width": "100%",
      "aspectratio": "16:9"
    })
      .on('playlistItem',function(){
        $('#vr').html('video is ready at ' + new Date().getMinutes() + ":" + new Date().getSeconds() + ":" + new Date().getMilliseconds());
        if (this.getPlaylistIndex() === 1){
          $('#vl').html("cut");
          this.seek(20);
          $('#vl').append('done');
        }
      });
  </script>
</body>
</html>

This works out on window PC, Mac book air and Android phones, but when it comes to iPhone, the new opening is successfully added, but the old opening is still being played, a.k.a the this.seek(20) seems not working. Is there a better way to debug? And is there any other way to achieve my goal?

Recommended topics

Hot tags