Trang này được dịch bởi Cloud Translation API.

Nhúng video trên YouTube trong ứng dụng iOS bằng Thư viện trợ giúp 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 ứng dụng iOS. Thư viện sẽ tạo WebView và là cầu nối giữa mã Objective-C của ứng dụng với mã JavaScript của trình phát YouTube, qua đó cho phép ứng dụng iOS kiểm soát 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 đó trong ứng dụng iOS.

Cài đặt

Bài viết này giả định bạn đã tạo một dự án iOS duy nhất cho Ứng dụng Chế độ xem đơn nhắm đến phiên bản iOS mới nhất và bạn cũng thêm các tệp sau đây 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 này qua CocoaPods. Ngoài ra, thư viện và các tệp nguồn có sẵn thông qua trang GitHub của dự án và có thể được 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 nhóm mới nhất sẽ được xác định trên trang GitHub của dự án.

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

Khi được nhắc dòng lệnh, hãy nhập pod install để cập nhật không gian làm việc bằng các phần phụ thuộc.

Lưu ý: 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 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 Assets (Tài sản). Nếu bạn mở không gian làm việc trong Xcode, những không gian làm việc này sẽ có trong Pods -> Development Pods -> YouTube-Player-iOS-Helper và Pods -> Development Pods -> YouTube-Player-iOS-Helper -> Resources. Trong Finder (Trình tìm kiếm), các tệp này có trong thư mục gốc của dự án trong thư mục Classes (Lớp) và Assets (Tài sản).
Kéo các tệp và thư mục này vào dự án của bạn. Đảm bảo rằng bạn đã đánh dấu chọn tuỳ chọn Sao chép các mục vào thư mục của nhóm đích đến. Khi kéo thư mục Assets (Thành phần), hãy nhớ đánh dấu vào tuỳ chọn Create Folder Reference for any added directory (Tạo tệp tham 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 Chế độ xem của bạn.
Chọn Trình kiểm tra danh tính và thay đổi lớp thành phần 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 với thuộc tính playerView của Trình điều khiển chế độ xem.
Bây giờ, hãy mở ViewController.m và thêm 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 hình thu nhỏ của video tải, hãy nhấn vào hình thu nhỏ video để 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ể là loadWithVideoId:playerVars: cho phép các nhà phát triển chuyển thêm biến biến người chơi vào thành phần hiển thị. Các biến trình phát này tương ứng với các thông số về trình phát trong API IFrame Player. Tham số playsinline cho phép video phát trực tiếp trong thành phần hiển thị thay vì phát toàn màn hình. Khi video đang phát tại chỗ, ứng dụng chứa iOS có thể được lập trình để điều khiển chế độ phát.

Thay thế lệnh gọi loadWithVideoId: bằng 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 của bạn, gắn nhãn đó là Phát và Dừng. Mở ViewController.h và thêm các phương thức sau đây để 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 và xác định hai hàm này:

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

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

Hầu hết chức năng API Trình phát IFrame đều có các tham số tương đương Objective-C, mặc dù một số tên gọi có thể hơi khác một chút để phù hợp hơn với các nguyên tắc lập trình Objective-C. Đáng chú ý là các trường hợp ngoại lệ là các phương thức kiểm soát âm lượng của video, vì các phần tử này chịu sự kiểm soát của phần cứng điện thoại hoặc được tích hợp sẵn các thực thể UIView nhằm 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 và kéo-kéo để kết nối nút Phát và Dừng với phương thức playVideo: và stopVideo:.

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

Xử lý lệnh gọi lại của người chơi

Việc này có thể giúp bạn xử lý các sự kiện phát theo phương thức lập trình, chẳng hạn như các thay đổi về trạng thái phát và lỗi phát. Trong API JavaScript, 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 đại biểu.

Mã sau đây cho biết cách cập nhật phần khai báo giao diện trong ViewController.h để lớp tuân thủ giao thức uỷ quyền. Thay đổi phần 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 giá trị cho thực thể ViewController làm thực thể đại diệ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 và chạy ứng dụng Xem kết quả nhật ký trong Xcode khi trạng thái của người chơi thay đổi. Bạn sẽ nhìn thấy thông tin cập nhật khi phát hoặc dừng video.

Thư viện cung cấp các hằng số bắt đầu bằng tiền tố kYT* để thuận tiện và dễ đọc. Để nắm được 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à hạn chế

Thư viện này được xây dựng dựa trên API IFrame Player bằng cách tạo một WebView và kết xuất HTML và JavaScript bắt buộc cho một trình phát cơ bản. Mục tiêu của thư viện này là càng dễ sử dụng càng tốt, 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. Sau đây là một số hạn chế cần lưu ý:

Thư viện này không hỗ trợ tính năng phát video đồng thời trong nhiều bản sao YTPlayerView. Nếu ứng dụng có nhiều thực thể YTPlayerView, bạn nên 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 mà quá trình phát sắp bắt đầu. Các ViewController khác sẽ nhận được thông báo và sẽ tạm dừng phát trong các thực thể YTPlayerView của chúng.
Sử dụng lại các phiên bản YTPlayerView đã tải hiện có khi có thể. Khi bạn cần thay đổi một video trong một Chế độ xem, đừng tạo bản sao UIView mới hoặc bản sao YTPlayerView mới và đừng gọi loadVideoId: hoặc loadPlaylistId:. Thay vào đó, hãy sử dụng nhóm hàm cueVideoById:startSeconds:, các 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 thể phát 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 này gần 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 cho thiết bị 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à điểm cải tiến cho nhánh chính của dự án GitHub.