-1

I have a simple method below that tries to play a conventional Video component. When trying to load a video using an ExternalResource (the videos come from either Youtube or an external link of another website) in a Window component, the window result behaves differently. For example, in Edge browsers, the video will simply will not load but with the play / pause controls are visible. In Firefox, the loading cursor keeps running forever. (note that HtmlContentAllowed flag is turned on)

protected void loadVideoWindow(String url){
  Window subWindow = new Window();
  subWindow.setSizeFull();
  subWindow.setModal(true);
  subWindow.setResizable(false);

  Video video = new Video("Video",new ExternalResource("https://youtu.be/xxxx")); //url string will be used here 
  video.setWidth("600px");
  video.setHeight("600px");
  video.setHtmlContentAllowed(true);

  subWindow.setContent(video);
  UI.getCurrent().addWindow(subWindow);
}

If there's indeed a known problem without a workaround of running external videos using that method above, is it better to move to loading another tab / url link and play the video instead?

I also noticed that there are two known addons: SWF and the AudioVideo addon. The former seems to be very old, while for the latter, can the ExternalResource be used or it needs to be converted to a ClassResource first (as seen in the example)?

Melvin Mah
  • 105
  • 2
  • 13

1 Answers1

1

The Video component is based on the <video> HTML element which is implemented natively by browsers. It supports various regular video files such as .avi and .mp4, but it doesn't support videos straight from streaming services such as YouTube.

If you want to embed a YouTube video, then you need to embed that using YouTube's own player. The easiest way is probably to use their <iframe> embedding option together with the corresponding Vaadin component. There are some add-ons in Vaadin Directory that claim to to this, but I don't have personal experience with any of them.

Leif Åstrand
  • 7,820
  • 13
  • 19