player.html Example File | Qt WebKit Examples 5.9

Qt 5.9 | Qt WebKit Examples | YouTube View Example | player.html Example File

Qt 5.9.2 Reference Documentation

# player.html Example File

webkitqml/youtubeview/content/player.html

      <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">
          <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: getVideoId(),
                  events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                  }
                });
              }

              // The API will call this function when the video player is ready.
              function onPlayerReady(event) {
                document.title = 0;
              }

              // The API calls this function when the player's state changes.
              function onPlayerStateChange(event) {
                if (event.data == YT.PlayerState.PLAYING) {
                  document.title = 1;
                } else if (event.data == YT.PlayerState.ENDED || event.data == YT.PlayerState.PAUSED) {
                  document.title = 2;
                }
              }
          </script>
        </body>
      </html>