Google sử dụng công nghệ AI để dịch nội dung sang ngôn ngữ bạn ưu tiên. Bản dịch bằng AI có thể có lỗi.

Nhúng video trên YouTube vào các ứng dụng iOS bằng Thư viện trợ giúp của YouTube

youtube-ios-player-helper là một thư viện nguồn mở giúp bạn nhúng trình phát iframe của YouTube vào một ứng dụng iOS. Thư viện này tạo ra một WebView và một cầu nối giữa mã Objective-C của ứng dụng và mã JavaScript của trình phát YouTube, nhờ đó cho phép ứng dụng iOS điều khiển trình phát YouTube. Bài viết này mô tả các bước cài đặt thư viện và bắt đầu sử dụng thư viện từ ứng dụng iOS của bạn.

Cài đặt

Bài viết này giả định rằng bạn đã tạo một dự án iOS mới cho Ứng dụng một khung hiển thị nhắm đến phiên bản iOS mới nhất và bạn thêm các tệp sau khi tạo dự án:

Main.storyboard
ViewController.h
ViewController.m

Bạn có thể cài đặt thư viện thông qua CocoaPods hoặc bằng cách sao chép thư viện và các tệp nguồn từ trang GitHub của dự án.

Bạn có thể cài đặt thư viện thông qua CocoaPods. Ngoài ra, bạn có thể truy cập vào thư viện và tệp nguồn thông qua trang GitHub của dự án và sao chép vào một dự án hiện có.

Cài đặt thư viện qua CocoaPods

Nếu dự án của bạn sử dụng CocoaPods, hãy thêm dòng bên dưới vào Podfile để cài đặt thư viện. Trong dòng đó, hãy thay thế x.y.z bằng phiên bản pod mới nhất. Phiên bản này sẽ được xác định trên trang GitHub của dự án.

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

Tại dấu nhắc dòng lệnh, hãy nhập pod install để cập nhật không gian làm việc của bạn bằng các phần phụ thuộc.

Mẹo: Hãy nhớ rằng khi sử dụng CocoaPods, bạn phải mở tệp .xcworkspace trong Xcode, chứ không phải tệp .xcodeproj.

Hãy xem hướng dẫn về CocoaPods để tìm hiểu thêm.

Cài đặt thư viện theo cách thủ công

Để cài đặt thư viện trợ giúp theo cách thủ công, hãy tải nguồn xuống qua đường liên kết để tải xuống của GitHub hoặc sao chép kho lưu trữ. Sau khi bạn có bản sao cục bộ của mã, hãy làm theo các bước sau:

Mở dự án mẫu trong Xcode hoặc Finder.
Chọn YTPlayerView.h, YTPlayerView.m và thư mục Tài sản. Nếu bạn mở không gian làm việc trong Xcode, các tệp này sẽ có trong Pods -> Development Pods -> YouTube-Player-iOS-Helper và Pods -> Development Pods -> YouTube-Player-iOS-Helper -> Resources. Trong Finder, các tệp này có trong thư mục gốc của dự án trong thư mục Classes và Assets.
Kéo các tệp và thư mục này vào dự án của bạn. Đảm bảo bạn đã đánh dấu vào lựa chọn Sao chép các mục vào thư mục của nhóm đích. Khi kéo thư mục Tài sản, hãy đảm bảo rằng bạn đã chọn mục Create Folder References for any added folders (Tạo tệp đối chiếu thư mục cho mọi thư mục đã thêm).

Thư viện hiện đã được cài đặt.

Thêm `YTPlayerView` thông qua Trình tạo giao diện hoặc Bảng phân cảnh

Cách thêm YTPlayerView thông qua Trình tạo giao diện hoặc Bảng phân cảnh:

Kéo một thực thể UIView vào Khung hiển thị của bạn.
Chọn Identity Inspector (Trình kiểm tra danh tính) rồi thay đổi lớp của khung hiển thị thành YTPlayerView.

Mở ViewController.h và thêm tiêu đề sau:

#import “YTPlayerView.h”

Ngoài ra, hãy thêm thuộc tính sau:

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

Trong Trình tạo giao diện, hãy tạo một kết nối từ phần tử Chế độ xem mà bạn đã xác định ở bước trước đến thuộc tính playerView của Trình điều khiển chế độ xem.
Bây giờ, hãy mở ViewController.m rồi thêm đoạn mã sau vào cuối phương thức viewDidLoad:
```
[self.playerView loadWithVideoId:@"M7lc1UVf-VE"];
```

Tạo bản dựng và chạy ứng dụng của bạn. Khi hình thu nhỏ video tải xong, hãy nhấn vào hình thu nhỏ video để khởi chạy trình phát video toàn màn hình.

Điều khiển chế độ phát video

Phương thức ViewController::loadWithVideoId: có một biến thể, loadWithVideoId:playerVars:, cho phép nhà phát triển truyền thêm các biến trình phát vào khung hiển thị. Các biến trình phát này tương ứng với tham số trình phát trong API Trình phát IFrame. Tham số playsinline cho phép video phát trực tiếp trong khung hiển thị thay vì phát ở chế độ toàn màn hình. Khi một video đang phát trực tuyến, ứng dụng iOS chứa video đó có thể điều khiển chế độ phát theo cách lập trình.

Thay thế lệnh gọi loadWithVideoId: bằng đoạn mã sau:

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

Mở bảng phân cảnh hoặc Trình tạo giao diện. Kéo hai nút vào Chế độ xem, gắn nhãn cho các nút đó là Play (Phát) và Stop (Dừng). Mở ViewController.h rồi thêm các phương thức này. Các phương thức này sẽ được liên kết với các nút:

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

Bây giờ, hãy mở ViewController.m rồi xác định 2 hàm này:

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

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

Hầu hết các hàm của API Trình phát IFrame đều có hàm Objective-C tương đương, mặc dù một số cách đặt tên có thể hơi khác để phù hợp hơn với nguyên tắc lập trình Objective-C. Các trường hợp ngoại lệ đáng chú ý là các phương thức kiểm soát âm lượng của video, vì các phương thức này được kiểm soát bằng phần cứng điện thoại hoặc bằng các thực thể UIView tích hợp sẵn được thiết kế cho mục đích này, chẳng hạn như MPVolumeView.

Mở bảng phân cảnh hoặc Trình tạo giao diện rồi kéo thả để kết nối các nút Play (Phát) và Stop (Dừng) với các phương thức playVideo: và stopVideo:.

Bây giờ, hãy tạo bản dựng và chạy ứng dụng. Sau khi hình thu nhỏ video tải xong, bạn có thể phát và dừng video bằng các nút điều khiển gốc ngoài các nút điều khiển trình phát.

Xử lý lệnh gọi lại của trình phát

Bạn có thể xử lý các sự kiện phát theo phương thức lập trình, chẳng hạn như thay đổi trạng thái phát và lỗi phát. Trong JavaScript API, việc này được thực hiện bằng trình nghe sự kiện. Trong Objective-C,việc này được thực hiện bằng một delegate.

Đoạn mã sau đây cho biết cách cập nhật nội dung khai báo giao diện trong ViewController.h để lớp tuân thủ giao thức uỷ quyền. Thay đổi nội dung khai báo giao diện của ViewController.h như sau:

@interface ViewController : UIViewController<YTPlayerViewDelegate>

YTPlayerViewDelegate là một giao thức để xử lý các sự kiện phát trong trình phát. Để cập nhật ViewController.m nhằm xử lý một số sự kiện, trước tiên, bạn cần đặt thực thể ViewController làm thực thể uỷ quyền của thực thể YTPlayerView. Để thực hiện thay đổi này, hãy thêm dòng sau vào phương thức viewDidLoad trong ViewController.h.

self.playerView.delegate = self;

Bây giờ, hãy thêm phương thức sau vào 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;
  }
}

Tạo bản dựng và chạy ứng dụng. Xem kết quả nhật ký trong Xcode khi trạng thái trình phát thay đổi. Bạn sẽ thấy thông tin cập nhật khi video được phát hoặc dừng.

Thư viện này cung cấp các hằng số bắt đầu bằng tiền tố kYT* để thuận tiện và dễ đọc. Để xem danh sách đầy đủ các hằng số này, hãy xem YTPlayerView.m.

Các phương pháp hay nhất và giới hạn

Thư viện này được xây dựng dựa trên API Trình phát IFrame bằng cách tạo một WebView và kết xuất HTML cũng như JavaScript cần thiết cho một trình phát cơ bản. Mục tiêu của thư viện là dễ sử dụng nhất có thể, gói các phương thức mà nhà phát triển thường phải viết vào một gói. Có một số điểm hạn chế cần lưu ý:

Thư viện không hỗ trợ phát video đồng thời trong nhiều thực thể YTPlayerView. Nếu ứng dụng của bạn có nhiều thực thể YTPlayerView, thì phương pháp hay nhất là tạm dừng hoặc dừng phát trong mọi thực thể hiện có trước khi bắt đầu phát trong một thực thể khác. Trong ứng dụng mẫu đi kèm với dự án, ViewControllers sử dụng NSNotificationCenter để gửi thông báo rằng quá trình phát sắp bắt đầu. Các ViewController khác sẽ nhận được thông báo và tạm dừng phát trong các phiên bản YTPlayerView của chúng.
Sử dụng lại các thực thể YTPlayerView hiện có đã tải khi có thể. Khi cần thay đổi video trong Chế độ xem, đừng tạo một thực thể UIView mới hoặc một thực thể YTPlayerView mới, đồng thời đừng gọi loadVideoId: hoặc loadPlaylistId:. Thay vào đó, hãy sử dụng họ hàm cueVideoById:startSeconds:. Họ hàm này không tải lại WebView. Có một độ trễ đáng kể khi tải toàn bộ trình phát IFrame.
Trình phát này không phát được video riêng tư, nhưng có thể phát video không công khai. Vì thư viện này bao bọc trình phát iframe hiện có, nên hành vi của trình phát gần như giống với hành vi của trình phát được nhúng trên trang web trong trình duyệt di động.

Đóng góp

Vì đây là một dự án nguồn mở, vui lòng gửi các bản sửa lỗi và cải tiến cho nhánh chính của dự án GitHub.

Nhúng video trên YouTube vào các ứng dụng iOS bằng Thư viện trợ giúp của YouTube Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.