I am having trouble evaluating youtube api javascript commands from a UIWebView
The commands are evaluating correctly in Safari and Firefox
the webview is initialized with options
allowsInlineMediaPlayback = YES;
mediaPlaybackRequiresUserAction = NO;
The Html I am loading is:
<div id="player"></div>
<script>
var tag = document.createElement('script');
//playerVars: { 'autoplay': 0, 'modestbranding': 1, 'rel': 0, 'showinfo': 0, 'iv_load_policy': 3, 'controls': 1, 'playsinline':1 },
var configuration = {
playerVars: {
'playsinline':1,
'showinfo': 0,
'modestbranding': 1
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
};
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function setup(key, value) {
configuration[key] = value;
}
function configurePlayer(key, value) {
configuration.playerVars[key] = value;
}
// area for the code injection
setup('videoId', 'cDhlx60nTCU');
setup('startingTime', 10);
setup('autoPlay' , true);
setup('width', 400);
setup('height', 200);
configurePlayer('controls', true);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', configuration);
}
function onPlayerReady(event) {
if (configuration['autoPlay']) {
if (configuration['startingTime']) {
player.playVideoAt(configuration['startingTime']);
} else {
event.target.playVideo();
}
}
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING) {
// Do something...
}
}
function stopVideo() {
player.stopVideo();
return "OK";
}
</script>
Printing description of html:
<div id="player"></div>
<script>
var tag = document.createElement('script');
//playerVars: { 'autoplay': 0, 'modestbranding': 1, 'rel': 0, 'showinfo': 0, 'iv_load_policy': 3, 'controls': 1, 'playsinline':1 },
var configuration = {
playerVars: {
'playsinline':1,
'showinfo': 0,
'modestbranding': 1
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
};
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function setup(key, value) {
configuration[key] = value;
}
function configurePlayer(key, value) {
configuration.playerVars[key] = value;
}
// area for the code injection
setup('videoId', 'cDhlx60nTCU');
setup('startingTime', 0);
setup('autoPlay' , true);
setup('width', 320);
setup('height', 288);
configurePlayer('controls', true);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', configuration);
}
function onPlayerReady(event) {
if (configuration['autoPlay']) {
if (configuration['startingTime']) {
player.playVideoAt(configuration['startingTime']);
} else {
event.target.playVideo();
}
}
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING) {
// Do something...
}
}
function stopVideo() {
player.stopVideo();
return "OK";
}
</script>
I am loading the webview page with this
-(void)viewDidAppear:(BOOL)animated
{
[self.webview loadHTMLString:html baseURL:[NSURL URLWithString:@"html"]];
}
after the webview delegate calls webViewDidFinishLoad
I tried calling methods on the player with this syntax
-(void)pause
{
[self.webview stringByEvaluatingJavaScriptFromString:@"player.pauseVideo();"];
}
Are there possibly any flags that are interfering with the java script evaluation?