Có một số trường hợp bạn có thể muốn sử dụng video lặp. Hãy nhớ rằng một video lặp đi lặp lại vô thời hạn có thể khiến người xem trang web của bạn mất tập trung. Ví dụ này lặp video 3 lần rồi dừng phát lại video
Xem Pen 18176-Tạo vòng lặp video của Brightcove Learning Services [@bcls1969] trên CodePen
Mã nguồn
Xem giải pháp hoàn chỉnh trên GitHub
Nếu bạn dự định chỉ sử dụng triển khai Mã nhúng trong trang và video có thể lặp lại vô thời hạn, thì bạn chỉ cần thêm các thuộc tính vào phần tửvideo
trong trang HTML của mình. Để biết chi tiết về cách thực hiện việc này, hãy xem phầnSử dụng CodePen
Dưới đây là một số thủ thuật để sử dụng hiệu quả CodePen trên
- Chuyển đổi hiển thị thực tế của trình phát bằng cách nhấp vào nút Kết quả
- Nhấp vào các nút HTML/CSS/JS để hiển thị MỘT trong các loại mã
- Ở phần sau của tài liệu này, logic, quy trình và kiểu dáng được sử dụng trong ứng dụng sẽ được thảo luận trong phần và các phần. Cách tốt nhất để làm theo cùng với thông tin trong các phần đó là
- Nhấp vào nút CHỈNH SỬA TRÊN CODEPEN trong CodePen và có sẵn mã trong một tab trình duyệt/trình duyệt
- Trong CodePen, điều chỉnh mã bạn muốn hiển thị. Bạn có thể thay đổi độ rộng của các phần mã khác nhau trong CodePen
- Xem các phần và/hoặc trong tab trình duyệt/trình duyệt khác. Bây giờ bạn sẽ có thể làm theo các giải thích về mã và đồng thời xem mã
Trình tự phát triển
Đây là trình tự phát triển được đề xuất
- Sử dụng triển khai trình phát nhúng trong trang để kiểm tra chức năng của trình phát, plugin và CSS của bạn [nếu cần CSS]
- Đặt JavaScript và CSS của plugin vào các tệp riêng biệt để thử nghiệm cục bộ
- Triển khai mã plugin và CSS cho máy chủ của bạn sau khi bạn đã khắc phục mọi lỗi
- Sử dụng Studio để thêm plugin và CSS vào trình phát của bạn
- Thay thế triển khai trình phát nhúng trong trang nếu bạn xác định rằng triển khai iframe phù hợp hơn [chi tiết trong phần tiếp theo]
Để biết chi tiết về các bước này, hãy xem lại Hướng dẫn từng bước. Hướng dẫn phát triển plugin
iframe hoặc nhúng trong trang
Khi phát triển các cải tiến cho Brightcove Player, bạn sẽ cần quyết định xem mã có phù hợp nhất cho triển khai nhúng iframe hoặc trong trang hay không. Đề xuất phương pháp hay nhất là xây dựng plugin để sử dụng với triển khai iframe. Ưu điểm của việc sử dụng trình phát iframe là
- Không xung đột với JavaScript và/hoặc CSS hiện có
- Tự động đáp ứng
- Khung nội tuyến giúp dễ dàng sử dụng trong các ứng dụng truyền thông xã hội [hoặc bất cứ khi nào video cần "di chuyển" vào các ứng dụng khác]
Mặc dù việc tích hợp trình phát nhúng trong trang có thể phức tạp hơn, nhưng đôi khi bạn sẽ lập kế hoạch cho mã của mình xung quanh việc triển khai đó. Nói chung, cách tiếp cận này là tốt nhất khi trang chứa cần giao tiếp với người chơi. Cụ thể, đây là một số ví dụ
- Mã trong trang chứa cần lắng nghe và hành động theo các sự kiện của người chơi
- Trình phát sử dụng các kiểu từ trang chứa
- Khung nội tuyến sẽ khiến logic ứng dụng bị lỗi, chẳng hạn như chuyển hướng từ trang chứa
Ngay cả khi triển khai cuối cùng của bạn không sử dụng mã iframe, bạn vẫn có thể sử dụng mã nhúng trong trang với plugin cho JavaScript và một tệp riêng cho CSS của bạn. Điều này gói gọn logic của bạn để bạn có thể dễ dàng sử dụng nó trong nhiều người chơi
Tài nguyên API/Plugin được sử dụng
Phương thức APISự kiện APICấu hình trình phát/HTML
Phần này nêu chi tiết bất kỳ cấu hình đặc biệt nào cần thiết trong quá trình tạo trình phát. Ngoài ra, các phần tử HTML khác phải được thêm vào trang, ngoài mã triển khai trình phát nhúng trong trang, được mô tả
cấu hình trình phát
Không cần cấu hình đặc biệt cho Brightcove Player mà bạn tạo cho mẫu này
HTML khác
Không có phần tử HTML nào khác được thêm vào trang
Luồng ứng dụng
Logic cơ bản đằng sau ứng dụng này là
- Bắt đầu phát lại video khi trình phát tải
- Phát lại video 2 lần nữa rồi dừng phát video
Phát video 3 lần rồi dừng
Tìm mã nơi được dán nhãn
// +++ Loop video 3 times +++
Lắng nghe sự kiện ended
của trình phát, sau đó kiểm tra xem video đã phát bao nhiêu lần. Sau 3 lần phát, sau đó không bắt đầu phát lại video
kiểu dáng ứng dụng
Không cần kiểu dáng bổ sung cho mẫu này
mã plugin
Thông thường, khi chuyển đổi JavaScript thành plugin Brightcove Player, cần có các thay đổi danh nghĩa. Một thay đổi bắt buộc là thay thế cách sử dụng tiêu chuẩn của phương thức ready[]
bằng mã xác định plugin
Đây là đoạn mã JavaScript bắt đầu được sử dụng rất phổ biến sẽ hoạt động với trình phát
videojs.getPlayer['myPlayerID'].ready[function[] {
var myPlayer = this;
...
}];
Bạn sẽ thay đổi dòng đầu tiên để sử dụng cú pháp chuẩn để khởi động plugin Brightcove Player
videojs.registerPlugin['pluginName', function[options] {
var myPlayer = this;
...
}];
Như đã đề cập trước đó, bạn có thể xem mã JavaScript của plugin trong repo GitHub tương ứng của tài liệu này. vòng lặp video. js
Sử dụng plugin với trình phát
Khi bạn đã lưu trữ tệp CSS và JavaScript của plugin ở vị trí có thể truy cập Internet, bạn có thể sử dụng plugin với trình phát. Trong mô-đun PLAYERS của Studio, bạn có thể chọn trình phát, sau đó trong phần PLUGINS, hãy thêm URL vào tệp CSS và JavaScript, đồng thời thêm Tên và Tùy chọn, nếu cần có tùy chọn
giải pháp thay thế
Nếu bạn dự định chỉ sử dụng triển khai Mã nhúng trong trang, bạn có thể thực hiện hai thay đổi cấu hình sau để tạo vòng lặp
- Thêm thuộc tính
loop
vào phần tửvideojs.getPlayer['myPlayerID'].ready[function[] { var myPlayer = this; ... }];
- Sử dụng Studio [Thuộc tính trình phát, phần Phát lại] hoặc API quản lý trình phát để đặt trình phát của bạn tự động phát. Tự động phát là một vấn đề phức tạp và để biết chi tiết đầy đủ, hãy xem tài liệu Cân nhắc về tự động phát
Lưu ý rằng giải pháp này sẽ lặp vô thời hạn
Đây là mã giải pháp cuối cùng của bạn trông như thế nào [nhớ cài đặt tự động phát trên trình phát trong Studio]
Video Loop
Video Loop
Thế là xong - bạn đã hoàn thành. Bạn có thể bỏ qua các bước còn lại cho chủ đề này
Nếu bạn muốn giới hạn số lần video lặp lại hoặc sử dụng triển khai iframe, thì hãy sử dụng mã được thảo luận trong các phần trước của tài liệu này