Videos often don't play in Safari

[jlongster]

This lib filters out the available video formats to only choose video/mp4. These videos don't seem to play very well in Safari. They play sometimes, but other times don't play at all. I suspect this is actually a server issue with the twitter syndication service. It doesn't seem to properly be handling byte range requests.

However, this can be completely fixed by including the application/x-mpegURL format that is available. Something like this:

  const { variants } = media.video_info;
  const mpeg = variants.find(
    vid => vid.content_type === 'application/x-mpegURL',
  );

  const mp4Videos = getMp4Videos(media);
  // Skip the highest quality video and use the next quality
  return [mpeg, mp4Videos.length > 1 ? mp4Videos[1] : mp4Videos[0]].filter(
    Boolean,
  );

And when rendering the <video> tag you render both sources for both formats, and the browser will choose the best one (Safari will choose x-mpegURL):

<video class="..." poster="..." playsinline="" preload="none" tabindex="-1">
  <source src="..." type="application/x-mpegURL">
  <source src="..." type="video/mp4">
</video>

I'm doing this and it works great. Thought you all should know