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>