fregante / iphone-inline-video

📱 Make videos playable inline on the iPhone (prevents automatic fullscreen)

Home Page:https://npm.im/iphone-inline-video

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Black flash on loop

opened this issue · comments

Hi!

I really love your library. Yet I struggle with a little inconvenience on iOS 9 on iPhone 5.

%video(autoplay muted loop playsinline fluid src preload) - to this html element (in HAML) I attach a correct source and then I use your polyfill.
Unfortunately after video ends (it is just few seconds long) there is 1-2secs black screen (I guess it is just script loading, but it is only on iphone 5 (iOS 9).
Is it just because of execution of script or is there any other reason for that behavior?

Do it happen only on the first loop or at every loop?

Try disabling preload altogether. It's ignored by normal browsers that support autoplay natively and in this case iOS 9 might trigger a secondary partial load.

Thank you for the quick response!

It happens on each iteration. Unfortunately, disabling preload doesn't help. Maybe I will add first frame of the video as a background image and hide the video between loops.

Can you see what happens in the developer console/network tab? Does this looping video (below) autoplay and loop fine for you? https://bfred-it.github.io/iphone-inline-video/demo/

Will check later what is going in console, when will have cable avalaible. These two vids: on iPhone6(iOS 10) there wasn't autoplay, and play didn't work. On iPhone 5 (iOS9) everything was all right.

Console is clear. Additionally none of the media events are fired before/during/after the flash.

Demo: if it works fine on iOS 9 then IIV works correctly. iOS 10 might not have worked because of network issues; the videos are not stored on a stable server (IIV is not enabled at all on iOS 10)

I would need to see your page to understand what's happening. It might be some other script interfering

Here is an example of the undesired behaviour:

powerlesssickangelwingmussel-size_restricted

Recreated the issue in codepen
https://codepen.io/Pshek/pen/GNeVyQ/

I know this bug, I had it before and it was unrelated to looping but rather to how Apple renders certain videos. In my case the video would just stop on the black frame.

For some reason, Safari and QuickTime see an extra black frame at the end. I can see it easily when I scrub the video in QuickTime:

video scrub

I always solved by re-encoding the videos with some other application. In detail, it might be caused by the mismatch of the MP4's declared length and the actual Video stream length:

codepen video details

Thank You @bfred-it for that. In my case (video above was just a random one) the source of all problems was audio track, which was slightly longer than video. I removed audio track (cause there wasn't any hearable audio in that vid ROTFL). Drop on PM your address so I can send you a good polish beer.

@bfred-it what's the application you used to see the video details?

That app is no longer free, but this is similar https://www.macupdate.com/app/mac/32313/mediainfo