Làm thế nào để bạn tạo một vòng lặp trong html?

Sử 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à
  1. 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
  2. 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
  3. 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

1. 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)
2. Đặt JavaScript và CSS của plugin vào các tệp riêng biệt để thử nghiệm cục bộ
3. 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
4. Sử dụng Studio để thêm plugin và CSS vào trình phát của bạn
5. 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

Cấ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;
      ...
    });

  0 trong trang HTML của bạn
• 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)

  
  
  
  
      
      
  
  
  
  
    loop>
  
      
  
  
  

  
  
  
  
      
      
  
  
  
  
    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

Bạn có thể có các vòng lặp trong HTML không?

Vòng lặp for bắt đầu trong HTML như thế nào?

Làm cách nào để lặp div trong HTML?

Câu lệnh lặp trong HTML là gì?