我过去(在 iOS 6 中)只能“告诉”YouTube 播放器应该拉伸(stretch)到什么宽度和高度,没有问题。
此代码之前在 iOS 6 中可以使用,但现在在 iOS 7 中根本无法使用。
但现在我必须将高度和宽度的值设置为比它自己的屏幕高得多(3 倍),但这当然不是解决方案,因为设备的尺寸会有所不同。 p>
这是按下按钮时运行的代码
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&rel=0&showinfo=0&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)。这是一张图片
如果我将 HTML 的宽度和高度 加倍(屏幕尺寸!) 为 640 像素和 960 像素!?
有人知道 iOS 7 中的 YouTube API 或 Safari 浏览器发生了什么吗?
这是我当前的实现:
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:{onReadynPlayerReady}})}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)
这是在 UIViewController
内部,我将 View Controller 的 view
的框架作为播放器的宽度和高度传递。您应该相应地调整播放器的大小。
关于javascript - 让 HTML5 YouTube 播放器适合 UIWebView,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22283514/
欢迎光临 OStack程序员社区-中国程序员成长平台 (https://ostack.cn/) | Powered by Discuz! X3.4 |