javascript - 让 HTML5 YouTube 播放器适合 UIWebView

Question

我曾经（在 iOS 6 中）能够“告诉”YouTube 播放器它应该伸展到什么宽度和高度，没有问题。

这段代码以前在 iOS 6 中可以工作，但现在在 iOS 7 中根本不工作。

但是现在我必须为高度和宽度设置比它本身的屏幕高得多（3 倍）的值，但这当然不是解决方案，因为设备的大小会有所不同。

这是按下按钮时运行的代码

NSString *player = @"<!DOCTYPE html>
<html>
<head><style>body{margin:0px 0px 0px 0px;}</style></head> 
<body> 

<div id=\"player\"></div> 

<script>   
var tag = document.createElement('script'); 
tag.src = \"http://www.youtube.com/player_api\"; 
var firstScriptTag = document.getElementsByTagName('script')[0];      
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 
var player; 

function onYouTubePlayerAPIReady() 
{ 
   player = new YT.Player('player', { width:'%0.0fpx', height:'%0.0fpx', videoId:'%@',
   playerVars: {playsinline : 1, rel:0, showinfo:0}, events: { 'onReady': onPlayerReady, } });
 } 
   function onPlayerReady(event) { event.target.playVideo(); 
} 
</script> 
</body> 
</html>"; //End of player creation string

//Then I create the html with the size of the screen
NSString *html = [NSString stringWithFormat:player,[[UIScreen mainScreen] bounds].size.width , [[UIScreen mainScreen] bounds].size.height , @"5bCRDI1BESc"];

//And then I load the html into the webview
[self.webView loadHTMLString:html baseURL:[[NSBundle mainBundle] resourceURL]];

由此生成的HTML如下

<html><head><style>body{margin:0px 0px 0px 0px;}</style></head> 
<body> 
<iframe id="player" frameborder="0" allowfullscreen="1" title="YouTube video player" width="320px" height="480px" src="http://www.youtube.com/embed/5bCRDI1BESc?playsinline=1&amp;rel=0&amp;showinfo=0&amp;enablejsapi=1"></iframe> <script src="http://s.ytimg.com/yts/jsbin/www-widgetapi-vflvlw_TO.js" async=""></script><script src="http://www.youtube.com/player_api"></script><script> var tag = document.createElement('script'); tag.src = "http://www.youtube.com/player_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 
var player; function onYouTubePlayerAPIReady() { 
player = new YT.Player('player', { width:'320px', height:'480px', 
videoId:'5bCRDI1BESc',
playerVars: {playsinline : 1, rel:0, showinfo:0}, 
events: { 'onReady': onPlayerReady, } }); 
} 
function onPlayerReady(event) { event.target.playVideo(); } </script>  </body></html>

但结果与 iOS 6 中的不同，在 iOS 6 中，播放器填写到 whitespce (webview)。这是一张图片

玩家没有填满空间

如果我然后将（屏幕尺寸！）加倍（屏幕尺寸！）到 640px 和 960px 进入 HTML 的宽度和高度！？

屏幕尺寸翻倍，也没有填满空间

有人知道 iOS 7 中的 YouTube API 或 Safari 浏览器发生了什么吗？

score 1 · Accepted Answer

这是我目前的实现：

let webView = UIWebView(...)

// get the ID of the video you want to play
let videoID = "zN-GGeNPQEg" // https://www.youtube.com/watch?v=zN-GGeNPQEg

// Replace the height and width of the player here to match your UIWebView's  frame rect
let embededHTML = "<html><body style='margin:0px;padding:0px;'><script type='text/javascript' src='http://www.youtube.com/iframe_api'></script><script type='text/javascript'>function onYouTubeIframeAPIReady(){ytplayer=new YT.Player('playerId',{events:{onReady:onPlayerReady}})}function onPlayerReady(a){a.target.playVideo();}</script><iframe id='playerId' type='text/html' width='\(self.view.frame.size.width)' height='\(self.view.frame.size.height)' src='http://www.youtube.com/embed/\(videoID)?enablejsapi=1&rel=0&playsinline=1&autoplay=1' frameborder='0'></body></html>"

// Load your webView with the HTML we just set up
webView.loadHTMLString(embededHTML, baseURL: NSBundle.mainBundle().bundleURL)

这是在 a 内部，UIViewController我将视图控制器的框架view作为播放器的宽度和高度传递。您应该相应地调整播放器的大小。

score 0 · Accepted Answer

我html经常从 a 中使用 youtube 播放器UIWebView并使用此代码。

NSString* embedHTML = @"\
<html><head>\
<style type=\"text/css\">\
body {\
background-color: transparent;\
color: white;\
}\
</style>\
</head><body style=\"margin:0\">\
<embed id=\"yt\" src=\"http://www.youtube.com/v/%@\" type=\"application/x-shockwave-flash\" \
width=\"240\" height=\"150\"></embed>\
</body></html>";

NSString* url = [NSURL URLWithString:_detailModel.video];
NSString* html = [NSString stringWithFormat:embedHTML, url];
nurl = [NSURL URLWithString:html];

[_videoWebView loadHTMLString:html baseURL:nil];

它说width=\"240\" height=\"150\的是缩略图大小。视频的实际大小默认为全屏。这对于 youtube 视频完美无缺，但任何其他视频（vimeo 等）都必须type=\"application/x-shockwave-flash\"退出。希望能帮助到你。

score 0 · Accepted Answer

一些值得思考的东西 - YouTubes iFrame Api 有一些变化，特别是自 2012 年 7 月以来，请参阅https://developers.google.com/youtube/iframe_api_reference ，

player_api 已弃用并由 iFrame_api 取代。

尤其是

tag.src = \"http://www.youtube.com/player_api\";

被替换为

 tag.src = "https://www.youtube.com/iframe_api";

和

  function onYouTubePlayerAPIReady()

被替换为

  function onYouTubeIframeAPIReady()

它确实指定两者都将在一段时间内得到支持，这让我怀疑您使用的某些参数可能在旧 API 中不可用，并可能导致您的问题，-

playerVars: {playsinline : 1, rel:0, showinfo:0} 是相对较新的，大约在 2014 年旧 API 被弃用整整 2 年后。

免责声明：我的应用程序的第一个版本具有嵌入式 youtube 播放器，但是从 IOS 6.0 开始，我发现了 m.youtube.com，我发现控件比我编写的代码要好一些，从那以后我一直坚持使用它。因此，我无法对此进行测试，但我相信在您的情况下值得尝试。

以下是供您使用的文档的摘录：

2012 年 7 月 19 日

此更新包含以下更改：

要求部分已更新，表明任何使用 IFrame API 的网页也必须实现 onYouTubeIframeAPIReady 函数。以前，该部分指出所需的函数名为 onYouTubePlayerAPIReady。整个文档中的代码示例也已更新为使用新名称。

注意：为确保此更改不会破坏现有实现，这两个名称都可以使用。如果由于某种原因，您的页面具有 onYouTubeIframeAPIReady 函数和 onYouTubePlayerAPIReady 函数，则会调用这两个函数，并且会首先调用 onYouTubeIframeAPIReady 函数。

祝你好运

score 0 · Accepted Answer

0

UIWebView 的默认视口宽度为 980。在您的 UIWebView 上设置 scalesPageToFit:YES。

于 2014-08-29T09:09:55.867 回答

score 0 · Accepted Answer

<script>      
  var tag = document.createElement('script');
  tag.src = "http://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
      width: '480',
      height: '280',
      videoId: 'rynvewVe21Y',
      events: {
        'onReady': onPlayerReady}
    });
  }

  function onPlayerReady(event) {
    event.target.playVideo();
  }
</script>

尝试使用此脚本，您可以根据需要更改高度和宽度。

javascript - 让 HTML5 YouTube 播放器适合 UIWebView

5 回答 5

Related

Reference