Building Video Player with Livewire v4

<div x-data="{ playing: false }">
    <video 
        x-ref="video"
        @play="playing = true"
        @pause="playing = false"
        @ended="$wire.markAsWatched()">
        <source src="{{ $videoUrl }}" type="video/mp4">
    </video>
    
    <button @click="playing ? $refs.video.pause() : $refs.video.play()">
        <span x-text="playing ? 'Pause' : 'Play'"></span>
    </button>
</div>