How to add auto play and loop to video player

Anvil Q&A
1

I am trying to add a video player to a form in my app using the example by:
https://anvil.works/forum/t/how-would-i-go-about-showing-a-video-with-anvil

This works fine. However, I would like to start the video playing automatically when the form opens. How can this be done?
Next to that I would like:
a) the video to loop
b) to remove the player controls at the bottom.

Thanks for your help.

1 Like
2

It seems this is quite dependent on the browser and the “user interaction score”. See this thread

I am not sure how this has changed since when the thread was written, but in my app I’m able to get the autoplay working on desktop Chrome at the form_show event but not on iOS Chrome.

3

This actually depend on the page click. Autoplay only starts when you click something on a page usually

4

Thanks @zielinski.mark and @divyeshlakhotia for your replies and suggestions. With quite some help from my friend ChatGPT, I came up with the following.
I have created a custom html component class Video.

class video(videoTemplate):
  def __init__(self, **properties):
    # Set Form properties and Data Bindings.
    
    # Create the video DOM element
    self.video_dom = document.createElement('video')
    self.video_dom.controls = False

    self.init_components(**properties)
    
    anvil.js.get_dom_node(self).appendChild(self.video_dom)
    
    # Initialize other properties
    self._source = ""
    self._height = "0px"
    self._width = "0px"
    
  @property
  def source(self):
    '''The source of Video Component'''
    return self._source
  
  @source.setter
  def source(self, source):
    self._source = source
    self.video_dom.src = source
  
  @property
  def height(self):
    '''Height of Video Component in px'''
    return self._height
  
  @height.setter
  def height(self, height):
    self._height = height
    self.video_dom.style.height = f'{height}px'
    
  @property
  def width(self):
    '''Width of Video Component in px'''
    return self._width
  
  @width.setter
  def width(self, width):
    self._width = width
    self.video_dom.style.width = f'{width}px'

  @property
  def loop(self):
    '''Loop status of Video Component'''
    return self._loop

  @loop.setter
  def loop(self, loop):
    self._loop = loop
    self.video_dom.loop = loop

  
  def play(self):
    '''Method to play the video'''
    self.video_dom.play()

Then I created a startup form which preloads the video’s (4 in total) from a datatable.

from ._anvil_designer import StartupTemplate
from anvil import *
import anvil.server
import anvil.users
import anvil.tables as tables
import anvil.tables.query as q
from anvil.tables import app_tables
from .. import Common
import anvil.js.window as window
import anvil.js

class Startup(StartupTemplate):
  def __init__(self, **properties):
    # Set Form properties and Data Bindings.
    self.init_components(**properties)

    # Any code you write here will run before the form opens.
    self.video1_element, self.video2_element, self.video3_element, self.video4_element = self.preload_videos()
    
  def preload_videos(self):    
    # Creëer een tijdelijk video elementen voor preloading
    video1_url = app_tables.video1.get()['Video1'].url
    temp_video1 = anvil.js.window.document.createElement("video")
    temp_video1.src = video1_url
    temp_video1.preload = "auto"

    video2_url = app_tables.video2.get()['Video2'].url
    temp_video2 = anvil.js.window.document.createElement("video")
    temp_video2.src = video2_url
    temp_video2.preload = "auto"

    video3_url = app_tables.video3.get()['Video3'].url
    temp_video3 = anvil.js.window.document.createElement("video")
    temp_video3.src = video3_url
    temp_video3.preload = "auto"

    video4_url = app_tables.video4.get()['Video4'].url
    temp_video4 = anvil.js.window.document.createElement("video")
    temp_video4.src = video4_url
    temp_video4.preload = "auto"

    # Return the video element to use it in the Welcome form
    self.outlined_button_1.visible = True
    return temp_video1, temp_video2, temp_video3, temp_video4

Then I have added a custom html component to the form which plays the video’s. And added this code:

from ._anvil_designer import WelcomeTemplate
from anvil import *
import anvil.server
import anvil.tables as tables
import anvil.tables.query as q
from anvil.tables import app_tables
import anvil.js.window as window
import anvil.js

from .. import Common

class Welcome(WelcomeTemplate):
  active_video = 1
  prlvideo1 = None
  prlvideo2 = None
  prlvideo3 = None
  prlvideo4 = None
  
  def __init__(self, preloaded_video1=None, preloaded_video2=None, preloaded_video3=None, preloaded_video4=None, **properties):
    # Set Form properties and Data Bindings.
    self.init_components(**properties)

    self.loading_label.visible = True
    self.video_1.visible = False
    
    video_url = app_tables.video1.get()['Video1'].url

    if preloaded_video1:
      self.prlvideo1 = preloaded_video1
      self.on_video_ready(preloaded_video1.src)
    else:
      self.preload_video(video_url)

    if preloaded_video2:
      self.prlvideo2 = preloaded_video2

    if preloaded_video3:
      self.prlvideo3 = preloaded_video3
      
    if preloaded_video4:
      self.prlvideo4 = preloaded_video4  
  
  def preload_video(self, video_url):
    # Create a temporary video element for preloading
    temp_video = anvil.js.window.document.createElement("video")
    temp_video.src = video_url
    temp_video.preload = "auto"

    # Add the onload event when the video is ready
    temp_video.oncanplaythrough = lambda event: self.on_video_ready(temp_video.src)
  
  def on_video_ready(self, video_url):
    self.video_1.source = video_url
    self.video_1.height = 1500
    self.video_1.loop = True
    self.video_1.play()
    self.video_1.visible = True
2 Likes