VideoPlayer

Introducing VideoPlayer

In the web environment configured with different types of content, media players have become a prerequisite. The service that provides video and audio files used by individuals carrying around on a portable device through the web is attracting attention without limitation of storage space. In line with this trend, Nexacro provides the VideoPlayer component that can play and control media.

VideoPlayer is the component used to play video, audio files, and streaming. It provides the default UI control with functions such as play/stop button, progress bar, full screen, and volume control necessary for media play by simply setting properties. Therefore, the developer can quickly develop applications using media without the need to implement separate control functions. If you want to implement the control function directly without using the default control function, then it is also possible to implement it as the script using various properties and methods required for control.

VideoPlayer supports various video and audio formats such as webm, ogg, mp4(h.264) mp3, wav, and flac. Please refer to the help for more information.

Example

The following is an example of a media player for a site that provides media services. The user can not only play the media he/she wants but also use the controls to adjust the resolution and frame to enjoy the media.

Creating VideoPlayer

sample_videoplayer_01.xfdl

1

Creating VideoPlayer Component

Select VideoPlayer from the toolbar, and drag it to an appropriate size on Form to create it.

If the VideoPlayer icon is not visible in the toolbar or the component cannot be used, then refer to Using Disabled Component to enable the VideoPlayer component.

2

Setting VideoPlayer Properties

To use VideoPlayer, you first need to set the location of the media in the url property. The values in the table below are the values used in the sample, so when developing, set the URL where the file is actually located.

To play or control VideoPlayer, you need to have the UI control, which is available only by setting the showcontrolbar property to true. The controls basically include play, stop button, progress bar, volume control, full screen, and file download functions.

Property

Value

url

https://github.com/mediaelement/mediaelement-files/blob/master/big_buck_bunny.mp4?raw=true

showcontrolbar

true

3

Checking with QuickView

Run QuickView (Ctrl + F6) to check the result.

Press the play button on the control to play the video. Check that the video plays normally and try each function.

Creating Control Function

The many functions provided by the VideoPlayer component allow you to implement controls directly. In this chapter, we will create the control function using the properties, methods, and events required to control the VideoPlayer.

Example

The following is an example player that plays content using the different properties, methods, and events of the VideoPlayer component.

sample_videoplayer_02.xfdl

Core features used in the example

play

This is the method that plays the video file. When playing the video, the oncurrenttimechanged event occurs.

pause

This is the method that pauses the video being played.

stop

This is the method that stops playing the video and returns the play position to the beginning.

currenttime

This is the property that sets the play position (time) of the video. The unit is ms (milliseconds).

duration

This is the read-only property with the total playing time of the video file.

mute

This is the property that sets the mute when playing video. When set to true, it will be muted.

oncurrenttimechanged

This is the event that occurs when the play position of the video changes. When the video is playing, the oncurrenttimechanged event occurs continuously.

onplaystatuschanged

This is the event that occurs when the video play status changes.

newstate

This is the property that has video play status information. In web browsers, it has five values, which are stop, pause, play, buffer, and ended, depending on the status.

How to implement an example

1

Creating Component

Drag 1 VideoPlayer, 5 Buttons, 1 CheckBox, and 2 Statics from the toolbar to an appropriate size on Form as in the example above to create and place them.

2

Setting Component Properties

Set the properties of the created component as follows.

Component

Property

Value

Button00

(Play)

id

btn_play

text

Play

Button01

(Pause)

id

btn_pause

text

Pause

Button02

(Stop)

id

btn_stop

text

Stop

Button03

(Forward)

id

btn_forward

text

Forward

Button04

(Rewind)

id

btn_rewind

text

Rewind

CheckBox00

(Mute)

id

chk_mute

text

Mute

Static00

id

stt_playtime

text


Static01

id

stt_playtime_title

text

Play Time:

3

Writing Event Function

Select the Play button and add the onclick event function as follows.

this.btn_play_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.VideoPlayer00.url = "https://github.com/mediaelement/mediaelement-files/blob/master/big_buck_bunny.mp4?raw=true";
	this.VideoPlayer00.play();
};

Set the URL of the video file in the url property of the VideoPlayer00 component. When the play method is called, the file set in the url property is played.

Select the Pause button and add the onclick event function as follows.

this.btn_pause_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.VideoPlayer00.pause();
};

Select the Stop button and add the onclick event function as follows.

this.btn_stop_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.VideoPlayer00.stop();
};

Select the Forward button and add the onclick event function as follows.

this.btn_forward_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.VideoPlayer00.currenttime = this.VideoPlayer00.currenttime + 2000;
};

For the currenttime property of VideoPlayer00, set the play position of the video in milliseconds (ms). For the following code, set the play position 2 seconds forward from the current position.

Select the Rewind button and add the onclick event function as follows.

this.btn_rewind_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.VideoPlayer00.currenttime = this.VideoPlayer00.currenttime - 2000;
};

For the currenttime property of VideoPlayer00, set the play position of the video in milliseconds (ms). For the following code, set the play position 2 seconds backward from the current position.

Select the Mute checkbox and add the onchanged event function as follows.

this.chk_mute_onchanged = function(obj:nexacro.CheckBox,e:nexacro.CheckBoxChangedEventInfo)
{
	if(e.postvalue)
	{	
		this.VideoPlayer00.mute = true;
	}
	else
	{
		this.VideoPlayer00.mute = false;
	}	
};

e.postvalue has the value of the changed checkbox. When the checkbox is checked, the mute property of VideoPlayer00 is set to true, and when the checkbox is cleared, the mute property of VideoPlayer00 is set to false.

Select VideoPlayer and add the oncurrenttimechanged event function as follows.

this.VideoPlayer00_oncurrenttimechanged = function(obj:nexacro.VideoPlayer,e:nexacro.VideoCurrentTimeChangedEventInfo)
{
	var strPlayTime = nexacro.round(this.VideoPlayer00.currenttime / 1000) + " / " + nexacro.round(this.VideoPlayer00.duration / 1000);
		
	this.stt_playtime.text = strPlayTime;
};

oncurrenttimechanged is the event that occurs when the play position changes in VideoPlayer. Get the total playing time and current time of the video and display them in the Static component of the screen.

Since the playing time is in milliseconds, divide by 1000 and convert to seconds. Since the converted time includes a decimal point, calculate it as the integer rounded using the round method for the user convenience. The calculated result is displayed in the format (current playing time) / (total playing time).

Select VideoPlayer and add the onplaystatuschanged event function as follows.

this.VideoPlayer00_onplaystatuschanged = function(obj:nexacro.VideoPlayer,e:nexacro.VideoPlayStateChangedEventInfo)
{
	switch(e.newstate)
	{	
		case "stop":
				this.stt_playtime.text = " ";
		case "pause":
		case "play":
		case "buffer":
		case "ended":
		default:
			trace("state: "+ e.newstate);
	}
};

onplaystatuschanged is the event that occurs when the play status of VideoPlayer changes. You can perform necessary processing by branching according to the video play status information of e.newstate.

4

Checking with QuickView

Run QuickView (Ctrl + F6) to check the result.

When you press the Play button, the video file is played and the playing time is displayed. Press each button and check that there is no problem with the operation.