Did any one try to embed a video in an HTML dialog with <video> tag?

Developers Ruby API
1

I am trying to embed an MP4 video using the HTML tag <video> in an HtmlDialog, but all I get is a white rectangle.

The code is

<video src='myvideo.mp4' width='560' height='315' autoplay preload='auto' muted poster></video>

I am testing with a local MP4 file, with or without the prefix file://. The MP4 file plays well in the Window Player (as well as on Youtbe where it is published).

I also tried the Javascript method video.play() ;, but it does not trigger the playing of the video either.

It might be that CEF does not support the embedded videos with <video>.

2
Not a CORS issue

There are current CORS issues with Chromium 112 that distro’d with SketchUp 24.

If you open the Chrome DevTools and check the console you’ll likely see an error like:

"... cannot load file:///…/myvideo.mp4. URL scheme “file” is not supported."

Related topics:

CORS request no longer working in plugin with SU2024. Websecurity change? - Developers / Ruby API - SketchUp Community

Fetching JSON data in HTML - Developers / Ruby API - SketchUp Community

3

Does it work in a 2023 Chromium 88 dialog ?

EDIT: tested and no

4

Also, your snippet has no path for the mp4 resource file.

I think you need to set the <base> element, especially if your HTML is being defined in Ruby, because the CEF will infer the base path to be the TEMP path where SketchUp writes out the temporary .html file.

EDIT: not the issue

5

In the src atribute, I indeed put a complete valid path (the snippet was just to illustrate).

It does not work better in SU2023 (and SU2022), neither on Windows nor Mac

6

Okay, I tested all my suggestions re, path, <base>, set_html() vs set_file() with the MP4 in the same folder etc.

I got the same result … a blank element (with a border I put around it via CSS.)

A little checking online reveals that yes CEF supports <video> elements but only open formats by default.

To support proprietary formats like MP3, MP4 etc., the CEF must be compiled to do so, because licensing is required. See:

I don’t know if SketchUp has these licenses, but we would think so as it exports MP4 animation files.

So, it looks as though this would be a CEF feature request.

Try converting the video to webm format with something. (I see that SketchUp does not support webm export either.) :sadface:

REF:

The WebM Project | Welcome to the WebM Project

7

Okay, I verified that webm files work in 2023 and 2024:

VideoTest.zip (371.9 KB)

Copy the "VideoTest" folder into one of the load paths in $LOAD_PATH (I find the %ProgramData% path easier for testing as there is less stuff in there and it’s loads first before %AppData% plugins path.)

require 'VideoTest/video.rb'
#=> true
VideoTest.go
# The dialog should show and the video of
# the girl watching the ocean should loop.
8

Thanks Dan,

Actually, it’s even better to use it in an <iframe>, because then, we give the controls for Play and Pause

Below with the <video> tag

image
image807Ă—484 58.9 KB

…and here with the <iframe> tag

image
image796Ă—495 57 KB

1 Like
9

Interesting. I was wondering about that.

  • Watchers can pause anywhere they like.

  • The expand (fullscreen) is nifty as it fills the dialog window.

  • The picture in picture is interesting as it pops out of the dialog to the display’s lower right corner and the dialog window can be minimized. A person might follow along with a tutorial this way.

  • The loop attribute does not work with <iframe>, but this is minor.