<div dir="ltr"><div>Hello,</div><div>I&#39;m trying to show a Youtube player inside a QML scene. I therefore replicated the available example in Qt and I&#39;m loading this html code into a QML WebView:</div><div><br></div>
&lt;html&gt;<br>  &lt;head&gt;<br>    &lt;title&gt;-1&lt;/title&gt;<br>    &lt;meta name=&quot;viewport&quot;<br>          content=&quot;width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no&quot;/&gt;<br>
  &lt;/head&gt;<br>  &lt;body bgcolor=&quot;black&quot; marginwidth=&quot;0&quot; marginheight=&quot;0&quot;&gt;<br>    &lt;!-- The &lt;iframe&gt; (and video player) will replace this &lt;div&gt; tag. --&gt;<br>    &lt;div id=&quot;player&quot;&gt;&lt;/div&gt;<br>
    &lt;script&gt;<br>        function getVideoId() {<br>          return window.location.href.slice(window.location.href.indexOf(&#39;?&#39;) + 1);<br>        }<br><br>        // This code loads the IFrame Player API code asynchronously.<br>
        var tag = document.createElement(&#39;script&#39;);<br>        tag.src = &quot;<a href="https://www.youtube.com/iframe_api">https://www.youtube.com/iframe_api</a>&quot;;<br>        var firstScriptTag = document.getElementsByTagName(&#39;script&#39;)[0];<br>
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);<br><br>        // This function creates an &lt;iframe&gt; (and YouTube player)<br>        // after the API code downloads.<br>        var player;<br>        function onYouTubeIframeAPIReady() {<br>
          player = new YT.Player(&#39;player&#39;, {<br>            playerVars: { &#39;html5&#39;: 1, &#39;iv_load_policy&#39;: 3 },<br>            frameborder: &#39;0&#39;,<br>            height: &#39;100%&#39;,<br>            width: &#39;100%&#39;,<br>
            videoId: &quot;GgDDXXeYJeI&quot;,<br>            events: {<br>              &#39;onReady&#39;: onPlayerReady,<br>              &#39;onStateChange&#39;: onPlayerStateChange,<br>              &#39;onError&#39;: onPlayerError<br>
            }<br>          });<br>        }<br><br>        // The API will call this function when the video player is ready.<br>        function onPlayerReady(event) {<br>          document.title = &quot;onPlayerReady&quot;;<br>
          console.log(&quot;onPlayerReady callback.&quot;);<br>          navigator.qt.postMessage(&quot;onPlayerReady callback.&quot;);<br>        }<br><br><br>        // The API calls this function when the player&#39;s state changes.<br>
        function onPlayerStateChange(event) {<br>          document.title = &quot;onPlayerStateChange&quot;;<br>          //navigator.qt.postMessage(&quot;onPlayerStateChange&quot;);<br>          if (event.data == YT.PlayerState.PLAYING)<br>
            console.log(&quot;Playing state received.&quot;);<br>          else if (YT.PlayerState.ENDED == event.data)<br>            console.log(&quot;Ended state received.&quot;);<br>          else if (YT.PlayerState.PAUSED == event.data)<br>
            console.log(&quot;Paused state received.&quot;);<br>          else if (YT.PlayerState.BUFFERING == event.data)<br>            console.log(&quot;Buffering state received.&quot;);<br>          else if (YT.PlayerState.CUED == event.data)<br>
            console.log(&quot;Cued state received.&quot;);<br>          else if (event.data == -1)<br>            console.log(&quot;Unstarted state received.&quot;);<br>          else<br>            console.log(&quot;Unknown event.data &quot; + event.data + &quot;.&quot;);<br>
        }<br><br>        function onPlayerError() {<br>          document.title = &quot;Error occurred!&quot;<br>          navigator.qt.postMessage(event.data);<br>        }<br>    &lt;/script&gt;<br>  &lt;/body&gt;<br>&lt;/html&gt;<div>
<br></div><div>What seems to happen is that no callback is invoked at all. No onPlayerReady, no onPlayerStateChange and no onPlayerError. I tried both to post a message and set the title. If I load the same html into Chromium or Firefox I get all my callbacks.</div>
<div>Any idea why or what can I do to add the player and get callbacks?</div><div><br></div><div>I also tried to use the getPlayerState() method of the player from QML, but that seemed to hang.</div><div><br></div><div>Any advice?</div>
<div>Thanks.</div><div><br></div><div>Luca</div></div>