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

Add binding variable to the HTML5 Video widget

SOLVED
Highlighted
Amethyst

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
Highlighted

Re: Add binding variable to the HTML5 Video widget

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
Highlighted

Re: Add binding variable to the HTML5 Video widget

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

Highlighted

Re: Add binding variable to the HTML5 Video widget

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

Re: Add binding variable to the HTML5 Video widget

I see. How about this?

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

/ Constantine 

Re: Add binding variable to the HTML5 Video widget

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.

 

Highlighted

Re: Add binding variable to the HTML5 Video widget

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

Highlighted

Re: Add binding variable to the HTML5 Video widget

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

Announcements

Thingworx Navigate content has a new home! Click here to access the new Thingworx Navigate forum!