See this pen: https://codepen.io/keithpickering/pen/qGyvwp
On the left is a "Boomerang", which is generated with our iOS app before being uploaded to S3. The other two videos are non-boomerangs also sent from the same app.
If you open this pen in any desktop browser and most mobile browsers, both videos play perfectly fine. However, in Chrome for Android, the Boomerang video skips around and generally just doesn't work properly.
Boomerangs are generated by taking a few seconds of video, then using AVKit to copy the video, reverse it, add the reversed version to the end, and loop the whole thing as necessary to reach a >=4 second duration.
I think this is some kind of encoding issue, but I'm not sure how else to test. What should I look for in the metadata/codec info within these files to further debug? If it is an encoding issue, is there any kind of third-party video player that might work better than the native one? All of our Boomerangs are generated the same way, so we can't go back and reencode them all.
Posting the code from the pen because Stack Overflow is making me:
<div class="col">
<h2>Boomerang</h2>
<video class="image-container video-container" autoplay loop muted playsinline><source src="https://queso-test.s3.us-west-2.amazonaws.com/J8UA23OSOFSE2E5L.mp4" type="video/mp4"></video>
</div>
<div class="col">
<h2>Regular Video</h2>
<video class="image-container video-container" autoplay loop muted playsinline><source src="https://queso-test.s3.us-west-2.amazonaws.com/5T7Z9GIG5SPYOX03.mp4"></video>
</div>
