javascript - 让 HTML5 YouTube 播放器适合 UIWebView
<p><p>我过去(在 iOS 6 中)只能“告诉”YouTube 播放器应该拉伸(stretch)到什么宽度和高度，没有问题。</p>
<p>此代码之前在 iOS 6 中可以使用，但<strong>现在在 iOS 7 中根本无法使用</strong>。</p>
<p>但现在我必须将高度和宽度的值设置为<strong>比它自己的屏幕高得多(3 倍)</strong>，但这当然不是解决方案，因为设备的尺寸会有所不同。</strong> p>
<p>这是按下按钮时运行的代码</p>
<pre><code>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');
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 = bounds].size.width , [ bounds].size.height , @"5bCRDI1BESc"];
//And then I load the html into the webview
resourceURL]];
</code></pre>
<p>由此生成的 HTML 如下</p>
<pre><code><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'); 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>
</code></pre>
<p>但结果与 iOS 6 中的不一样，在 iOS 6 中，播放器填写到 whitespce (webview)。这是一张图片</p>
<p> <img src="https://imgur.com/jOqwwAY.png" alt="Player not filling out into space"/> </p>
<p>如果我将 HTML 的宽度和高度 <strong>加倍(屏幕尺寸!)</strong> 为 640 像素和 960 像素!？</p>
<p> <img src="https://imgur.com/VJyW0k8.png" alt="double the screen size not either filling out into space"/> </p>
<p><strong>有人知道 iOS 7 中的 YouTube API 或 Safari 浏览器发生了什么吗？</strong></p></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>这是我当前的实现:</p>
<pre><code>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'sframe 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)
</code></pre>
<p>这是在 <code>UIViewController</code> 内部，我将 ViewController 的 <code>view</code> 的框架作为播放器的宽度和高度传递。您应该相应地调整播放器的大小。</p></p>
<p style="font-size: 20px;">关于javascript - 让 HTML5 YouTube 播放器适合 UIWebView，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/22283514/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/22283514/
</a>
</p>
页:
[1]