[BUG]: Missing video codecs for Firefox in Heroku

[ProQuestionAsker]

It appears that videos in a headless Firefox browser within Heroku (using the Playwright buildpack) are missing codecs. I'm getting the following error:

[JavaScript Warning: "The video on this page can't be played. 
Your system may not have the required video codecs for: 
video/mp4;codecs="avc1.4d402a"" {file: "https://link/to/video" line: 0}]

This is the same error that was reported for Dockerized Playwright and had been solved by installing ffmpeg. I've tried to do the same within Heroku (both by forking the buildpack and requiring ffmpeg as a dependency and by including an ffmpeg buildpack) without luck. I'm unclear if this is an issue with Playwright itself or with the buildpack, so I've also filed an issue over there (apologies for the duplicate!)

It's worth noting that I'm only getting this error when my script is run remotely in Heroku. Running it locally (using heroku local on my machine) returns no errors and videos play as expected.

Happy to provide more info if needed. Many thanks for such a great project!

[mxschmitt]

Hi @ProQuestionAsker. Just want to let you know that we're on it. Should be added in the next few days.

[ProQuestionAsker]

Amazing, thank you! Apologies again for cross posting, just wanted to make sure this was documented in the right spot.

[mxschmitt]

Hi @ProQuestionAsker, would be awesome if you could try out this branch on the buildpack, for me it seems to work but I don't have the exact test case:

https:/mxschmitt/heroku-playwright-buildpack.git#bugfix/pw-1-4 (just set it on Heroku)

Edit: I used this test case in the end that the play() function is working from a video element. On the screenshot I can verify that 2 seconds had passed after clicking play:

// @ts-check
const playwright = require("playwright-firefox");

(async () => {
  const browser = await playwright.firefox.launch()
  const page = await browser.newPage();
  await page.goto('https://www.w3.org/2010/05/video/mediaevents.html');
  await page.waitForTimeout(4000)
  await page.$eval("#video", e => e.play())
  await page.waitForTimeout(2000)
  await page.screenshot({ path: `example.png` });
  await browser.close();
})();

[ProQuestionAsker]

Yes! This works now. Thank you so much for the fix!!

[mxschmitt]

Yes! This works now. Thank you so much for the fix!!

Cool, glad to hear, then I'll merge it to master. Thanks!