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

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

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.

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

• The Play button plays the file. When the play starts, the playing time is displayed in seconds in Play Time on the right.

• The Pause, Stop buttons pause and stop the play respectively.

• The Forward button moves the video forward by 2 seconds, and the Rewind button moves the video backward by 2 seconds.

• Checking the Mute checkbox will mute the sound.

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

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.

Set the properties of the created component as follows.

• onclick Event Function of Play Button

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.set_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.

• onclick Event Function of Pause Button

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();
};

• onclick Event Function of Stop Button

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();
};

• onclick Event Function of Forward Button

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.set_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.

• onclick Event Function of Rewind Button

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.set_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.

• onchanged Event Function of Mute Checkbox

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.set_mute(true);
	}
	else
	{
		this.VideoPlayer00.set_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.

• oncurrenttimechanged Event Function of VideoPlayer

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.set_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).

• onplaystatuschanged Event Function of VideoPlayer

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.set_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.

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.