embedding video is HTML report

[RegularnaMatrica]

Description

I'm dynamically adding videos (subclips) to HTML report:

---
title: "Videos"
format:
  html:
    page-layout: full
jupyter: python3
---

```{python}
#| label: videos
#| output: asis
#| echo: false

from moviepy.video.io.VideoFileClip import VideoFileClip
import tempfile

# VIDEO_PATH & SEGMENT_LIST are inputs

# load video  
video = VideoFileClip(VIDEO_PATH)

print("\n\n::: {.panel-tabset .nav-pills}\n\n")

for i, (t_start, t_end) in enumerate(SEGMENT_LIST):

  # extract subclip
  video_subclip = video.subclip(
    t_start = t_start, 
    t_end = t_end
  )

  with tempfile.NamedTemporaryFile(suffix = ".mp4", delete = False) as temp_file:

    # save subclip
    video_subclip.write_videofile(
        filename = temp_file.name,
        codec = "libx264",
        logger = None
    )

    print(f"\n\n## Video: {i}\n\n")
    print(f"\n\n{{{{< video {temp_file.name} >}}}}\n\n")

  video_subclip.reader.close()
  if video_subclip.audio:
    video_subclip.audio.reader.close_proc()

print(":::")

video.reader.close()
if video.audio:
    video.audio.reader.close_proc()

When I open html it displays videos nicely, but once I send it to colleague (html alongside created files folder) he can't see/play videos. This makes sense because videos are saved locally on my PC, but why aren't they exported in files folder? Is it possible to somehow export them automatically to file folder created by quarto?

P.S. In case of 'many' videoclips I would like to have dropdown menu. I searched for this option, but I found that this is no yet possible with quarto. Is this still right?

[mcanouil]

Could you properly format your post using code blocks for code and terminal outputs? Thanks.
If your code contains code blocks, you need to enclose it using more backticks, i.e., usually four ````.
See https://quarto.org/bug-reports.html#formatting-make-githubs-markdown-work-for-us.

Additionally, your code is not reproducible.

This being said, you could try adding _quarto.yml:

project:
  resources: 
    - "path/to/videos/*.mp4"

[RegularnaMatrica]

test_video.mp4

Here is example using provided test video (required to change VIDEO_PATH variable):

---
title: "Speed Missmatch"
format:
  html:
    page-layout: full
    code-fold: true
jupyter: python3
---

```{python}
#| echo: false

from moviepy.video.io.VideoFileClip import VideoFileClip
import tempfile

#path to the provided video
VIDEO_PATH = ".../test_video.mp4"

# this is calculated from data (its not deterministic)
# thus videos clips are not available for adding to yaml
TIME_SEGMENTS = [(1.0, 3.0), (5.0, 7.0)]
```


```{python}
#| output: asis
#| echo: false

video = VideoFileClip(VIDEO_PATH).without_audio()

print("\n\n::: {.panel-tabset .nav-pills}\n\n")

for i, (t_start, t_end) in enumerate(TIME_SEGMENTS, start = 1):

    video_subclip = video.subclip(
        t_start = max(0, t_start), 
        t_end = min(t_end, video.duration)
    )

    with tempfile.NamedTemporaryFile(suffix = ".mp4", delete = False) as temp_file:

        video_subclip.write_videofile(
            filename = temp_file.name,
            codec = "libx264",
            logger = None
        )

        print(f"\n\n## Video: {i}\n\n")
        print(f"\n\n{{{{< video {temp_file.name} >}}}}\n\n")

    video_subclip.reader.close()
    if video_subclip.audio:
        video_subclip.audio.reader.close_proc()

print(":::")

video.reader.close()
if video.audio:
    video.audio.reader.close_proc()
```

[mcanouil]

Unfortunately it's not reproducible as .../test_video.mp4 is not a valid path.

Please share as a Git repository and ensure we can use it. Thank you!

[RegularnaMatrica]

@mcanouil thank you for your guidance and patience. I've created repo: https://github.com/RegularnaMatrica/quarto_video_test.git

Problem: locally everything works fine. When I send html alongside quarto created files folder to the colleague he can't run videos. Is it possible to somehow automatically export these videos so that they render on other machine.

[mcanouil]

Thanks, we'll take a look but I suspect some links are absolute which leads to this.

[cderv]

Something that I am not following: it seems you are trying to include video that are located in your environment temp folder. This means the video will be outside of the project. Absolute path is used which points outside of project, and you can't include resources that are external in Quarto project.

but why aren't they exported in files folder? Is it possible to somehow export them automatically to file folder created by quarto?

Quarto won't do the work of copying file from outside your project to inside your project. Could you put those video inside the Quarto project itself ?

[RegularnaMatrica]

Ok, so relative paths to qmd file needs to be used. This now works (when I send html, files folder and video folder containing all videos).

Final goal is to render qmd and for results to be located in their own folder. I've read discussion #2171 about using --output-dir and then moving folder to wanted location. The problem I have is that within qmd file I create folder for saving videos (videos). It seems that this folder gets moved into quarto created folder (report_test_files) but is not removed from source (quarto_reports).

After runing main.py this is folder tree:

• quarto_reports
  • report_folder (--output-dir report_folder)
    • videos
    • report_test_files
    • report_test.html
  • videos
  • report_test.qmd

quarto_reports/videos can be deleted, is there way to do it automatically from report_test.qmd? When I do it at the end of report_test.qmd then execution fails. Is it possible to save additional folders/files directly to report_test_files folder from script report_test.qmd?

[cderv]

You probably want to leverage Quarto projects and post render script to clean after render.
https://quarto.org/docs/projects/scripts.html#pre-and-post-render