Video views in Viktor

Feature Requests
,
1

Hello,

I’d like to ask if it’s possible to insert a video and play it in Viktor? In case it’s not possible, what could be the alternatives?
Thank you in advance.

Huy

2

Hi Huy,

You could use a webview with a video element as follows:

import viktor as vkt


class Parametrization(vkt.Parametrization):
    # Video URL input
    video_url = vkt.TextField(
        "Video URL", 
        default="https://www.w3schools.com/html/mov_bbb.mp4",
        description="Enter the URL of your video file (MP4, WebM, OGV formats supported)"
    )


class Controller(vkt.Controller):
    parametrization = Parametrization

    @vkt.WebView("Video Player", duration_guess=1)
    def show_video(self, params, **kwargs):
        """
        Display a simple video player using HTML5 video element.
        """
        
        # Check if video URL is provided
        if not params.video_url:
            return vkt.WebResult(html="<p>Please enter a video URL.</p>")
        
        # Create minimal HTML content with video player
        html_content = f"""
        <video width="100%" height="400" controls>
            <source src="{params.video_url}" type="video/mp4">
            <source src="{params.video_url}" type="video/webm">
            <source src="{params.video_url}" type="video/ogg">
            Your browser does not support the video tag.
        </video>
        """
        
        return vkt.WebResult(html=html_content)
3

Hello,

Thank you for your reply. If I do not want to put the video publicly on the web but store it either locally within my app or using a third-party bucket service, how to do? Actually I store the video in a folder within the app. When I provide the file path as url, only the video player is displayed but the video itself is not shown. When I try to read the video with Python, encode it and input as url, I got a message saying too much memory is using (the video size is about 100 MB).

Thanks again,
Huy

4

Hi Huy,

I’ve checked this out; and was only able to make it work as a URL (not locally from the app). Also, indeed, some URL don’t work due to permissions.

For me, what worked best was to:

  • Add the file to the VIKTOR storage
  • Load the file and get the URL (Storage is some online database, so File.source returns the URL)
  • Use the video HTML to load it from URL.

See the following snippet, that’s not encoding the video:

@vkt.WebView("Video Player", duration_guess=1
def show_video(self, **kwargs):
    """
    Display a loaded video that is saved on VIKTOR Storage.
    """
        
    # If video is not on Storage yet, upload it
    if "video" not in vkt.Storage().list(scope="entity"):
        video_file = vkt.File.from_path(Path(__file__).parent / "vid.mp4")
        vkt.Storage().set("video", video_file, scope="entity")
    
    # Retrieve the video file from storage
    file_on_storage = vkt.Storage().get("video", scope="entity")
    
    # Generate HTML content to embed the video player
    html_content = f"""
<video width="100%" height="400" controls>
    <source src="{str(file_on_storage.source)}" type="video/mp4">
    <source src="{str(file_on_storage.source)}" type="video/webm">
    <source src="{str(file_on_storage.source)}" type="video/ogg">
    Your browser does not support the video tag.
</video>
    """
    return vkt.WebResult(html=html_content)
5

Hello Rvandijk,

Great, I’ll try it.

Thanks,
Huy