How To Add Videos in Vaadin

General
1

We make a video library in vaadin framework …so want to add videos in vaadin…

2

Hi,

Have you tried the Video class? It shows videos using the HTML5

HTH,
/Jonatan

3

package com.example.feedba;

import com.vaadin.terminal.ExternalResource;
import com.vaadin.ui.Button;
import com.vaadin.ui.Video;
import com.vaadin.ui.Window;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.Button.ClickListener;

@SuppressWarnings(“serial”)
public class Feedback extends Window {

/**
 * @param string 
 *
 */
public Feedback(String string) {
    super();
    this.setCaption( "Video Lib" );

    final Video v = new Video( "video" );
    v.setSources( new ExternalResource( "file:///D:/Kshitij/Movie/01Akasy hits-Aayega maja ab barsatka.mp4" ),
            new ExternalResource( "file:///D:/Kshitij/Movie/01Akasy hits-Aayega maja ab barsatka.ogv" ) );
    
    v.setWidth( "640px" );
    v.setHeight( "360px" );
    addComponent( v );
    addComponent( new Button( "Play video", new ClickListener() {

        public void buttonClick( ClickEvent event ) {
            v.play();
        }

    } ) );
    addComponent( new Button( "Pause video", new ClickListener() {

        public void buttonClick( ClickEvent event ) {
            v.pause();
        }

    } ) );

  
}



public Feedback() {
	// TODO Auto-generated constructor stub
}

}
4

[b]

this is Video Window

I Write This Code, But error is “no video with Supported Format and MIME Type Found”

HOw I can Solve this error…?
I Use Firfox 14.0.1.

[/b]

package com.example.feedba;

import com.vaadin.terminal.ExternalResource;
import com.vaadin.ui.Button;
import com.vaadin.ui.Video;
import com.vaadin.ui.Window;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.Button.ClickListener;

@SuppressWarnings(“serial”)
public class Feedback extends Window {

/**
 * @param string 
 *
 */
public Feedback(String string) {
    super();
    this.setCaption( "Video Lib" );

    final Video v = new Video( "video" );
    v.setSources( new ExternalResource( "file:///D:/Kshitij/Movie/01Akasy hits-Aayega maja ab barsatka.mp4" ),
            new ExternalResource( "file:///D:/Kshitij/Movie/01Akasy hits-Aayega maja ab barsatka.ogv" ) );
    
    v.setWidth( "640px" );
    v.setHeight( "360px" );
    addComponent( v );
    addComponent( new Button( "Play video", new ClickListener() {

        public void buttonClick( ClickEvent event ) {
            v.play();
        }

    } ) );
    addComponent( new Button( "Pause video", new ClickListener() {

        public void buttonClick( ClickEvent event ) {
            v.pause();
        }

    } ) );

  
}



public Feedback() {
	// TODO Auto-generated constructor stub
}

}
5

Hi,

Firefox only supports the webm format, so you either have to:

/Jonatan

6

youtub video play …but local file systems video are not play how to do? please give me some example

7

Why vaadin flow 14 does not have video class?

Html 5 has support for <video> and it is strange why vaadin 14 does not have it as class.

8

This one has got a video component:

https://vaadin.com/directory/component/so-components

But it’s also very easy to create a new component by yourself:

@Tag("video")
public class Video extends HtmlContainer implements ClickNotifier<Video> {
...
9

INPUTsys Chris Peter:
This one has got a video component:

https://vaadin.com/directory/component/so-components

But it’s also very easy to create a new component by yourself:

@Tag("video")
public class Video extends HtmlContainer implements ClickNotifier<Video> {
...

look like good one but I get this error while compiling.

`bad class file: C:\Users\.m2\repository\com\storedobject\vaadin\so-components\6.0.3\so-components-6.0.3.jar(com/storedobject/vaadin/Video.class)
class file has wrong version 55.0, should be 52.0
Please remove or make sure it appears in the correct subdirectory of the classpath.`
10

Looks like the Addon needs Java 11 and you’re using Java 8.
Maybe you can use 11 instead?

11

Hey. Sadly there isn’t a built in class for Video, but as Chris said, you can create it yourself. I created a Gist on how you can add your own Video.java class to your project and then how to use it. You can find it here: https://gist.github.com/Peppe/14aef652f37b5c84bc75b3d71c79d9d1

Copy the Video.java file to your project, use it as shown in ExampleView.java. You might need more properties than src and controls, but you can be add them in a similar fashion as those.

12

Jens Jansson:
Hey. Sadly there isn’t a built in class for Video, but as Chris said, you can create it yourself. I created a Gist on how you can add your own Video.java class to your project and then how to use it. You can find it here: https://gist.github.com/Peppe/14aef652f37b5c84bc75b3d71c79d9d1

Copy the Video.java file to your project, use it as shown in ExampleView.java. You might need more properties than src and controls, but you can be add them in a similar fashion as those.

Thanks a lot.

should it be cool if you can expand it to a fully functional video player for example adding all the properties and also final touch with CSS and nice looking face.

13

yeah I miss Video component too like in V8

14

Jens Jansson:
Hey. Sadly there isn’t a built in class for Video, but as Chris said, you can create it yourself. I created a Gist on how you can add your own Video.java class to your project and then how to use it. You can find it here: https://gist.github.com/Peppe/14aef652f37b5c84bc75b3d71c79d9d1

Copy the Video.java file to your project, use it as shown in ExampleView.java. You might need more properties than src and controls, but you can be add them in a similar fashion as those.

Hi Jens,
i tried to copy the Video.java class as you said. The video player opens and start to load, then it blocks the video. Any advice?