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
4
Replies
AdChoices