I need to make a webApp for some kind of “internal draw”, and before the participant have to fill a form with his personal data, I need the participant have to see a youtube video till the end.
So my webApp have a main WebPage that contains a WebHTMLViewer, a WebButtom and WebRectangle.
The WebRectangle is placed over the WebHTMLViewer in order to avoid the user could interact with the native youtube controls.
The WebButtom is initially disabled and in the press event loads a WebPage with the form to be completed.
So I need that when the session starts in the main WebPage the youtube video start running and only when it is detected the the video arrives to the end (I imagine when the video changes to the next in the cue), at that moment the WebButtom becomes enabled.
The code below shows 2 string variables:
the youtube web page to show,
and the html web page to be loaded at the Shown Event of the main WebPage.
In the Shown Event of the main WebPage this is my code:
as you see I had included in the HTML the youtube iframe_api script and two functions:
onYouTubeIframeAPIReady
onPlayerStateChange(event)
the first one is to play the video and the second to check for the end of the video.
I have 2 problems…
The video is shown but I couldn’t make it starts automatically
I know that I have to run something like this: HTMLViewer1.ExecuteJavaScript(“player.playVideo();”)
but it doesn’t work for me.
I don’t know where to check for the end of the video.
I know that I have to check for the If newURL = “xojo://VideoFinalizado” Then btnContinuar.Enabled = True
If someone with more expertise in JavaScript could give me some advice I will really appreciate.
Hello mate, a tiny tip for such cases where you are inserting a large piece of javascript into htmlviewer.
Save your javascript / html snippet as a constant.
If your snippet has variables that you need to update, then pass the constant to a variable and label those variables properly within the javascript code, and use replace to set the variables.
That will result in much, much cleaner code and you don’t have to parse the javascript into a string like you do in your example above, which makes up a really messy code in the longrun.
As for detecting the events, you need to notify XOJO of status changes, from within the javascript, by using executeInXojo
An example of this, in my case for example, is to notify Xojo of a contextualclick within a html page running in a htmlviewer or catching events of a running library on the page, to do that, you can do :
<!-- Add support for events that we can hook in Xojo -->
<script>
function mousedownHandler(event) {
if (event.button === 2) {
executeInXojo('mousedown', event.button);
}
}
document.addEventListener('mousedown', mousedownHandler);
function quillTextChangeHandler(delta, oldDelta, source) {
if (source === 'user') {
executeInXojo('textChange', 'user');
}
}
</script>
To catch these implemented notifications on the Xojo side, you use HTMLViewer.JavaScriptRequest
Hi @Sveinn_Runar_Sigurdsson… as usual, you always give good advises and tips. Thanks my friend. I will follow your advice and I will use in the future constants for javascript/html snippets.
I solve my problem with a not a nice and profesional solution.
As I know the duration of the video, I use a timer to force the user of the app to assist the hole video. And till that time do not happened the button will be disabled.
But I am interested on the way you use to detect events using executeInXojo, and I have no success following the way you described. Is it possible to have a simple example of such solution ?
@Anthony_G_Cyphers@Sveinn_Runar_Sigurdsson .. so is something similar to do executeInXojo in a webApp in order to detect interactions inside a WebHTMLViewer ?
Thanks, both of you.
