Doesn't work in Safari

[jhodges10]

Not sure if it's just me or not, but while the plugin works in Chrome - it does not work in Safari.

For example, https://beta.jeffhq.com/verizon-go90/ this page does not show looping vids in Safari.

jhodges10/jeffhq-v2@777559d

This commit shows my attempt to make sure it wasn't trying to load .webm but even that didn't fix it.

[Mike-Dax]

html5 video tags will dynamically load the 'correct' one, for example Safari won't load a webm.

However it seems like your mp4 isn't able to be played in Safari.

https://beta.jeffhq.com/static/go90_drew_v09-4138661fabdb68efee190dcd047fb90a-8722d.mp4

Loading the video directly doesn't work.

I've made some changes to the defaults which make the mp4 a bit more compatible. Specifically specifying a yuv420p pixel format and using a main, low-cpu use profile.

Perhaps that will work? I'm having some of my builds work in Safari and some not, I'm not sure what's going on there. I've run out of time this weekend to work on this - but if you could figure out the ffmpeg settings that produce an mp4 that Safari likes, I'll make that the default.

I've made a query based version of this plugin (since I now need videos outside my 'articles')

https://github.com/Mike-Dax/gatsby-transformer-ffmpeg

So you should be able do a query like this in the ___graphql url and 'iterate quickly' to find some combination of settings that work for you if the new defaults don't work.

{
  allVideoFfmpeg {
    edges {
      node {
        mp4: transcode(maxWidth: 900, maxHeight: 480, fileExtension: "mp4", codec: "libx264", options:[["-profile:v", "main"], ["-pix_fmt", "yuv420p"]]) {
          width
          src
          presentationMaxWidth
          presentationMaxHeight
          originalName
          height
          aspectRatio
        }
      }
    }
  }
}

          {
            resolve: `gatsby-remark-videos`,
            options: {
              pipelines: [
                {
                  name: 'vp9',
                  transcode: chain =>
                    chain
                      .videoCodec('libvpx-vp9')
                      .noAudio()
                      .outputOptions(['-crf 20', '-b:v 0']),
                  maxHeight: 480,
                  maxWidth: 900,
                  fileExtension: 'webm',
                },
                {
                  name: 'h264',
                  transcode: chain =>
                    chain
                      .videoCodec('libx264')
                      .noAudio()
                      .addOption('-profile:v', 'main')
                      .addOption('-pix_fmt', 'yuv420p')
                      .outputOptions(['-movflags faststart'])
                      .videoBitrate('1000k'),
                  maxHeight: 480,
                  maxWidth: 900,
                  fileExtension: 'mp4',
                },
              ],
            },
          },

[jhodges10]

The updated encoding settings seem to be working for me!

Thanks @Mike-Dax

[jhodges10]

Well I take that back... It worked yesterday in Safari while running in development mode, and now it's not!

Why can't everything just run on Chromium :(

[Mike-Dax]

So this worked on my friend's iPhone X during iOS 12, and upon upgrading to iOS 13 it doesn't work anymore.

[cwgw]

Hi. I think this might have to do with gatsby-plugin-offline and how workbox handles range requests. There's an issue for it at gatsbyjs/gatsby too.

The gist (I think) is that caching range requests is complicated and Safari is particularly strict about it.

If that is your problem, then you can fix it by removing gatsby-plugin-offline. It's a bummer of course since you lose offline and PWA support, but I haven't seen a better solution yet.