Javascript 让HTML5 YouTube播放器适合UIWebView
我曾经（在iOS 6中）能够“告诉”YouTube播放器它应该伸展到什么宽度和高度，而且没有问题 这段代码以前在iOS 6中可用，但现在在iOS 7中根本不可用 但是现在我必须为高度和宽度输入比屏幕本身高出3倍的值，但这当然不是一个解决方案，因为设备的大小不同 这是按下按钮时运行的代码Javascript 让HTML5 YouTube播放器适合UIWebView,javascript,ios,youtube-api,html5-video,youtube-iframe-api,Javascript,Ios,Youtube Api,Html5 Video,Youtube Iframe Api,我曾经（在iOS 6中）能够“告诉”YouTube播放器它应该伸展到什么宽度和高度，而且没有问题 这段代码以前在iOS 6中可用，但现在在iOS 7中根本不可用 但是现在我必须为高度和宽度输入比屏幕本身高出3倍的值，但这当然不是一个解决方案，因为设备的大小不同 这是按下按钮时运行的代码 NSString *player = @"<!DOCTYPE html> <html> <head><style>body{margin:0px 0px 0px 0
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]];
NSString*player=@”
正文{margin:0px 0px 0px 0px；}
var tag=document.createElement（'script'）；
tag.src=\”http://www.youtube.com/player_api\";
var firstScriptTag=document.getElementsByTagName（'script'）[0]；
firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）；
var播放器；
函数onYouTubePlayerAPIReady（）
{
player=新的YT.player（'player'，{宽度：'%0.0fpx'，高度：'%0.0fpx'，视频ID：'%@'，
playerBars:{playsinline:1，rel:0，showinfo:0}，事件：{'onReady'：onPlayerReady，}）；
}
函数onPlayerReady（event）{event.target.playVideo（）；
}
"; //播放器创建字符串结束
//然后根据屏幕大小创建html
NSString*html=[NSString stringWithFormat:player，[[UIScreen mainScreen]界限].size.width，[[UIScreen mainScreen]界限].size.height，@“5bCRDI1BESc”]；
//然后我将html加载到webview中
[self.webView loadHTMLString:html baseURL:[[NSBundle mainBundle]resourceURL]]；
<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>
body{margin:0px 0px 0px 0px；}
var tag=document.createElement（'script'）；tag.src=”http://www.youtube.com/player_api"; var firstScriptTag=document.getElementsByTagName（'script'）[0]；firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）；
var播放器；函数onYouTubePlayerAPIReady（）{
player=新的YT.player（'player'，{宽度：'320px'，高度：'480px'，
视频ID:'5bCRDI1BESc'，
playerBars:{playsinline:1，rel:0，showinfo:0}，
事件：{'onReady'：onPlayerReady，}）；
}
函数onPlayerReady（event）{event.target.playVideo（）；}
有人知道iOS 7中的YouTube API或Safari浏览器发生了什么吗？我经常使用
UIWebView中的html
YouTube播放器，并使用此代码
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];
NSString*embedHTML=@”\
\
\
身体{\
背景色：透明\
颜色：白色\
}\
\
\
\
";
NSString*url=[NSURL URLWithString:_detailModel.video]；
NSString*html=[NSString stringWithFormat:embedHTML，url]；
nurl=[NSURL URLWithString:html]；
[_videowebviewloadhtmlstring:html baseURL:nil]；
其中的width=\'240\'height=\'150\
是缩略图大小。视频的实际大小默认为整个屏幕。这对于youtube视频来说是完美的，但是任何其他视频（vimeo等）都必须去掉type=\'application/x-shockwave-flash\\
。希望有帮助。
<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>
var tag=document.createElement（'script'）；
tag.src=”http://www.youtube.com/player_api";
var firstScriptTag=document.getElementsByTagName（'script'）[0]；
firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）；
var播放器；
函数onYouTubePlayerAPIReady（）{
player=新的YT.player（'player'{
宽度：'480'，
高度：'280'，
videoId:“Rynveve21y”，
活动：{
“onReady”：onPlayerReady}
});
}
函数onPlayerReady（事件）{
event.target.playVideo（）；
}
尝试使用此脚本，您可以根据自己的要求更改高度和宽度。一些值得思考的地方-YouTube iFrame Api有一些更改，特别是自2012年7月以来
player_api已弃用，并由iFrame_api替代
特别是
tag.src = \"http://www.youtube.com/player_api\";
被替换为
tag.src = "https://www.youtube.com/iframe_api";
及
被替换为
function onYouTubeIframeAPIReady()
它确实指定了这两个参数将在一段时间内得到支持，这使我怀疑您使用的一些参数可能在旧API中不可用，并可能导致您的问题
PlayerBars:{playsinline:1，rel:0，showinfo:0}大约在2014年（旧API被弃用整整2年之后）相对较新
免责声明：我的应用程序的第一个版本有一个嵌入式youtube播放器，但是自从IOS 6.0以来，我发现了m.youtube.com，我发现控件比我一直编写的要好一点，并且我一直坚持使用它。因此，我无法测试这一点，但我相信在你的情况下值得尝试
以下是供您使用的文档摘录：
2012年7月19日
此更新包含以下更改：
“需求”部分已更新，以指示使用IFrame API的任何网页也必须实现OnyOutubeFrameApiReady函数。之前，该部分指示所需函数名为onYouTubePlayerAPIReady。整个文档中的代码示例也已更新为使用新名称
注意：为了确保此更改不会破坏现有的实现，两个名称都可以使用。如果出于某种原因，您的页面具有onYouTubeIframeAPIReady函数和onyoutubeiplayerapiready函数，则将调用这两个函数，并首先调用onYouTubeIframeAPIReady函数
祝您好运UIWebView的默认视口宽度为980。在UIWebView上设置scalePage为：是。这是我当前的实现：
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)
让webView=UIWebView（…）
//获取要播放的视频的ID
让videoID=“zN GGeNPQEg”/https://www.youtube.com/watch?v=zN-根普基格
//在此处替换播放器的高度和宽度，以匹配UIWebView的帧矩形
让嵌入式HTM
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)