Add binding variable to the HTML5 Video widget

[iguerra]

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 ?

[Constantine]

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

[iguerra]

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

[Constantine]

I see. How about this?

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

/ Constantine 

[iguerra]

I already tried  ant this should be good .... but still undefined .... 

in effect 

document.getElementById(this.jqElementId)

was not correct because it points to a parent div containing the video element, so here "duration" was not available.

[Constantine]

Just thought about something... Here you set the src property and then query for duration immediately. Don't you need to wait for the video to load?

E.g. https://stackoverflow.com/questions/13864795/wait-until-an-html5-video-loads

/ Constantine

[iguerra · Accepted solution]

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