1

iframe コードを介して埋め込まれたいくつかの YouTube ビデオを含む UIWebView があります。

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

最初にロードすると、各ビデオを 1 回だけ表示できます。それを見た後、その領域はその中に白い「Youtube」があるだけの黒です。

何か案は？もちろん、ビデオを見た後に UIWebView をリロードすると修正されますが、私はこれが好きではありません...

4

1 に答える 1

1

やったよ！次のJavascriptが仕事をしました：

<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>
于 2012-12-07T21:43:43.780 に答える