Sample MP4 URLs for Playwright Video Tests

Use deterministic MP4 URLs in Playwright checks for HTML5 playback, metadata loading, screenshots, and video UI states.

About Playwright Video Testing

Playwright tests become more reliable when video fixtures are stable, public, and small enough to load quickly in CI. A URL-based MP4 placeholder removes the need to commit binary files to your repository or mock video loading behavior. Each placeholder URL returns a valid MP4 with a predictable duration, codec, poster, and dimensions, which makes it useful for checking that a player loads metadata, renders controls, preserves aspect ratio, and reacts to playback events. This recipe focuses on realistic browser behavior rather than unit-level mocks, so it catches failures that only appear when the browser parses an actual media file.

When to Use Video Placeholders for Playwright Video Testing

Use this recipe when testing custom video players, media cards, marketing pages with hero video, docs examples, or any UI that depends on loaded video metadata. It works well in CI because the same URL can be reused across local development, preview deployments, and automated test workers. Start with 640×360 for fast smoke tests, use 1280×720 for common responsive layouts, and add 1920×1080 only where you need a Full HD source. Use 1080×1920 when your product has vertical video previews or mobile-first story layouts.

Quick Start

Use this URL to generate a placeholder video:

https://placeholdervideo.dev/1920x1080

HTML Example

<video src="https://placeholdervideo.dev/1920x1080" width="1920" height="1080" controls></video>

Copy-Paste Recipe

Use a real MP4 URL, wait for browser metadata, then assert dimensions and duration without storing binary fixtures in the repo.

Playwright

import { expect, test } from '@playwright/test'

test('loads a deterministic placeholder video', async ({ page }) => {
  await page.setContent(`
    <video data-testid="video" src="https://placeholdervideo.dev/1920x1080" muted controls preload="metadata"></video>
  `)

  const metadata = await page.locator('[data-testid="video"]').evaluate((node) => {
    const video = node as HTMLVideoElement
    return new Promise<{ width: number; height: number; duration: number }>((resolve) => {
      video.addEventListener('loadedmetadata', () => {
        resolve({
          width: video.videoWidth,
          height: video.videoHeight,
          duration: Math.round(video.duration)
        })
      }, { once: true })
    })
  })

  expect(metadata).toEqual({ width: 1920, height: 1080, duration: 10 })
})

Cypress

cy.visit('/video-test-page')
cy.get('video')
  .invoke('attr', 'src', 'https://placeholdervideo.dev/1920x1080')
  .then(($src) => expect($src).to.include('1920x1080'))

cy.get('video').then(($video) => {
  const video = $video[0]
  video.load()
  cy.wrap(video).should('have.prop', 'readyState').and('be.gte', 1)
})

Fixture Facts

Approx. MP4 size250 KB-450 KB
Generation timeabout 1-3 seconds uncached; repeat requests should hit cache
Video codecH.264 / AVC, Baseline profile, yuv420p
Audio codecAAC-LC silent stereo, 48 kHz
Browser supportChrome, Edge, Safari, Firefox, iOS Safari, Android Chrome

Response Headers

Content-Type: video/mp4
Cache-Control: public, max-age=86400, immutable
Accept-Ranges: bytes
Access-Control-Allow-Origin: *
X-RateLimit-Limit: 60 standard / 10 heavy per minute

Technical Considerations

The recommended Playwright flow is to set the video source to a deterministic MP4 URL, wait for loadedmetadata, assert videoWidth and videoHeight, then optionally verify that currentTime changes after playback starts. The response is CORS-enabled, cacheable, byte-range capable, and encoded as MP4/H.264 with a silent AAC track, so Chromium, Firefox, and WebKit can treat it like a normal production media asset. Keep tests focused on browser behavior; do not assert exact byte sizes unless your goal is to validate the placeholder service itself.

Common Questions

Should Playwright tests download videos into the repo?
Usually no. A stable URL keeps the repository small and avoids binary fixture churn. Download a fixture only when your CI network policy blocks external requests.
Which resolution should I use in CI?
Use 640×360 for fast smoke tests and 1280×720 for layout checks. Reserve 1920×1080 or 4K for targeted performance tests.
Can this test autoplay behavior?
Yes, but browser autoplay policies still apply. Muted playback is the most reliable path for automated browser tests.

Other Use Cases