No sound from video file using default image component

Anvil Q&A
#1

When you have a video file stored as a media object and display it using the image component, no sound is played. I am thinking that I should find an embeddable video player and create a custom html form with the player. Is this a good way to approach this, or is there another way that would be more simple(not the youtube player). Has anyone done this before and would recommend a particular html video player?

If I end up building a custom video form, I’ll be happy to share.

Optimize content delivery
#2

Have a look at this :

https://anvil.works/build#clone:DNRRGK2AEDFA75S3=NCTX4GVF2K6K2PYDPM2CGQSZ

Needs some CSS work but it has video and sound. You could easily replace some of the JS controls with Anvil ones and use call_js to activate them (search the forums for call_js examples).

Got the player from here :

2 Likes
#3

Hi David,
This was a good starting point for me. In my application, the videos load fine when they are on a desktop web browser. When I am on mobile, the videos do not load.

To do a sanity check, I swapped the media source URL sent to the tag from the http endpoint (https://goodlooksdotco.anvil.app/_version/dev/ad778b6e0006a6f4/_/api/img/%5B19028%2C1674979%5D) with the video source from the example app you posted above (http://techslides.com/demos/sample-videos/small.mp4) That video file played on desktop and mobile, while my URL only played on desktop.

Before using the http endpoint approach, I was getting a temporary url using self.item['content_file'].url which was producing the same result of working on desktop but not on mobile. Has anyone solved this problem before?

#4

Hi @joinlook,

David’s example is based on HTML video tags, so there may be an issue with browser support. Some video formats are not supported by all browsers, so transcoding might solve your problem.

Mozilla have a table showing which formats are supported by which browsers:

image
image.png1422×624 90.4 KB

The most well-supported format seems to be H.264 video, AAC audio, in MPEG-4, as suggested by the table and by this StackOverflow answer.

ffmpeg

We’ve installed ffmpeg and python-ffmpeg in Server Modules.

It’s a library for doing all sorts of operations with video files, including transcoding into different formats.

Here are some links to docs for ffmpeg and python-ffmpeg

files in Server Modules

ffmpeg uses the filesystem, so we’ve implemented ways to create temporary files from Media objects and to create empty temporary files (read more in the reference docs).

Transcoding example

Here’s a function that transcodes an existing video in Data Tables to .mp4:

def transcode_to_mp4():
  """Transcode a video to mp4 with H.264 video and aac audio."""

  # Get the video out of the Data Table
  video = app_tables.videos.search()[0]
  media_obj = video['contents']
  
  with anvil.media.TempFile(media_obj) as input_file, anvil.media.TempFile() as output_file:
    # Transcode the video
    stream = ffmpeg.input(input_file)
    stream = ffmpeg.output(stream, output_file, f='mp4', acodec='aac', vcodec='libx264')
    ffmpeg.run(stream)

    # Create a Media object from the output file, and store it in Data Tables
    converted_video = anvil.media.from_file(
      output_file, mime_type='video/mp4', name='foo.mp4'
    )
    app_tables.videos.add_row(
      contents=converted_video, name='foo.mp4'
    )

I tried this on a .mov file and the size reduced from 4.8MB to 721kB, so you’ll get smaller videos too.

Let me know how you get on!

Optimize content delivery
#5

this is fantastic news. I was running ffmpeg over uplink to pythonanywhere. This will make my life so much easier.

1 Like
#6

Hi Shaun, is it possible to come up with a detailed tutorial example on how to upload and play video files using an Anvil app? (Not Youtube) . It would be something a LOT of hobbyist and serious programmers would find very useful, IMO. I for one really want this badly! Thanks, and much appreciated.

1 Like