CODEWITHSUNDEEP
objective-ciosuiwebviewyoutube
maniac
maniac

Reputation: 21

YouTube in UIWebView only plays once

I have a UIWebView with some YouTube Videos embeded via the iframe code:

<iframe width="190" height="102" src="http://www.youtube.com/embed/...?showinfo=0" frameborder="0" allowfullscreen></iframe>

When it first loads it is possible to view each video exactly once. After viewing it the area is just black with white "Youtube" in it.

Any ideas? Of course reloading the UIWebView after watching a video fixes it, but I don't like this...

Upvotes: 1

Views: 370

Answers (1)

maniac
maniac

Reputation: 21

I did it! The following Javascript did the job:

<script>
 VideoIDs = new Array(...some ids here...);

 function getFrameID(id){
  var elem = document.getElementById(id);
  if (elem) {
   if(/^iframe$/i.test(elem.tagName))
    return id;
   var elems = elem.getElementsByTagName("iframe");
   if (!elems.length)
    return null;
   for (var i=0; i<elems.length; i++) {
    if (/^https?:\/\/(?:www\.)?youtube(?:-nocookie)?\.com(\/|$)/i.test(elems[i].src))
     break;
   }
   elem = elems[i];
   if (elem.id)
    return elem.id;
   do {
    id += "-frame";
   } while (document.getElementById(id));
   elem.id = id;
   return id;
  }
  return null;
 }

 var YT_ready = (function(){
  var onReady_funcs = [], api_isReady = false;
  return function(func, b_before){
   if (func === true) {
    api_isReady = true;
    for (var i=0; i<onReady_funcs.length; i++){
     onReady_funcs.shift()();
    }
   } else if(typeof func == "function") {
    if (api_isReady)
     func();
    else
     onReady_funcs[b_before?"unshift":"push"](func);
   }
  }
 })();

 function onYouTubePlayerAPIReady() {
  YT_ready(true)
 }

 (function(){
  var s = document.createElement("script");
  s.src = "http://www.youtube.com/player_api";
  var before = document.getElementsByTagName("script")[0];
  before.parentNode.insertBefore(s, before);
 })();

 var players = new Array();
 YT_ready(function() {
  for(index in VideoIDs) {
   var frameID = getFrameID(VideoIDs[index]);
   if (frameID) {
    players[frameID] = new YT.Player(frameID, {
     events: {
      "onStateChange": stateChange
     }
    });
   }
  }
 });

 function youtube_parser(url){
  var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
  var match = url.match(regExp);
  if (match&&match[7].length==11){
   return match[7];
  }
 }

 function stateChange(event) {
  if(event.data == YT.PlayerState.ENDED){
   document.location = 'callback:finished';
   document.getElementById(youtube_parser(event.target.getVideoUrl())).contentWindow.location.reload(true);
  }
 }
 </script>

Upvotes: 1

Related Questions