Build a Web H.265 Player with WebAssembly and JavaScript – Step-by-Step Guide

H.265 is the next video coding standard after H.264, offering the same quality at half the bandwidth.

Because many browsers lack native H.265 support, this article presents a complete open‑source web H.265 player built with JavaScript stream demuxing, WebAssembly‑compiled FFmpeg, Canvas rendering and AudioContext audio playback.

First, clone the project and install dependencies, then choose one of the following npm scripts to run or build:

# Choose one of the following build commands
npm run dev        # development environment
npm run test       # test environment
npm run build      # production build
rollup -c          # build csj and esm versions

Configure an Nginx server to serve the files, for example:

server {
    listen 8000;
    location / {
        root <path of goldvideo>/goldvideo;
        index index.html index.htm;
        autoindex on;
    }
}

After restarting Nginx, open http://localhost:8000/h265player/demo/demo.html to verify playback.

In the HTML page, add the player stylesheet and script, and define a container:

<link rel="stylesheet" href="../dist/goldplay-h265.css">
<script src="../dist/goldplay-h265-sdk.js"></script>
<style>
    .play-container {
        width: 800px;
        height: 500px;
    }
</style>
<div class="play-container"></div>

Instantiate the player with JavaScript:

// Player container
let el = document.querySelector('.play-container');
// Player options
let options = {
    sourceURL: 'http://localhost:8000/h265player/data/video2/playlist.m3u8',
    type: 'HLS',
    libPath: 'http://localhost:8000/h265player/dist/lib'
};
let player = new GoldPlay(el, options);

The project consists of four modules (UI, Loader, Data Processing, Data Rendering) and three threads (main UI thread, data loading thread, data processing thread). The main thread coordinates UI, downloading, stream handling, audio and video. The loading thread fetches metadata, while the processing thread demuxes and decodes the H.265 video using the FFmpeg‑Wasm library.