Community Tip - When posting, your subject should be specific and summarize your question. Here are some additional tips on asking a great question. X
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 ?
Solved! Go to Solution.
Great Constantine
there was more problems
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
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
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
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
Great Constantine
there was more problems
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