# webm

**URL:** <https://support.prodi.gy/t/webm/3319>\
**Category:** Uncategorized\
**Tags:** usage, front-end, video\
**Created:** [August 23, 2020, 11:49pm UTC](https://support.prodi.gy/t/webm/3319 "2020-08-23T23:49:41Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![nchukaobah](https://avatars.discourse-cdn.com/v4/letter/n/3bc359/32.png) [@nchukaobah](https://support.prodi.gy/u/nchukaobah)\
**Post date:** [August 23, 2020, 11:49pm UTC](https://support.prodi.gy/t/webm/3319/1 "2020-08-23T23:49:41Z")

</div>

Is there a way to play webm files using the html tags? Is there a sample I can work from?

---

<div class="post-metadata">

**Author:** ![ines](https://sea2.discourse-cdn.com/flex020/user_avatar/support.prodi.gy/ines/32/3_2.png) [@ines](https://support.prodi.gy/u/ines)\
**Post date:** [August 24, 2020, 8:58am UTC](https://support.prodi.gy/t/webm/3319/2 "2020-08-24T08:58:19Z")

</div>

Hi! I haven't tried this yet, but since `webm` is natively supported by most modern browsers (I think?), you might just have to tell the [`Video` loader](https://prodi.gy/docs/api-loaders#media-loaders) to also consider the file extension `.webm`:

```python
stream = Video("/directory", file_ext=(".mpeg", ".mpg", ".mp4", ".webm"))

```

This will create one task per video file in the directory and include the base64-encoded data as the key `"video"`, and you'll be able to render that using the [`audio` and `audio_manual`](https://prodi.gy/docs/api-interfaces#audio) interfaces.

Alternatively, if you want to use a fully custom HTML interface and just show a video player, you could also use a [`html_template`](https://prodi.gy/docs/custom-interfaces#html) with a `<video>` element. The `{{video}}` variable in this example will include the content of the `"video"` key in your annotation task:

```html
<video src="{{video}}" controls></video>

```

---

<div class="post-metadata">

**Author:** ![nchukaobah](https://avatars.discourse-cdn.com/v4/letter/n/3bc359/32.png) [@nchukaobah](https://support.prodi.gy/u/nchukaobah)\
**Post date:** [August 24, 2020, 11:09am UTC](https://support.prodi.gy/t/webm/3319/3 "2020-08-24T11:09:12Z")

</div>

Thanks Ines. Where am I specifying the stream variable with the audio\_manual recipe? I'm still new to prodigy so I'm still figuring things out.

---

<div class="post-metadata">

**Author:** ![ines](https://sea2.discourse-cdn.com/flex020/user_avatar/support.prodi.gy/ines/32/3_2.png) [@ines](https://support.prodi.gy/u/ines)\
**Post date:** [August 25, 2020, 8:30am UTC](https://support.prodi.gy/t/webm/3319/4 "2020-08-25T08:30:44Z")

</div>

You can do this by writing a [custom recipe](https://prodi.gy/docs/custom-recipes) based on the `audio.manual` recipe, either by writing a new one or by wrapping the existing one and passing in a different stream. If you just want to hack at things and see how the built-in recipes are implemented, you can also run `prodigy stats` to find the location of your Prodigy installation and then open the file `recipes/audio.py`.

Ultimately, Prodigy recipes are just Python functions that return a dictionary of components. This means you can also call them as a function in your custom recipe. If you just want to overwrite the stream, you can pass an already loaded stream into the function, like this:

```python
from prodigy.recipes.audio import manual as audio_manual
from prodigy.components.loaders import Video
from prodigy.util import get_labels
import prodigy

@prodigy.recipe(
    "custom.audio.manual",
    dataset=("Dataset to save annotations to", "positional", None, str),
    source=("Data to annotate (file path or '-' to read from standard input)", "positional", None, str),
    label=("Comma-separated label(s) to annotate or text file with one label per line", "option", "l", get_labels),

)
def custom_audio_manual(dataset, source, label):
    stream = Video(source, file_ext=(".mpeg", ".mpg", ".mp4", ".webm"))
    components = audio_manual(dataset, stream, label)
    return components

```