Media

Image example:

from flexx import ui, event

class Example(ui.Widget):

    def init(self):
        with ui.HBox():
            self.stretch = ui.CheckBox(text='Stretch')
            with ui.SplitPanel(flex=1):
                self.im1 = ui.ImageWidget(source='http://github.com/fluidicon.png')
                self.im2 = ui.ImageWidget(source='http://github.com/fluidicon.png')

    class JS:

        @event.connect('stretch.checked')
        def make_stretched(self, *events):
            self.im1.stretch = self.im2.stretch = self.stretch.checked
open in new tab

Video example:

from flexx import ui

class Example(ui.Widget):

    def init(self):
        with ui.HBox():
            with ui.SplitPanel(flex=1):
                url = 'http://www.w3schools.com/tags/mov_bbb.mp4'
                self.vid1 = ui.VideoWidget(source=url)
                self.vid2 = ui.YoutubeWidget(source='dhRUe-gz690')
open in new tab

class flexx.ui.ImageWidget(*init_args, **kwargs)

Inherits from: Widget

Display an image using a url.

source

property – The source of the image, This can be anything that an HTML img element supports.

stretch

property – Whether the image should stretch to fill all available space, or maintain its aspect ratio (default).

class flexx.ui.VideoWidget(*init_args, **kwargs)

Inherits from: Widget

A widget to display a video from a url.

source

property – The source of the video. This must be a url of a resource on the web.

class flexx.ui.YoutubeWidget(*init_args, **kwargs)

Inherits from: Widget

A widget to display a Youtube video.

source

property – The source of the video represented as the Youtube id.