HTML Canvas Video Player

HTML Canvas Video Player is a deprecated, dependency-free JavaScript library that renders video into an HTML canvas, allowing videos to play inline on iPhones instead of opening the native fullscreen player. The project, which lives on GitHub and currently has 427 stars, was created as a workaround for the pre-iOS-10 era when mobile Safari forced video to fullscreen; it is no longer actively maintained because iOS 10 and later natively support the playsinline attribute.

What is HTML Canvas Video Player?

HTML Canvas Video Player is a plain JavaScript class that plays video on an HTML canvas element. It accepts a video element and a canvas, then draws each frame of the video onto the canvas using the Canvas API, while audio continues through the original video element. The library works on IE9+ and modern browsers, though the author states it was intended primarily for iPhone use. The documentation and a live demo are hosted at stanko.github.io/html-canvas-video-player, and the GitHub project has attracted 427 stars.

Key Features

• Dependency-free plain JavaScript — No framework, build step, or external libraries are required; the player is a single class you can load with a script tag.
• Canvas rendering — Video frames are drawn onto a configurable canvas element, so you can apply overlays, filters, or composite graphics on top of the moving video.
• Inline iPhone playback — Bypasses the old iOS native fullscreen video behavior, keeping the video within the page layout on iPhones.
• Audio support — Added after the initial release, keeping sound in sync with the canvas-rendered frames.
• Built-in timeline — A timeline control is included in the main JavaScript file, giving users a way to seek through the video.
• Broad browser compatibility — Supports IE9+ and all modern browsers, although Android users have native inline video support and don't need this workaround.
• Documentation and demo — The author provides a documented demo page with usage examples at stanko.github.io/html-canvas-video-player.

Who is it for?

HTML Canvas Video Player is aimed at web developers who need inline video playback on iPhones without the native player, especially those supporting iOS versions prior to 10. It also suits developers building custom video players that require canvas-level manipulation (overlays, drawing on frames, or CSS compositing). Hobbyist and professional front-end developers who want a lightweight, dependency-free video component for a legacy mobile web project will find this useful.

What can you do with HTML Canvas Video Player?

• Web developers on legacy iOS: Play background or hero videos inline on iPhones running iOS 9 or earlier, where the playsinline attribute did not exist yet.
• Custom player builders: Render video to canvas so you can add annotations, draw boxes, or animate extra elements directly on top of each frame.
• Prototypers needing zero dependencies: Embed a functional video player without pulling in jQuery, React, or any other library.

How does it work?

The player attaches to an existing video element and a canvas element. On each animation frame, it copies the current video frame to the canvas using the Canvas API, while the audio still plays through the video element to stay in sync. This gives the appearance of the video playing inside the canvas, independent of native iOS video controls.

Is it still maintained?

No. As of iOS 10, Safari natively supports the playsinline attribute on video elements, making the canvas workaround unnecessary. The project author has officially deprecated it and recommends using native HTML video instead. The repository is not actively maintained, but the author invites anyone who wants to take over to open an issue and become a contributor.

FAQ

Why is HTML Canvas Video Player deprecated?

The project was designed for the old iOS behavior that forced videos into fullscreen. With iOS 10, Apple added native support for the playsinline attribute, allowing videos to play inline without any JavaScript workaround, so the library is no longer needed.

What does HTML Canvas Video Player do?

It's a plain JavaScript class that renders a video onto an HTML canvas element so the video can play inline on iPhones. It takes a video and a canvas, draws each frame onto the canvas, and keeps audio in sync.

Does it work on Android?

The README notes that "Android works for ages now," meaning inline video is natively supported on Android, so the canvas player is unnecessary there. The library was intended for iPhone only.

How can I play inline video on iPhone today?

Use a standard HTML video element with the playsinline attribute. Since iOS 10, Safari honors this attribute, so videos play inline rather than launching the native fullscreen player.

What browsers are supported?

HTML Canvas Video Player supports IE9 and above plus all modern browsers. However, it was created for iPhone usage on older iOS versions, so on other platforms you'll typically just use native video.