How to Show a Video in a Specific Time Range in NiceGUI?

[zihad-13]

Question

I’m working on a project where I need to display a video but only for a specific time range. For example, if I upload a 5-minute video, I want to show only the portion from the 2-minute mark to the 3-minute mark. So, the video should start playing at the 2-minute mark and stop automatically at the 3-minute mark.

Could someone guide me on how to achieve this in NiceGUI? Specifically:

How can I set the video's starting point to a specific timestamp?
(https://nicegui.io/documentation/video#control_the_video_element)
I found a way to start the video.
How can I stop the video at a specific timestamp?

Any code examples or pointers would be greatly appreciated!

Thank you in advance for your help!

[falkoschindler]

Hi @zihad-13,

Will the user be able to interact with the video? If not, you can use seek(), play() and pause():

url = 'https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4'
v = ui.video(url, controls=False)

async def play_snippet():
    v.seek(3)
    v.play()
    await asyncio.sleep(4)
    v.pause()

ui.button('Play', on_click=play_snippet)

[falkoschindler]

Here is an example how to pause the video automatically when a certain timestamp is reached:

@ui.page('/')
def page():
    async def check_time():
        current_time = await ui.run_javascript(f'getHtmlElement("{v.id}").currentTime')
        if current_time >= 5:
            v.pause()
    url = 'https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4'
    v = ui.video(url).on('timeupdate', check_time)

Or using a custom event to avoid the need for an extra JavaScript call:

def check_time(e: events.GenericEventArguments):
    if e.args >= 5:
        v.pause()

url = 'https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4'
v = ui.video(url).on('timeupdate', js_handler='(e) => emitEvent("timeupdate", e.target.currentTime)')
ui.on('timeupdate', check_time)

[zihad-13]

I am sorry for the late response. Thank you for your solution, it worked for me.