search

fregante / iphone-inline-video

📱 Make videos playable inline on the iPhone (prevents automatic fullscreen)
https://npm.im/iphone-inline-video
MIT License
2.06k stars 298 forks source link

Black flash on loop #93

Closed ghost closed 7 years ago

ghost commented 7 years ago

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?

fregante commented 7 years ago

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.

ghost commented 7 years ago

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.

fregante commented 7 years ago

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/

ghost commented 7 years ago

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.

ghost commented 7 years ago

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

fregante commented 7 years ago

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

ghost commented 7 years ago

Here is an example of the undesired behaviour:

powerlesssickangelwingmussel-size_restricted

ghost commented 7 years ago

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

fregante commented 7 years ago

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
ghost commented 7 years ago

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.

neo commented 7 years ago

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

fregante commented 7 years ago

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