[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?

[zhangzhecomiru]

if you run it on server(for example: ubuntu), you can install chrome and set the browser path to run tests which need play video.

in playwright.config.js

use: {
launchOptions:{
executablePath:process.env.CHROMIUM_PATH
},
},

in .env
CHROMIUM_PATH=/usr/bin/google-chrome-stable

install chrome in ubuntu
wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
sudo dpkg -i google-chrome-stable_current_amd64.deb

[OliverMorland]

I'm having the same issue. Was the issue resolved by adding the codecs to chromium or are we expected to change the executable paths within browser.launch() to our own installed versions of chrome?

[raffaeldp]

I'm having the same issue. Was the issue resolved by adding the codecs to chromium or are we expected to change the executable paths within browser.launch() to our own installed versions of chrome?

Still not working on chromium for me.
However, if you use chrome instead of chromium, by adding channel: 'chrome' it's obviously working :

// playwright.config.ts
{
            name: 'Google Chrome',
            use: {...devices['Desktop Chrome'], channel: 'chrome',},

},

Maybe not perfect, but if that can help :)

[Zoniso]

The problem is that Chrome is heavier, so the tests duration increasing when using Chrome on all tests.
Is there a custom Chromium version where mp4 files can be uploaded?

[sovetski]

Any updates please? The solution of @raffaeldp is ok but as @Zoniso said Chrome is heavier and just for running a video we can not use this..

[kldzj]

In addition to the above mentioned issues, there's no Chrome build for arm64 available.