ฝังวิดีโอ YouTube ในแอปพลิเคชัน iOS ด้วยไลบรารีผู้ช่วยของ YouTube

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

การติดตั้ง

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

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

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

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

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

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

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

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

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

ดูข้อมูลเพิ่มเติมได้ที่บทแนะนําของ CocoaPods

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

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

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

2. เลือก YTPlayerView.h, YTPlayerView.m และโฟลเดอร์ชิ้นงาน หากคุณเปิดพื้นที่ทํางานใน Xcode ฟังก์ชันเหล่านี้จะอยู่ในพ็อด -> พ็อดการพัฒนา -> YouTube-Player-iOS-Helper และพ็อด -> พ็อดการพัฒนา -> YouTube-Player-iOS-Helper -> ทรัพยากร ใน Finder รายการเหล่านี้จะมีอยู่ในไดเรกทอรีรากของโปรเจ็กต์ในไดเรกทอรีชั้นเรียนและเนื้อหา

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

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

เพิ่ม YTPlayerView ผ่านเครื่องมือสร้างอินเทอร์เฟซหรือสตอรีบอร์ด

วิธีเพิ่ม YTPlayerView ผ่านเครื่องมือสร้างอินเทอร์เฟซหรือสตอรีบอร์ด

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

2. เลือกเครื่องมือตรวจสอบข้อมูลประจําตัวและเปลี่ยนคลาสของมุมมองเป็น YTPlayerView

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

   #import “YTPlayerView.h”

   และเพิ่มพร็อพเพอร์ตี้ต่อไปนี้ด้วย

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

4. ในเครื่องมือสร้างอินเทอร์เฟซ ให้สร้างการเชื่อมต่อจากองค์ประกอบข้อมูลพร็อพเพอร์ตี้ที่คุณกําหนดในขั้นตอนก่อนหน้าไปยังพร็อพเพอร์ตี้ playerView ของตัวควบคุมการดู

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];

เปิดสตอรีบอร์ดหรือเครื่องมือสร้างอินเทอร์เฟซ ลากปุ่ม 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

เปิดสตอรีบอร์ดหรือเครื่องมือสร้างอินเทอร์เฟซแล้วลากตัวควบคุมเพื่อเชื่อมต่อปุ่มเล่นและหยุดกับเมธอด playVideo: และ stopVideo:

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

จัดการโค้ดเรียกกลับของผู้เล่น

ซึ่งมีประโยชน์ในการจัดการเหตุการณ์การเล่นแบบเป็นโปรแกรม เช่น การเปลี่ยนแปลงสถานะการเล่นและข้อผิดพลาดในการเล่น ใน JavaScript API คุณจะดําเนินการได้ด้วยตัวฟังเหตุการณ์ ใน Objective-C ขั้นตอนนี้ทําด้วยการมอบสิทธิ์

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

@interface ViewController : UIViewController<YTPlayerViewDelegate>

YTPlayerViewDelegate เป็นโปรโตคอลสําหรับจัดการเหตุการณ์การเล่นในโปรแกรมเล่น หากต้องการอัปเดต ViewController.m เพื่อจัดการเหตุการณ์บางรายการ คุณต้องตั้งค่าอินสแตนซ์ ViewController เป็นผู้รับมอบสิทธิ์ของอินสแตนซ์ 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 หลายรายการ แนวทางปฏิบัติแนะนําคือหยุดชั่วคราวหรือหยุดการเล่นในอินสแตนซ์ที่มีอยู่ก่อนเริ่มเล่นในอินสแตนซ์อื่น ในแอปพลิเคชันตัวอย่างที่จัดส่งด้วยโปรเจ็กต์ ViewController จะใช้ NSNotificationCenter เพื่อส่งการแจ้งเตือนว่าการเล่นใกล้จะเริ่มขึ้น ตัวควบคุม View อื่นๆ จะได้รับการแจ้งเตือนและจะหยุดเล่นชั่วคราวในอินสแตนซ์ YTPlayerView ของตน
• นําอินสแตนซ์ YTPlayerView รายการที่มีอยู่มาใช้ซ้ํา หากเป็นไปได้ เมื่อจําเป็นต้องเปลี่ยนวิดีโอในข้อมูลพร็อพเพอร์ตี้ อย่าสร้างอินสแตนซ์ UIView ใหม่หรืออินสแตนซ์ YTPlayerView ใหม่ และอย่าเรียก loadVideoId: หรือ loadPlaylistId: แต่ให้ใช้กลุ่มฟังก์ชัน cueVideoById:startSeconds: แทน ซึ่งจะไม่โหลด WebView ซ้ํา เกิดความล่าช้าอย่างมากเมื่อโหลดโปรแกรมเล่น iframe ทั้งหมด
• โปรแกรมเล่นนี้ไม่สามารถเล่นวิดีโอส่วนตัว แต่จะเล่นวิดีโอที่ไม่เป็นสาธารณะได้ เนื่องจากไลบรารีนี้รวมโปรแกรมเล่น iframe ที่มีอยู่ ลักษณะการทํางานของโปรแกรมเล่นจึงน่าจะเกือบเหมือนกับของโปรแกรมเล่นที่ฝังอยู่ในหน้าเว็บในเบราว์เซอร์บนอุปกรณ์เคลื่อนที่

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

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