Skip to main content
I
iguerra16-Pearl
16-Pearl
February 10, 2020
Solved

Add binding variable to the HTML5 Video widget

  • February 10, 2020
  • 1 reply
  • 2427 views

Hello

I'm working to modify the HTML5 video widget

I was able to add an input event "Play" (bindable to a mashup event) that does the play of the video.

 

I'm now trying to add a bindable output parameter that is the length of the video (this is available with the "duration" property of the HTML5 video object)

I added this param correctly (VideoLength), I can see this on the mashup and I bound it to a label to see the value),

I can set and see a "test" value with this.setProperty('VideoLength', 100); executed when a new video file is set

 

but I don't know how to retrieve the "duration" DOM property ... it should be somethign like

this.setProperty('VideoLength', ???.duration???);

 

can someone help ?

 

Best answer by iguerra

Great Constantine

there was more problems

  1. the video length is not available immediately after the load method call
  2. the duration value is a DOM property so cannot be read with attr("attr_name"), but with get,
    I used 
    var videoPlayer = this.jqElement.find("video");
    videoPlayer.get(0).duration

So I made all by adding an event listener for the "load complete" (loadeddata) event and its service I set the VideoLength property of the widget 

Thanks

1 reply

C
Constantine18-Opal
18-Opal
February 10, 2020

Hello @iguerra,

 

Try this: 

document.getElementById(this.jqElementId).duration;

 

(be careful with this HTML5 Video extension, looks like it's removed from the Marketplace, might be deprecated or not fully compatible with the recent versions of ThingWorx)

 

/ Constantine

I
iguerra16-PearlAuthor
16-Pearl
February 10, 2020

does not works, it returns undefined (see the last 2 lines)

	this.updateProperty = function (updatePropertyInfo) {
		var widgetElement = this.jqElement.find("source");
		
		// TargetProperty tells you which of your bound properties changed
		if (updatePropertyInfo.TargetProperty === 'VideoLocation') {	
			var srcVideo = updatePropertyInfo.SinglePropertyValue;
			
			this.setProperty('VideoLocation', srcVideo);
			
			widgetElement.attr("src",srcVideo);
			var videoPlayer = this.jqElement.find("video");

			videoPlayer.trigger('load');
			if (this.getProperty('AutoPlay')==true)
				videoPlayer.trigger('play');
			
			console.log("HTML5Video ID= " + this.jqElementId );
			this.setProperty('VideoLength', document.getElementById(this.jqElementId).duration);
		}
	};
C
Constantine18-Opal
18-Opal
February 10, 2020

I see. How about this?

this.setProperty('VideoLength', videoPlayer.attr("duration"));

/ Constantine 

Terms & ConditionsCookie settingsAccessibility statement