将 YouTube 视频嵌入到

Posted

技术标签:

【中文标题】将 YouTube 视频嵌入到【英文标题】:Embedding YouTube videos on 【发布时间】:2011-07-04 07:24:15 【问题描述】:

我通过在 Internet 上找到的 sn-p 嵌入了来自 YouTube 的视频,这是我使用的代码:

    @interface FirstViewController (Private)
- (void)embedYouTube:(NSString *)urlString frame:(CGRect)frame;
@end


@implementation FirstViewController

- (void)viewDidLoad 
    [super viewDidLoad];

    [self embedYouTube:@"http://www.youtube.com/watch?v=l3Iwh5hqbyE" frame:CGRectMake(20, 20, 100, 100)];



- (void)embedYouTube:(NSString *)urlString frame:(CGRect)frame 
    NSString *embedhtml = @"\
    <html><head>\
    <style type=\"text/css\">\
    body \
    background-color: transparent;\
    color: white;\
    \
    </style>\
    </head><body style=\"margin:0\">\
    <embed id=\"yt\" src=\"%@\" type=\"application/x-shockwave-flash\" \
    width=\"%0.0f\" height=\"%0.0f\"></embed>\
    </body></html>";
    NSString *html = [NSString stringWithFormat:embedHTML, urlString, frame.size.width, frame.size.height];
    UIWebView *videoView = [[UIWebView alloc] initWithFrame:frame];
    [videoView loadHTMLString:html baseURL:nil];
    [self.view addSubview:videoView];
    [videoView release];



- (void)didReceiveMemoryWarning 
    // Releases the view if it doesn't have a superview.
    [super didReceiveMemoryWarning];

    // Release any cached data, images, etc that aren't in use.


- (void)viewDidUnload 
    // Release any retained subviews of the main view.
    // e.g. self.myOutlet = nil;



- (void)dealloc 
    [super dealloc];


@end

它编译正确,当我打开它时,我看到一个位置不正确的白框,这是代码创建的。我有两个问题:

    我怎么知道视频是否会播放,它只是一个普通的白框,模拟器会播放 YouTube 上的视频吗?

    如何定位此框?

【问题讨论】:

这段代码在 ios 6 中有效吗? 【参考方案1】:

斯威夫特 4

func embedYouTube(_ urlString: String, frame: CGRect)

    let html = "<html><head><style type='text/css'>body background-color: transparent;color: white;</style></head><body style='margin:0'><iframe width='\(frame.size.width)' height='\(frame.size.height)' src='\(urlString)' frameborder='0' allowfullscreen></iframe></body></html>"
    let videoView = UIWebView(frame: frame)
    videoView.loadHTMLString(html, baseURL: nil)
    view.addSubview(videoView)

【讨论】:

【参考方案2】:

快速实现:

let webView = UIWebView(frame: self.view.frame) // Position your player frame here

self.view.addSubview(webView)
self.view.bringSubviewToFront(webView)

// Playback options: play in-line and start playing immediately
webView.allowsInlineMediaPlayback = true
webView.mediaPlaybackRequiresUserAction = false

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

// Set up your player
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 the HTML into your UIWebView
webView.loadHTMLString(embededHTML, baseURL: NSBundle.mainBundle().bundleURL)

另外,YouTube 提供了一个很棒的 helper class 供开发者在他们的 iOS 中设置 YouTube 播放,这为你设置了 UIWebView

【讨论】:

【参考方案3】:

这是示例代码,它在 iOS 5 及更高版本上运行良好,这是 Youtube API 提供的新实现,myWeb 是这里的 UIWebView。 URL 中的showinfo=0 将删除 videoView 中的顶部标题。

NSString *html = [NSString stringWithFormat:@"<html><body><iframe class=\"youtube-player\" type=\"text/html\" width=\"%f\" height=\"%f\" src=\"http://www.youtube.com/embed/q1091sWVCMI?HD=1;rel=0;showinfo=0\" allowfullscreen frameborder=\"0\" rel=nofollow></iframe></body></html>",frame.size.width,frame.size.height];
[myWeb loadHTMLString:html baseURL:nil];

希望对你有帮助:)

【讨论】:

【参考方案4】:

这是一个适用于 iOS 6 并使用新的 YouTube 嵌入代码的版本:

- (void)embedYouTube:(NSString *)urlString frame:(CGRect)frame 
    NSString *html = [NSString stringWithFormat:@"<html><head><style type='text/css'>body background-color: transparent;color: white;</style></head><body style='margin:0'><iframe width='%f' height='%f' src='%@' frameborder='0' allowfullscreen></iframe></body></html>", frame.size.width, frame.size.height, urlString];
    UIWebView *videoView = [[UIWebView alloc] initWithFrame:frame];
    [videoView loadHTMLString:html baseURL:nil];
    [self.view addSubview:videoView];

【讨论】:

可以在将电影加载到 webview 后自动播放吗? 我不再使用此代码,所以我不确定。你试过了吗?如果它没有自动播放,我不会感到惊讶。我现在只是在加载一个外部 mp4 视频,效果很好。【参考方案5】:

对于那些使用 Monotouch 和 C# 的人,您可以将此类添加到您的项目中并使用它来查看您的视频:

public class YouTubeViewer : UIWebView

    public YouTubeViewer(string url, RectangleF frame)
    
        string youTubeVideoHTML = @"<object 1"" 2""><param name=""movie""
                            value=""0""></param><embed
                            src=""0"" type=""application/x-shockwave-flash"" 
                            1"" 2""</embed></object>"; 

        string html = string.Format(youTubeVideoHTML, url, frame.Size.Width, frame.Size.Height);
        this.LoadHtmlString(html, null);
        this.Frame = frame;
    

确保您传递的 URL 是您单击“共享”按钮时 Youtube 提供的嵌入代码中的 URL。 (并检查旧代码的复选框)

【讨论】:

问题是针对 iOS 的 @NSCoder,这个答案适用于 iOS,Monotouch 是由一家名为 Xamarin 的公司提供的软件,它允许在 C# 中开发原生 iOS 应用程序,而不是现在已弃用的 Objective-c。 (斯威夫特)【参考方案6】:

刚刚测试了你的代码,它在 iPhone 上运行良好,但 iOS 模拟器不支持 Youtube 视频,所以你需要一个真实的设备进行测试。

如何定位这个盒子?

您已经在这一行传递了框的 X (20)、Y(20)、width(100) 和 height(100):

[self embedYouTube:@"http://..." frame:CGRectMake(20, 20, 100, 100)];

之后要改变视图的位置,你可以修改它的 center 属性:

videoView.center = CGPointMake(200, 100 );

【讨论】:

对此的补充说明,如果您在模态视图中执行此操作,当视频结束时,我的应用程序会出现奇怪的行为,它会关闭模态视图并且 UIButtons 无响应。一旦我将它从模态视图中拉出来,它就可以正常工作了。 您好,我遇到了同样的问题,现在我成功在设备中播放视频,但是如果我想在 ios 版本 5.1 以下播放视频,还有另一个问题是视频只能在 ios 版本 5.1.1 中播放.1 我该怎么办? 嗨,我正在使用上面的代码播放视频。它非常适合播放视频,但是当我暂停视频回到应用程序时它会崩溃。给 EXC_BAD_ACCESS。对此有任何想法。

以上是关于将 YouTube 视频嵌入到的主要内容,如果未能解决你的问题,请参考以下文章

如何将所有 Youtube 频道视频嵌入网站..?

将 Youtube 视频嵌入 Facebook 并以特定时间码播放

将 Youtube 视频嵌入到 WebView(Appcelerator)不显示(黑屏)

jScrollPane + 嵌入式 Youtube 视频悬停

将嵌入式 YouTube 视频时间戳同步到自定义进度条

如何将占位符图像添加到嵌入的 Vimeo 和 Youtube 视频中?