The HLS Video Player is an enhancement to the Sponzy platform that adds HTTP Live Streaming (HLS) capabilities. HLS is an adaptive streaming protocol developed by Apple that enables high-quality streaming experiences across various network conditions and devices.
This documentation provides comprehensive information on installing, configuring, and using the HLS Video Player feature in your Sponzy installation.
Add the following libraries to your main layout file:
<!-- Video.js CSS -->
<link href="https://vjs.zencdn.net/7.20.3/video-js.css" rel="stylesheet" />
<!-- Video.js -->
<script src="https://vjs.zencdn.net/7.20.3/video.min.js"></script>
<!-- HLS.js -->
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>Create a directory for HLS files and ensure it's writable:
mkdir -p public/uploads/hls
chmod 775 public/uploads/hlsAdd HLS path to your config/path.php:
'hls' => 'uploads/hls/',Copy the HLS player JavaScript file to your public/js directory:
cp hls-player.js public/js/Add a column for HLS path to your media table:
php artisan make:migration add_video_hls_to_media_table --table=media
// In the migration file:
public function up()
{
Schema::table('media', function (Blueprint $table) {
$table->string('video_hls')->nullable()->after('video');
});
}Modify your EncodeVideo.php job to include HLS encoding:
// Create HLS version of the video
try {
// Format for HLS
$lowBitrate = (new X264)->setKiloBitrate(500);
$midBitrate = (new X264)->setKiloBitrate(1000);
$highBitrate = (new X264)->setKiloBitrate(1500);
// HLS path
$hlsPath = $path . 'hls/';
$hlsFilename = pathinfo($videoPathDiskMp4, PATHINFO_FILENAME);
// Create HLS with multiple bitrates
FFMpeg::fromDisk($disk)
->open($path . $videoPathDiskMp4)
->exportForHLS()
->addFormat($lowBitrate)
->addFormat($midBitrate)
->addFormat($highBitrate)
->setSegmentLength(10) // Set segment length in seconds
->setKeyFrameInterval(48) // Set key frame interval
->save($hlsPath . $hlsFilename . '.m3u8');
// Update the media record to include HLS path
Media::whereId($this->video->id)->update([
'video_hls' => 'hls/' . $hlsFilename . '.m3u8',
]);
} catch (\Exception $e) {
// Log error but continue with regular MP4
\Log::error('HLS encoding failed: ' . $e->getMessage());
}You can configure different quality levels by adjusting the bitrates:
| Quality | Resolution | Bitrate | Use Case |
|---|---|---|---|
| Low | 480p | 500 Kbps | Mobile data, poor connections |
| Medium | 720p | 1000 Kbps | Average connections |
| High | 1080p | 1500 Kbps | Good connections |
As an administrator, you can enable HLS encoding for all videos by navigating to:
Admin Panel → Settings → Video Settings → Enable HLS Encoding
To convert existing videos to HLS format:
You can monitor the status of HLS conversions in:
Admin Panel → System → Queue Monitor
For users, the HLS implementation is completely transparent. Videos will automatically play at the best quality for their connection. Users may notice:
ffmpeg -encoders | grep libx264Note: If you're experiencing issues with HLS playback, you can always fall back to MP4 playback by setting $isHLS = false in your video player template.
HTTP Live Streaming (HLS) is an adaptive streaming protocol that breaks videos into small segments and serves them through standard HTTP. Benefits include:
Yes, HLS requires storing multiple quality versions of each video. Expect a 2-3x increase in storage usage compared to single-quality MP4 files.
HLS is natively supported in Safari, iOS, and newer versions of Chrome and Firefox. For other browsers, we use HLS.js as a fallback, which provides broad compatibility.
Yes, HLS works with Amazon S3, Wasabi, Backblaze, and other storage providers. You'll need to ensure proper CORS configuration for segment access.
Use these points in your marketing materials:
Support: For additional support or questions about the HLS implementation, please contact our support team at support@example.com.