Search code examples
node.jschromiumgoogle-chrome-headlesspuppeteer

Puppeteer video automatically downloading instead of displaying player

Basically I have this piece of code below

;(async () => {
  const browser = await puppeteer.launch({
    args: ['--no-sandbox'],
    headless: false
  })

  const page = await browser.newPage()

  await page.goto('https://www.w3schools.com/html/mov_bbb.mp4', {waitUntil: 'load'})
})()

and for some reason when I execute the script chromium just automatically starts downloading the video instead of showing the player.

Is there any way I could prevent this?

Solution

  • At the time of writing this answer, Unfortunately Chromium does not support playing .mp4, Learn more: https://www.chromium.org/audio-video

    How can you bypass this action? You can download the latest chrome dev version from here, https://www.chromium.org/getting-involved/dev-channel

    And then use that chrome path like this,

    const browser = await puppeteer.launch({
    args: ["--no-sandbox"],
    headless: false,
    executablePath: "./chrome-unstable/chrome" // <-- chrome path here
});

    You'll see it loads properly without downloading, enter image description here

    There is one major drawback, the browser doesn't know when the page is loaded, Should it wait until the whole video is loaded? Should it autoplay?

    Puppeteer still does not have any good way to deal with media files except to download it. Same goes with .ppt, .doc, .pdf and any other kind of files.

    You can look for other media related issue here: https://github.com/GoogleChrome/puppeteer/issues?utf8=%E2%9C%93&q=is%3Aissue%20mp4