[webkit-qt] Youtube player callbacks

Thu Jun 12 06:41:51 PDT 2014

Hello,
I'm trying to show a Youtube player inside a QML scene. I therefore
replicated the available example in Qt and I'm loading this html code into
a QML WebView:

<html>
  <head>
    <title>-1</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0,
minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  </head>
  <body bgcolor="black" marginwidth="0" marginheight="0">
    <!-- The <iframe> (and video player) will replace this <div> tag. -->
    <div id="player"></div>
    <script>
        function getVideoId() {
          return
window.location.href.slice(window.location.href.indexOf('?') + 1);
        }

        // This code loads the IFrame Player API code asynchronously.
        var tag = document.createElement('script');
        tag.src = "https://www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

        // This function creates an <iframe> (and YouTube player)
        // after the API code downloads.
        var player;
        function onYouTubeIframeAPIReady() {
          player = new YT.Player('player', {
            playerVars: { 'html5': 1, 'iv_load_policy': 3 },
            frameborder: '0',
            height: '100%',
            width: '100%',
            videoId: "GgDDXXeYJeI",
            events: {
              'onReady': onPlayerReady,
              'onStateChange': onPlayerStateChange,
              'onError': onPlayerError
            }
          });
        }

        // The API will call this function when the video player is ready.
        function onPlayerReady(event) {
          document.title = "onPlayerReady";
          console.log("onPlayerReady callback.");
          navigator.qt.postMessage("onPlayerReady callback.");
        }

        // The API calls this function when the player's state changes.
        function onPlayerStateChange(event) {
          document.title = "onPlayerStateChange";
          //navigator.qt.postMessage("onPlayerStateChange");
          if (event.data == YT.PlayerState.PLAYING)
            console.log("Playing state received.");
          else if (YT.PlayerState.ENDED == event.data)
            console.log("Ended state received.");
          else if (YT.PlayerState.PAUSED == event.data)
            console.log("Paused state received.");
          else if (YT.PlayerState.BUFFERING == event.data)
            console.log("Buffering state received.");
          else if (YT.PlayerState.CUED == event.data)
            console.log("Cued state received.");
          else if (event.data == -1)
            console.log("Unstarted state received.");
          else
            console.log("Unknown event.data " + event.data + ".");
        }

        function onPlayerError() {
          document.title = "Error occurred!"
          navigator.qt.postMessage(event.data);
        }
    </script>
  </body>
</html>

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.
Any idea why or what can I do to add the player and get callbacks?

I also tried to use the getPlayerState() method of the player from QML, but
that seemed to hang.

Any advice?
Thanks.

Luca
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.webkit.org/pipermail/webkit-qt/attachments/20140612/20e6e5b1/attachment.html>