ฝังวิดีโอ YouTube ในแอปพลิเคชัน iOS ด้วย YouTube Helper Library

youtube-ios-player-helper เป็นไลบรารีโอเพนซอร์สที่จะช่วยคุณฝังวิดีโอเพลเยอร์ iframe ของ YouTube ลงในแอปพลิเคชัน iOS ไลบรารีจะสร้าง WebView และการเชื่อมโยงระหว่างโค้ด Objective-C ของแอปพลิเคชันกับ โค้ด JavaScript ของวิดีโอเพลเยอร์ YouTube ซึ่งจะช่วยให้แอปพลิเคชัน iOS ควบคุม วิดีโอเพลเยอร์ YouTube ได้ บทความนี้อธิบายขั้นตอนการติดตั้งไลบรารีและเริ่มต้นใช้งาน จากแอปพลิเคชัน iOS

การติดตั้ง

บทความนี้จะถือว่าคุณได้สร้างโปรเจ็กต์ iOS ของแอปพลิเคชัน Single View ใหม่ที่กำหนดเป้าหมายเป็น iOS เวอร์ชันล่าสุด และคุณได้เพิ่มไฟล์ต่อไปนี้เมื่อสร้างโปรเจ็กต์

• Main.storyboard
• ViewController.h
• ViewController.m

คุณสามารถติดตั้งไลบรารีผ่าน CocoaPods หรือโดยการคัดลอกไลบรารี และไฟล์ต้นฉบับจาก หน้า GitHub ของโปรเจ็กต์

• ไลบรารีพร้อมให้ติดตั้งผ่าน CocoaPods หรือคุณจะดาวน์โหลดไลบรารีและไฟล์ต้นฉบับ จากหน้า GitHub ของโปรเจ็กต์แล้วคัดลอกลงในโปรเจ็กต์ที่มีอยู่ ก็ได้

ติดตั้งไลบรารีผ่าน CocoaPods

หากโปรเจ็กต์ใช้ CocoaPods ให้เพิ่มบรรทัดด้านล่างลงใน Podfile เพื่อติดตั้งไลบรารี ในบรรทัดดังกล่าว ให้แทนที่ x.y.z ด้วย Pod เวอร์ชันล่าสุด ซึ่งจะ ระบุไว้ในหน้า GitHub ของโปรเจ็กต์

pod "youtube-ios-player-helper", "~> x.y.z"

ที่พรอมต์บรรทัดคำสั่ง ให้พิมพ์ pod install เพื่ออัปเดตเวิร์กสเปซด้วย ทรัพยากร Dependency

เคล็ดลับ: โปรดทราบว่าเมื่อใช้ CocoaPods คุณต้องเปิดไฟล์ .xcworkspace ใน Xcode ไม่ใช่ไฟล์ .xcodeproj

ดูข้อมูลเพิ่มเติมได้ในบทแนะนำเกี่ยวกับ CocoaPods tutorial

ติดตั้งไลบรารีด้วยตนเอง

หากต้องการติดตั้งไลบรารี Helper ด้วยตนเอง ให้ดาวน์โหลดซอร์สโค้ดผ่าน ลิงก์ดาวน์โหลดของ GitHub หรือ โคลนที่เก็บ เมื่อมีสำเนาโค้ดในเครื่องแล้ว ให้ทำตามขั้นตอนต่อไปนี้

1. เปิดโปรเจ็กต์ตัวอย่างใน Xcode หรือ Finder

2. เลือก YTPlayerView.h, YTPlayerView.m และโฟลเดอร์ ชิ้นงาน หากเปิดเวิร์กสเปซใน Xcode ไฟล์เหล่านี้จะอยู่ใน Pods -> Development Pods -> YouTube-Player-iOS-Helper และ Pods -> Development Pods -> YouTube-Player-iOS-Helper -> Resources ใน Finder, ไฟล์เหล่านี้จะอยู่ในไดเรกทอรีรากของโปรเจ็กต์ในไดเรกทอรี Classes และ Assets

3. ลากไฟล์และโฟลเดอร์เหล่านี้ลงในโปรเจ็กต์ ตรวจสอบว่าได้เลือกตัวเลือกคัดลอกรายการลงใน โฟลเดอร์ของกลุ่มปลายทาง เมื่อลากโฟลเดอร์ชิ้นงาน ให้ ตรวจสอบว่าได้เลือกตัวเลือกสร้างการอ้างอิงโฟลเดอร์สำหรับโฟลเดอร์ที่เพิ่ม

ตอนนี้ไลบรารีควรติดตั้งเรียบร้อยแล้ว

เพิ่ม YTPlayerView ผ่าน Interface Builder หรือ Storyboard

วิธีเพิ่ม YTPlayerView ผ่าน Interface Builder หรือ Storyboard

1. ลากอินสแตนซ์ UIView ลงในมุมมอง

2. เลือก Identity Inspector แล้วเปลี่ยนคลาสของมุมมองเป็น YTPlayerView.

3. เปิด ViewController.h แล้วเพิ่มส่วนหัวต่อไปนี้

   #import “YTPlayerView.h”

   นอกจากนี้ ให้เพิ่มพร็อพเพอร์ตี้ต่อไปนี้ด้วย

   @property(nonatomic, strong) IBOutlet YTPlayerView *playerView;

4. ใน Interface Builder ให้สร้างการเชื่อมต่อจากองค์ประกอบมุมมองที่คุณกำหนดไว้ใน ขั้นตอนก่อนหน้าไปยังพร็อพเพอร์ตี้ playerView ของ View Controller

5. ตอนนี้ให้เปิด ViewController.m แล้วเพิ่มโค้ดต่อไปนี้ที่ส่วนท้ายของ viewDidLoad เมธอด:

   [self.playerView loadWithVideoId:@"M7lc1UVf-VE"];

สร้างและเรียกใช้แอปพลิเคชัน เมื่อภาพปกวิดีโอโหลดแล้ว ให้แตะภาพปกวิดีโอเพื่อเปิดวิดีโอเพลเยอร์แบบเต็มหน้าจอ

ควบคุมการเล่นวิดีโอ

เมธอด ViewController::loadWithVideoId: มีตัวแปร loadWithVideoId:playerVars: ที่ช่วยให้นักพัฒนาแอปส่งตัวแปรวิดีโอเพลเยอร์เพิ่มเติมไปยังมุมมองได้ ตัวแปรวิดีโอเพลเยอร์เหล่านี้สอดคล้องกับ พารามิเตอร์วิดีโอเพลเยอร์ใน IFrame Player API พารามิเตอร์ playsinline ช่วยให้วิดีโอเล่น ในมุมมองได้โดยตรงแทนที่จะเล่นแบบเต็มหน้าจอ เมื่อวิดีโอเล่นแบบอินไลน์ แอปพลิเคชัน iOS ที่มีวิดีโอจะควบคุมการเล่นได้โดยโปรแกรม

แทนที่การเรียก loadWithVideoId: ด้วยโค้ดนี้

NSDictionary *playerVars = @{
  @"playsinline" : @1,
};
[self.playerView loadWithVideoId:@"M7lc1UVf-VE" playerVars:playerVars];

เปิด Storyboard หรือ Interface Builder ลากปุ่ม 2 ปุ่มลงในมุมมอง แล้วติดป้ายกำกับว่า เล่น และ หยุด เปิด ViewController.h แล้วเพิ่มเมธอดต่อไปนี้ ซึ่ง จะแมปกับปุ่ม

- (IBAction)playVideo:(id)sender;
- (IBAction)stopVideo:(id)sender;

ตอนนี้ให้เปิด ViewController.m แล้วกำหนดฟังก์ชัน 2 ฟังก์ชันนี้

- (IBAction)playVideo:(id)sender {
  [self.playerView playVideo];
}

- (IBAction)stopVideo:(id)sender {
  [self.playerView stopVideo];
}

ฟังก์ชันส่วนใหญ่ของ IFrame Player API มีฟังก์ชันเทียบเท่าใน Objective-C แม้ว่าชื่อบางฟังก์ชันอาจแตกต่างกันเล็กน้อยเพื่อให้สอดคล้องกับหลักเกณฑ์การเขียนโค้ด Objective-C มากขึ้น ข้อยกเว้นที่สำคัญคือเมธอดที่ควบคุมระดับเสียงของวิดีโอ เนื่องจากเมธอดเหล่านี้ควบคุมโดยฮาร์ดแวร์ของโทรศัพท์หรืออินสแตนซ์ UIView ในตัวที่ออกแบบมาเพื่อวัตถุประสงค์นี้ เช่น MPVolumeView

เปิด Storyboard หรือ Interface Builder แล้วลากปุ่มเล่น และ หยุด โดยกดปุ่มควบคุมค้างไว้เพื่อเชื่อมต่อกับเมธอด playVideo: และ stopVideo:

ตอนนี้ให้สร้างและเรียกใช้แอปพลิเคชัน เมื่อภาพปกวิดีโอโหลดแล้ว คุณควรจะเล่นและหยุดวิดีโอได้โดยใช้ตัวควบคุมดั้งเดิมนอกเหนือจากตัวควบคุมวิดีโอเพลเยอร์

จัดการการเรียกกลับของวิดีโอเพลเยอร์

การจัดการเหตุการณ์การเล่นโดยโปรแกรม เช่น การเปลี่ยนแปลงสถานะการเล่น และข้อผิดพลาดในการเล่น อาจมีประโยชน์ ใน JavaScript API จะดำเนินการนี้ด้วย Listener เหตุการณ์. ใน Objective-C จะดำเนินการนี้ด้วย Delegate.

โค้ดต่อไปนี้แสดงวิธีอัปเดตการประกาศอินเทอร์เฟซใน ViewController.h เพื่อให้คลาสเป็นไปตามโปรโตคอล Delegate เปลี่ยนการประกาศอินเทอร์เฟซของ ViewController.h ดังนี้

@interface ViewController : UIViewController<YTPlayerViewDelegate>

YTPlayerViewDelegate เป็นโปรโตคอลสำหรับการจัดการเหตุการณ์การเล่นในวิดีโอเพลเยอร์ หากต้องการอัปเดต ViewController.m เพื่อจัดการเหตุการณ์บางอย่าง คุณต้องตั้งค่า อินสแตนซ์ ViewController เป็น Delegate ของอินสแตนซ์ YTPlayerView หากต้องการทำการเปลี่ยนแปลงนี้ ให้เพิ่มบรรทัดต่อไปนี้ลงในเมธอด viewDidLoad ใน ViewController.h.

self.playerView.delegate = self;

ตอนนี้ให้เพิ่มเมธอดต่อไปนี้ลงใน ViewController.m

- (void)playerView:(YTPlayerView *)playerView didChangeToState:(YTPlayerState)state {
  switch (state) {
    case kYTPlayerStatePlaying:
      NSLog(@"Started playback");
      break;
    case kYTPlayerStatePaused:
      NSLog(@"Paused playback");
      break;
    default:
      break;
  }
}

สร้างและเรียกใช้แอปพลิเคชัน ดูเอาต์พุตบันทึกใน Xcode เมื่อสถานะวิดีโอเพลเยอร์เปลี่ยนแปลง คุณควรเห็นข้อมูลอัปเดตเมื่อวิดีโอเล่นหรือหยุด

ไลบรารีมีค่าคงที่ที่ขึ้นต้นด้วยคำนำหน้า kYT* เพื่อ ความสะดวกและความสามารถในการอ่าน ดูรายการค่าคงที่ทั้งหมดได้ที่ YTPlayerView.m.

แนวทางปฏิบัติแนะนำและข้อจำกัด

ไลบรารีสร้างขึ้นจาก IFrame Player API โดยการสร้าง WebView และ แสดงผล HTML และ JavaScript ที่จำเป็นสำหรับวิดีโอเพลเยอร์พื้นฐาน เป้าหมายของไลบรารีคือการใช้งานง่ายที่สุดเท่าที่จะเป็นไปได้ โดยการรวมเมธอดที่นักพัฒนาแอปต้องเขียนบ่อยๆ ไว้ในแพ็กเกจ มีข้อจำกัดบางประการที่ควรทราบดังนี้

• ไลบรารีไม่รองรับการเล่นวิดีโอพร้อมกันในอินสแตนซ์หลายรายการ YTPlayerView หากแอปพลิเคชันมีอินสแตนซ์ YTPlayerViewหลายรายการ แนวทางปฏิบัติแนะนำคือการหยุดชั่วคราวหรือหยุด การเล่นในอินสแตนซ์ที่มีอยู่ก่อนที่จะเริ่มการเล่นในอินสแตนซ์อื่น ในแอปพลิเคชันตัวอย่างที่มาพร้อมกับโปรเจ็กต์ ViewControllers จะใช้ NSNotificationCenter เพื่อส่งการแจ้งเตือนว่าการเล่นกำลังจะเริ่มขึ้น ViewControllers อื่นๆ จะได้รับการแจ้งเตือนและจะหยุดการเล่นชั่วคราวใน YTPlayerView อินสแตนซ์
• ใช้ซ้ำอินสแตนซ์ YTPlayerView ที่โหลดไว้แล้วเมื่อเป็นไปได้ เมื่อต้องเปลี่ยนวิดีโอในมุมมอง อย่าสร้างอินสแตนซ์ UIView ใหม่หรืออินสแตนซ์ YTPlayerView ใหม่ และอย่าเรียก loadVideoId: หรือ loadPlaylistId: แต่ให้ใช้ฟังก์ชันตระกูล cueVideoById:startSeconds: ซึ่งจะไม่โหลด WebView ใหม่ การโหลดวิดีโอเพลเยอร์ IFrame ทั้งหมด จะใช้เวลานานพอสมควร
• วิดีโอเพลเยอร์นี้ไม่สามารถเล่นวิดีโอส่วนตัว แต่เล่นวิดีโอที่ไม่เป็นสาธารณะได้ เนื่องจากไลบรารีนี้เป็น Wrapper ของวิดีโอเพลเยอร์ iframe ที่มีอยู่ ลักษณะการทำงานของวิดีโอเพลเยอร์จึงควรเกือบจะเหมือนกับวิดีโอเพลเยอร์ที่ฝังอยู่ในหน้าเว็บในเบราว์เซอร์บนมือถือ

การมีส่วนร่วม

เนื่องจากเป็นโปรเจ็กต์โอเพนซอร์ส โปรดส่งการแก้ไขและการปรับปรุงไปยัง Branch หลักของโปรเจ็กต์ GitHub