Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
Hi everyone,
I'm working on a learning management system using the TALL Stack (Tailwind CSS, Alpine.js, Laravel, Livewire), and I'm currently facing an issue with loading videos in a Filament panel. The video for the currentChapter loads fine initially, but when I switch chapters, the new video doesn't load as expected.
Here's the relevant part of my code:
<x-filament-panels::page>
@if ($this->currentChapter)
<div x-data="{ videoSrc: '{{ $currentChapter->getFirstMediaUrl('course-unit-chapter-videos') }}', videoId: 'video-{{ $currentChapter->id }}' }" class="grid grid-cols-1 gap-4 md:grid-cols-3 md:gap-8">
<div class="grid grid-cols-1 gap-4 md:col-span-2">
{{-- Chapter Video --}}
<div class="relative max-w-5xl mx-auto">
<div class="rounded-lg shadow-lg overflow-hidden">
<video x-ref="videoPlayer" :id="videoId" x-bind:src="videoSrc" width="1920"
height="1080" loop controls>
</video>
</div>
</div>
<!-- Navigation buttons -->
<div class="flex justify-between mt-4">
<x-filament::button wire:click="previousChapter" :disabled="!$this->hasPreviousChapter">
Previous Chapter
</x-filament::button>
<x-filament::button wire:click="nextChapter" :disabled="!$this->hasNextChapter">
Next Chapter
</x-filament::button>
</div>
{{-- Chapter Content --}}
<x-filament::section collapsible collapsed>
<x-slot name="heading">
Chapter content
</x-slot>
<x-slot name="description">
{{ $currentChapter->name }}
</x-slot>
<article class="prose dark:prose-invert prose-img:rounded-xl prose-img:mx-auto max-w-full">
{!! (new Parsedown())->text($currentChapter->content) !!}
</article>
</x-filament::section>
</div>
{{-- Course chapters --}}
<x-filament::section>
<x-slot name="heading">
Course units
</x-slot>
<x-slot name="description">
{{ $record->name }}
</x-slot>
<ul class="flex flex-col space-y-2">
@foreach ($record->course_units as $unit)
<li>
<strong
class="block text-md font-medium uppercase text-gray-950 dark:text-white">{{ $loop->iteration }}.
{{ $unit->name }} </strong>
<ul class="px-4 py-2">
@foreach ($unit->topics as $topic)
<li x-data="{ open: false }">
<details class="group [&_summary::-webkit-details-marker]:hidden"
:open="open">
<summary @click.prevent="open = !open"
class="flex cursor-pointer items-center justify-between rounded-lg py-2 hover:text-gray-600 text-sm font-medium leading-6 text-gray-500 dark:text-gray-400">
<span class="text-sm font-medium"> {{ $topic->name }} </span>
<span class="shrink-0 transition duration-300"
:class="{ '-rotate-180': open }">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5"
viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd" />
</svg>
</span>
</summary>
<ul class="space-y-1 px-2">
@foreach ($topic->topic_chapters as $chapter)
<li>
<div @click="videoSrc = '{{ $chapter->getFirstMediaUrl('course-unit-chapter-videos') }}'; videoId = 'video-{{ $chapter->id }}'"
wire:click="changeChapter({{ $chapter->id }})"
class="block cursor-pointer rounded-lg px-4 py-2 text-xs font-medium hover:text-gray-700 transition duration-75 hover:bg-gray-100 focus-visible:bg-gray-100 dark:hover:bg-white/5 dark:focus-visible:bg-white/5 {{ $currentChapter->id === $chapter->id ? 'text-primary-600 dark:text-primary-400 bg-gray-100 dark:bg-white/5' : 'text-gray-950 dark:text-white' }}">
{{ $loop->iteration }}. {{ $chapter->name }}
</div>
</li>
@endforeach
</ul>
</details>
</li>
@endforeach
</ul>
</li>
@endforeach
</ul>
</x-filament::section>
</div>
@else
<p>No chapters available for this course.</p>
@endif
</x-filament-panels::page>
When I switch chapters using the wire:click="changeChapter({{ $chapter->id }})", the new video URL is set correctly in the videoSrc variable, but the video player doesn't load the new video. I'm not sure what I'm missing or if there's a better way to handle this.
Any help or suggestions would be greatly appreciated!
Thanks!
Sorry to hear that you're experiencing this issue. It seems like the video player isn't updating when you switch chapters. Have you tried forcing the video player to reload after switching chapters? You can try adding a $refs.videoPlayer.load() after setting the new video source. This should force the video to reload.
<div x-data="{
videoSrc: '{{ $currentChapter->getFirstMediaUrl('course-unit-chapter-videos') }}',
videoId: 'video-{{ $currentChapter->id }}'
}"
class="grid grid-cols-1 gap-4 md:grid-cols-3 md:gap-8"
x-init="$watch('videoSrc', (value) => {
$refs.videoPlayer.src = value;
$refs.videoPlayer.load();
$refs.videoPlayer.play();
})"
>
<div class="grid grid-cols-1 gap-4 md:col-span-2">
{{-- Chapter Video --}}
<div class="relative max-w-5xl mx-auto">
<div class="rounded-lg shadow-lg overflow-hidden">
<video x-ref="videoPlayer" :id="videoId" x-bind:src="videoSrc" width="1920"
height="1080" loop controls>
</video>
</div>
</div>
// rest of the code
</div>
</div>
I have tried that with the code above but it is a bit slow to switch and when it does sometimes it loads the previous chapter's video instead of the current chapter's video
Please or to participate in this conversation.