Add playback_position to gr.Audio and gr.Video, which can be updated and read

[aliabid94]

this playback_position argument value can be set, e.g.

        def set_video_playback_pos():
            return gr.Video(playback_position=8.0)
        
        set_video_time_btn.click(set_video_playback_pos, outputs=video)        

or read, e.g.

        def print_video_playback_pos(v: gr.Video):
            return f"Video playback position: {v.playback_position:.2f} seconds"

        video_btn.click(print_video_playback_pos, inputs=video, outputs=video_textbox)

See demo/playback_position for examples

[gradio-pr-bot]

🪼 branch checks and previews

•	Name	Status	URL
	Spaces	ready!	Spaces preview
	Website	ready!	Website preview
🦄	Changes	detected!	Details

---

Install Gradio from this PR

pip install https://gradio-pypi-previews.s3.amazonaws.com/919949ba1569dada0288161f6da4310ab205dc9e/gradio-6.0.2-py3-none-any.whl

Install Gradio Python Client from this PR

pip install "gradio-client @ git+https://github.com/gradio-app/gradio@919949ba1569dada0288161f6da4310ab205dc9e#subdirectory=client/python"

Install Gradio JS Client from this PR

npm install https://gradio-npm-previews.s3.amazonaws.com/919949ba1569dada0288161f6da4310ab205dc9e/gradio-client-2.0.0.tgz

[gradio-pr-bot]

🦄 change detected

This Pull Request includes changes to the following packages.

Package	Version
@gradio/audio	minor
@gradio/video	minor
gradio	minor

---

• Add playback_position to gr.Audio and gr.Video, which can be updated and read

---

✅ Changeset approved by @freddyaboulton

• Maintainers can remove approval by unchecking this checkbox.

Something isn't right?

• Maintainers can change the version label to modify the version bump.
• If the bot has failed to detect any changes, or if this pull request needs to update multiple packages to different versions or requires a more comprehensive changelog entry, maintainers can update the changelog file directly.

[freddyaboulton]

Love it. It works great. My one comment would be to do this via a playback_state prop that is a dict/dataclass (similar to WaveformOptions). That way if we want to add props for play/pause/playback speed in the future we can do so without having to add separate params.

[dawoodkhan82]

console log

[dawoodkhan82]

nice, works great

[aliabid94]

My one comment would be to do this via a playback_state prop that is a dict/dataclass (similar to WaveformOptions). That way if we want to add props for play/pause/playback speed in the future we can do so without having to add separate params

I disagree with this, I think its best that we keep those as separate arguments, because a) its cleaner and b) you won't be able to update just one of those properties if you want to update with an event listener.

[abidlabs]

Such a great feature! It'd be cool to build a practical demo around this & do some nice visibility internally and externally. For example, an app that transcribes an audio file with timestamp and as the audio is playing, it higlights the current word/sentence.

[freddyaboulton]

Great! Let's merge and do the release