Integrating a Video Player Module into ASP.NET Community Software

Use Case: Video in Community Forums

Sports communities thrive on video — match highlights, goal replays, press conferences, and fan-generated content. Adding a native video player to APG vNext lets members embed and watch video without leaving the forum, dramatically increasing session time and return visits.

Choosing a Player Library

For ASP.NET community software, three player libraries stand out:

• HLS.js — handles HLS streams in any browser, essential for live sports content. Lightweight (~30KB gzipped), MIT licensed.
• Video.js — full-featured with plugin ecosystem. Good for VOD and mixed content types.
• Plyr — clean, accessible UI. Works with HTML5 video, YouTube, and Vimeo embeds.

For live sports content (streams in M3U8 format), HLS.js is the mandatory choice. For match highlights (MP4 or YouTube links), Plyr is simpler to integrate.

Building the APG vNext Video Module

APG vNext supports custom HTTP Modules and Master Page customisations. Create a VideoPlayerModule.cs that:

1. Detects post content containing a [video]...[/video] BBCode tag
2. Replaces the tag with a <div class="apg-video-wrap"> containing a <video> element
3. Injects HLS.js initialisation code only when a video element is present on the page

// In your BBCode parser
if (src.EndsWith(".m3u8")) {
    output = $"<div class='apg-video-wrap'>"
           + $"<video id='vid-{id}' controls playsinline></video>"
           + $"<script>initHLS('vid-{id}','{src}')</script>"
           + "</div>";
}

Moderation Workflow

User-submitted stream links need moderation before going live. Implement a two-stage approval queue:

1. Post with [video] tag is held for moderator review
2. Moderator tests the stream URL using a built-in preview panel
3. Approved posts appear with the player rendered; rejected posts show a message to the member

This prevents abuse while allowing legitimate stream sharing — the same workflow used by community sites serving live sports content to Arabic and multilingual audiences.

Performance Considerations

• Lazy-initialise HLS.js: only start the stream when the user clicks play, not on page load
• Set a poster image (thumbnail) on the <video> element so the page renders well before the stream loads
• Use a CDN for the HLS.js script itself to reduce latency for international visitors

Related Guides

• Embedding HLS Streams in ASP.NET Forums
• Building a Full Live Stream Hub
• Yalla Shoot streaming app architecture overview