How do you programmatically play, pause, and dynamically set a video source?

What's really being asked

This question evaluates whether you treat the DOM as a programmable API rather than static markup. Senior engineers should know that HTMLMediaElement defines the shared contract for both audio and video, that play() returns a Promise because browsers gate playback on user activation and autoplay policies, and that changing a media resource requires more than flipping a string property. It also checks if you understand the distinction between the element-level src attribute and nested source children, which matters for adaptive media or codec fallback strategies.

The full answer

First, element acquisition: use a typed ref in React or querySelector in vanilla TS, narrowing to HTMLVideoElement. Second, event wiring: attach click listeners to the play and pause buttons that call video.play() and video.pause(). Third, the Promise: acknowledge that play() is asynchronous and can reject with a NotAllowedError if the user has not interacted with the document, so robust code awaits or catches it. Fourth, dynamic source assignment: explain two valid paths. You can set video.src to a URL string and then call video.load() to reset the media controller and begin fetching. Alternatively, you can remove existing source children, create a new HTMLSourceElement, set its src and type attributes, append it to the video, and then call load(). Mention that load() is necessary to trigger resource selection when you manipulate source children.

The mistakes people make

Treating play() as a fire-and-forget synchronous call and ignoring the returned Promise. Setting video.src without calling load() and expecting the browser to immediately switch streams. Using innerHTML to inject a source tag and expecting the media element to pick it up without a load call. Confusing the element src property with the currentSrc property, which reflects the resolved resource after the browser has evaluated source children. Failing to type the element as HTMLVideoElement and instead using generic HTMLElement, which loses access to media-specific methods in TypeScript.

What usually comes next

How would you handle a user clicking play before the metadata has loaded? What happens if the browser blocks autoplay and the Promise rejects? How do you support multiple codecs or adaptive bitrate via source children versus a single src string? If you are in a framework like React, why is a ref preferable to an id or querySelector? How would you clean up event listeners or abort a pending load when the component unmounts?

A concrete example

In TypeScript, you might write const video = document.querySelector('video') as HTMLVideoElement; const playBtn = document.getElementById('play')!; const pauseBtn = document.getElementById('pause')!; playBtn.addEventListener('click', () => { video.play().catch(err => console.error('Playback failed:', err)); }); pauseBtn.addEventListener('click', () => { video.pause(); }); To change the source dynamically, you set video.src = 'new-video.mp4'; video.load(); and then optionally call play() again once the user clicks. If you prefer source elements, you clear video.innerHTML = ''; create a const source = document.createElement('source'); source.src = 'new-video.mp4'; source.type = 'video/mp4'; video.appendChild(source); video.load();.