Skip to main content
100%

Hls.js demo - basic usage

✓ Published0🌍 Public
VVioletVivirand
Last edited Apr 1, 2024
Created on Apr 1, 2024

This example demonstrates basic HLS video streaming with two alternative player setups. The first uses Hls.js, which loads an m3u8 manifest via `hls.loadSource`, attaches it to a video element, and automatically plays the stream. The second integrates Amazon IVS with Video.js by registering the custom tech through `registerIVSTech` and initializing playback with `player.src`. Both scripts rely on a placeholder URL that the user must replace with a real stream. The code highlights fallback behavior for browsers lacking Media Source Extensions.

AI-generated description

Similar vizzes

Loading thumbnail…

Fork of react 视频

This example demonstrates a React-based video player streaming a live HLS (HTTP Live Streaming) feed from a public m3u8 playlist URL. It shows how to integrate the Video.js library into a React functional component using hooks, specifically initializing the player once via `useEffect` and handling its lifecycle disposal. The code relies on React 16.9, the Video.js 7.6.6 API, and the `video-react`-style wrapper pattern, configuring the player with options like height, controls, and the HLS source type.

DDanier
68% match
Loading thumbnail…

Sep 17 Demo

This example displays an embedded video player with native HTML5 controls and autoplay functionality. The page uses the `<video>` element with multiple source formats (MP4, WebM, OGG) for cross-browser compatibility, along with a WebVTT subtitle track for English captions. The styling is minimal, centering the video and setting an oversized font size. The HTML5 video API handles playback, while the track element provides accessible subtitles.

NNita
63% match
Loading thumbnail…

Untitled

This example presents a simple interactive scene using an embedded YouTube video within a bare-bones HTML page. The main visualization is a video player that users can control directly. The page’s code, primarily in `index.html`, likely relies on the standard HTML `<iframe>` element and the YouTube player API for playback. No additional data sources or complex rendering libraries like D3 or Three.js are present; the focus is solely on embedding and displaying a single video via the provided URL.

SSaai Sudarsanan D
60% match
Loading thumbnail…

Untitled

This example demonstrates a minimal HTML page that embeds a YouTube video player and displays a simple static heading. The code uses a standard HTML5 structure with an `<iframe>` element to load the video from YouTube, while the page’s content is limited to a single `h1` heading. No JavaScript libraries or data visualizations are present; the page relies solely on native HTML tags for its rendering. The video appears to be the primary visual element, though no further interaction or dynamic behavior is implemented beyond the iframe’s default playback controls.

Ccasihoicho
59% match
Loading thumbnail…

Gist 1c55837a8248d790382976cbb62f37c1

This example displays a volumetric video of a person, loaded and played inside a WebGL scene using the Depthkit.js library. The code creates a script element to load the latest Depthkit.js version, then instantiates a `Depthkit` object to fetch a metadata text file and an MP4 video from a proxy URL. Once loaded, the resulting character is added to the A-Frame scene’s root object, and playback is initiated. The setup targets A-Frame’s boilerplate “hello world” page but fails on Mozilla Hubs due to its custom world-update logic.

UUtopiah
59% match
Loading thumbnail…

Gist c3927fd16c93fc919a74036325faacd4

In a virtual-reality environment built with A-Frame, a video playlist automatically plays two accessibility-themed VR conference talks inside a networked 3D scene. The code defines an array of MP4 URLs hosted on an S3 bucket, creates an `a-entity` with the `media-loader` and `networked` components, and scales it to ten units while positioning it 35 units away. It disables looping and listens for the video’s `ended` event to switch to the next clip, cycling back to the first after the last. A CORS proxy URL prefixes each source, and the playback jumps near the end for testing.

UUtopiah
59% match
Loading thumbnail…

Untitled

This example displays a single embedded YouTube video within a bare-bones HTML page titled “Fork 123 of Hello HTML.” The page contains no interactive data visualization; instead, it relies on an `<iframe>` to load the video player from YouTube’s embed API. The code uses standard HTML elements (`<h1>`, `<body>`, `<iframe>`) with no external JavaScript libraries or rendering techniques. The visualization is static, showing only the video player and heading text as its entire content.

HHuchenhaoArvin
58% match
Loading thumbnail…

Fork of Hello HTML

This example presents a minimal HTML page with an embedded YouTube video. The page structure is defined with standard HTML elements, including a title and an empty heading. The code uses raw HTML to set up the document and an iframe to embed the video player. The visible content is the video frame itself, which serves as the primary visualization. The example demonstrates a straightforward approach to displaying external media within a basic web page, without incorporating any JavaScript libraries or data processing.

Rradhika2026
57% match