[Question] Video not being loaded, therefore it can't be played

[dcfranca]

Context:

• Playwright Version: 1.6.2
• Operating System: Mac
• Node.js version: v13.13.0
• Browser: Chromium

npx: installed 1 in 3.219s

System:
OS: macOS 11.0.1
Memory: 1.09 GB / 16.00 GB
Binaries:
Node: 13.13.0 - /usr/local/bin/node
Yarn: 1.22.4 - /usr/local/bin/yarn
npm: 6.14.9 - /usr/local/bin/npm
Languages:
Bash: 3.2.57 - /bin/bash
Code Snippet

  await page.click('[data-test="videoplayer"]');

Describe the bug

I have a React application with a simple video tag and loads the video source dynamically:

    <video data-test='videoplayer' width='90%' controls controlsList="nodownload" style={{ marginTop: 20 }} ref={videoPlayer} onClick={() => videoPlayer.current && videoPlayer.current.play()}>
      {videoUrls.map(url => {
        return (
        <source
          key={url}
          src={url}
          type={'video/mp4'}
        />
      )})}
    </video>

this works fine, except when I'm on Playwright.

await page.click('[data-test="videoplayer"]');

The video seems to never load and stays on a black screen, I have tried to run it on codegen environment as well and inspect the element, the URL is fine and if I copy/pate it to a different browser tab it opens the video normally.

Any idea what it could be? and how could I fix it?

[aslushnikov]

if I copy/pate it to a different browser tab it opens the video normally.

@dcfranca To clarify: do you copy-paste it to the same Playwright browser tab or to your default browser?

[dcfranca]

@aslushnikov to my default browser

[aslushnikov]

It looks like Chromium is missing some codecs that are otherwise bundled with Chrome. Running against stable chrome will work; you'll need to specify a path to stable chrome with the executablePath option in browser.launch() command:

const browser = await browser.launch({
  executablePath: `/Applications/Google Chrome.app/Contents/MacOS/Google Chrome`,
});

Let us prepare some docs for this.

[vitaliisotnichenko]

we have the similar issue. We're testing videostreaming platform and it's completely can't be testing because chrome and chromium have different codecs and it's almost testing using Playwright. For Chrome everything is working

[coolcorexix]

It looks like Chromium is missing some codecs that are otherwise bundled with Chrome. Running against stable chrome will work; you'll need to specify a path to stable chrome with the executablePath option in browser.launch() command:

const browser = await browser.launch({
  executablePath: `/Applications/Google Chrome.app/Contents/MacOS/Google Chrome`,
});

Let us prepare some docs for this.

Does this mean I have to install another chrome binary on CI/CD environment? Why can't we update so that the chronium have this codec? I am here to help just give me a rough instruction

[FilippTrigub]

It looks like Chromium is missing some codecs that are otherwise bundled with Chrome. Running against stable chrome will work; you'll need to specify a path to stable chrome with the executablePath option in browser.launch() command:

const browser = await browser.launch({
  executablePath: `/Applications/Google Chrome.app/Contents/MacOS/Google Chrome`,
});

Let us prepare some docs for this.

Does this mean I have to install another chrome binary on CI/CD environment? Why can't we update so that the chronium have this codec? I am here to help just give me a rough instruction

Same question here. Any updates?