player.html Example File | Qt WebKit Examples 5.4

- Qt 5.4
- Qt WebKit Examples
- YouTube View Example
- player.html Example File
- Qt 5.4.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>