Highlighted

StageWebView no longer playing YouTube videos using the iframe API

New Here ,
Sep 26, 2017

Copy link to clipboard

Copied

I have an AIR application that plays YouTube videos using the YouTube iframe API, implemented using StageWebView. It has worked well for a few years now, and today I found it does not play YouTube videos.

If I create StageWebView() with no parameters (which I have always done and has worked without issues until today), AIR uses WebKit. The YouTube iframe API loads, but the video does not play. If I right-click the window and click on "Stats for nerds", then highlight the text and press Control+A to select it all, I get the below after copying and pasting it into a text editor (between the "-------"):

-----------------------
YouTube Developers Live: Embedded Web Player Customization


Your browser does not currently recognize any of the video formats available.
Click here to visit our frequently asked questions about HTML5 video.

Video ID / CPNM7lc1UVf-VE / L49cXdkww2mqGG-8
Viewport640x390
Current / Optimal Resundefinedxundefined
Volume / Normalized100% / 100%
Codecs
Color
Host
Connection Speed1016 Kbps
Network Activity0 KB
Buffer Health0.00 s
Dropped Frames-

0:00 / 22:24
----------------------------------

When I saw it wasn't working, I used StageWebView(true) instead, which uses the machine's system default web engine. This doesn't successfully load the YouTube iframe API, so no video window appears at all.

Here is the code I’m using for simple verification:

var webView:StageWebView = new StageWebView();
webView.stage = this.stage;
webView.viewPort = new Rectangle(0, 0, stage.stageWidth, stage.stageHeight);
webView.loadURL("http://batsonengineering.com/testyt.html");

The code inside “testyt.html” is the example on the YouTube iframe API web page (https://developers.google.com/youtube/iframe_api_reference), except I added some alert statements to see what is happening. If you run this, you will see the alert("4") never appears if I use the WebKit, and alert("3") never appears if I use the default web engine.

(code in testyt.html)
<!DOCTYPE html>
<html>
  <body>
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div id="player"></div>

    <script>
      // 2. This code loads the IFrame Player API code asynchronously.
alert("1");
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
alert("2");
      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
    alert("3");
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'M7lc1UVf-VE',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
    alert("4");
        event.target.playVideo();
      }

      // 5. The API calls this function when the player's state changes.
      //    The function indicates that when playing a video (state=1),
      //    the player should play for six seconds and then stop.
      var done = false;
      function onPlayerStateChange(event) {
    alert("5");
        if (event.data == YT.PlayerState.PLAYING && !done) {
          setTimeout(stopVideo, 6000);
          done = true;
        }
      }
      function stopVideo() {
        player.stopVideo();
      }
    </script>
  </body>
</html>

If I change the line:
webView.loadURL("http://batsonengineering.com/testyt.html");

to:
webView.loadURL("https://youtu.be/M7lc1UVf-VE");

which takes me to the YouTube page this video plays on, the YouTube page will load, but the video will not play if I use the system web engine. If I use WebKit, the video will play. However, I need to be able to use the iframe API commands to the control the video, and don't want the entire YouTube page showing to my users. I need it to be embedded.

So my questions are:
1) What has made the WebKit suddenly unable to play YouTube videos in StageWebView?
2) What has made my system's web engine suddenly unable to load the YouTube API when in StageWebView?

Thanks in advance for any help,
Steve

TOPICS
Development

Views

1.1K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

StageWebView no longer playing YouTube videos using the iframe API

New Here ,
Sep 26, 2017

Copy link to clipboard

Copied

I have an AIR application that plays YouTube videos using the YouTube iframe API, implemented using StageWebView. It has worked well for a few years now, and today I found it does not play YouTube videos.

If I create StageWebView() with no parameters (which I have always done and has worked without issues until today), AIR uses WebKit. The YouTube iframe API loads, but the video does not play. If I right-click the window and click on "Stats for nerds", then highlight the text and press Control+A to select it all, I get the below after copying and pasting it into a text editor (between the "-------"):

-----------------------
YouTube Developers Live: Embedded Web Player Customization


Your browser does not currently recognize any of the video formats available.
Click here to visit our frequently asked questions about HTML5 video.

Video ID / CPNM7lc1UVf-VE / L49cXdkww2mqGG-8
Viewport640x390
Current / Optimal Resundefinedxundefined
Volume / Normalized100% / 100%
Codecs
Color
Host
Connection Speed1016 Kbps
Network Activity0 KB
Buffer Health0.00 s
Dropped Frames-

0:00 / 22:24
----------------------------------

When I saw it wasn't working, I used StageWebView(true) instead, which uses the machine's system default web engine. This doesn't successfully load the YouTube iframe API, so no video window appears at all.

Here is the code I’m using for simple verification:

var webView:StageWebView = new StageWebView();
webView.stage = this.stage;
webView.viewPort = new Rectangle(0, 0, stage.stageWidth, stage.stageHeight);
webView.loadURL("http://batsonengineering.com/testyt.html");

The code inside “testyt.html” is the example on the YouTube iframe API web page (https://developers.google.com/youtube/iframe_api_reference), except I added some alert statements to see what is happening. If you run this, you will see the alert("4") never appears if I use the WebKit, and alert("3") never appears if I use the default web engine.

(code in testyt.html)
<!DOCTYPE html>
<html>
  <body>
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div id="player"></div>

    <script>
      // 2. This code loads the IFrame Player API code asynchronously.
alert("1");
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
alert("2");
      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
    alert("3");
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'M7lc1UVf-VE',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
    alert("4");
        event.target.playVideo();
      }

      // 5. The API calls this function when the player's state changes.
      //    The function indicates that when playing a video (state=1),
      //    the player should play for six seconds and then stop.
      var done = false;
      function onPlayerStateChange(event) {
    alert("5");
        if (event.data == YT.PlayerState.PLAYING && !done) {
          setTimeout(stopVideo, 6000);
          done = true;
        }
      }
      function stopVideo() {
        player.stopVideo();
      }
    </script>
  </body>
</html>

If I change the line:
webView.loadURL("http://batsonengineering.com/testyt.html");

to:
webView.loadURL("https://youtu.be/M7lc1UVf-VE");

which takes me to the YouTube page this video plays on, the YouTube page will load, but the video will not play if I use the system web engine. If I use WebKit, the video will play. However, I need to be able to use the iframe API commands to the control the video, and don't want the entire YouTube page showing to my users. I need it to be embedded.

So my questions are:
1) What has made the WebKit suddenly unable to play YouTube videos in StageWebView?
2) What has made my system's web engine suddenly unable to load the YouTube API when in StageWebView?

Thanks in advance for any help,
Steve

TOPICS
Development

Views

1.1K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Sep 26, 2017 0
Advocate ,
Sep 27, 2017

Copy link to clipboard

Copied

My guess would be it's not StageWebView that is at fault but youtube that changed the way it handles things.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 27, 2017 0
New Here ,
Oct 16, 2017

Copy link to clipboard

Copied

Steve, did you have any luck in resolving this issue? Looks like I am having the same problem. Youtube player worked just fine and now it does not play.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 16, 2017 0
New Here ,
Feb 28, 2018

Copy link to clipboard

Copied

Did anyone find a solution for this? I'm also not able to use the iframe player in StageWebView.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 28, 2018 0
IGZN LATEST
Participant ,
Mar 01, 2018

Copy link to clipboard

Copied

I managed to display your HTML (and all the alerts) in tuarua's WebView ANE on Windows. Did not try it on other platforms but you should give it a try.  MyFlashLabs also has a WebView ANE but it's for iOS and Android only.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 01, 2018 1