cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Community Tip - If community subscription notifications are filling up your inbox you can set up a daily digest and get all your notifications in a single email. X

Add binding variable to the HTML5 Video widget

iguerra
14-Alexandrite

Add binding variable to the HTML5 Video widget

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 ?

 

1 ACCEPTED SOLUTION

Accepted Solutions
iguerra
14-Alexandrite
(To:Constantine)

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

View solution in original post

6 REPLIES 6

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
14-Alexandrite
(To:Constantine)

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

I see. How about this?

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

/ Constantine 

iguerra
14-Alexandrite
(To:Constantine)

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.

 

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
14-Alexandrite
(To:Constantine)

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

Top Tags