Dear Stackoverflow Community,
I'm slowly but steadily going crazy.
I am trying to implement a WPF Webbrowser that plays Youtube videos and when the video has ended a C# method should be called.
Unfortunately the events onReady and onStateChange are not called.
Here is the html/javascript that is displayed in the webbrowser:
<!doctype html><html>
<head>
<meta http-equiv=""X-UA-Compatible"" content=""IE=edge""/>
</head><body>
<style>
.video-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
}
.video-container iframe, .video-container object, .video-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
}
</style>
<div class="video-container">
<div id="player"></div>
</div>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
width: '640',
height: '390',
videoId: 'jhFDyDgMVUI',
playerVars: { autohide: 1, showinfo: 0 , html5: 1, enablejsapi: 1, autoplay: 1, origin: 'http://www.example.co'},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
alert('apirdy');
}
function onPlayerReady(event) {
event.target.playVideo();
alert('onrdy');
player.addEventListener('onStateChange', onPlayerStateChange);
}
function onPlayerStateChange(event) {
alert('onchange');
}
</script>
</body></html>
I tested this script on my webserver and it works. But only on my webserver and not in the WPF WebBrowser.
Notice the following call in the function onYoutubeIframeApiReady:
alert('apirdy');
This is the only call that works when using the WPF WebBrowser.
But I would like to make calls in the functions onPlayerReady and onPlayerStateChange too but they never seem to be triggered.
Does anyone have an idea what I am doing wrong?
Any help is very appreciated!