Cách tích hợp Presto Player vào khóa học của FluentCommunity

Bạn đã đầu tư cả tâm huyết vào khóa học của mình… nhưng chỉ một đề xuất video YouTube ngẫu nhiên cũng đủ khiến học viên rời đi.

Nếu bạn đang dùng FluentCommunity và cảm thấy bất lực vì không thể kiểm soát cách video hiển thị, không thể ẩn logo YouTube, không thể bảo vệ nội dung – thì bạn không cô đơn.

Trong bài viết này, tôi sẽ chia sẻ cách tôi và cộng sự đã “lách khe” công nghệ để tích hợp Presto Player – trình phát video chuyên nghiệp – vào FluentCommunity, dù nền tảng này chưa hỗ trợ chính thức.

Một giải pháp đơn giản, hiệu quả, và bất kỳ ai cũng làm được – kể cả bạn.

FluentCommunity chưa hỗ trợ tích hợp Presto Player

Nếu bạn là người tạo khóa học, xây dựng cộng đồng học tập, hoặc đang dùng FluentCommunity để kết nối và đào tạo học viên thì chắc hẳn bạn đã từng bối rối với vấn đề này:

Nhúng video YouTube mặc định khiến trải nghiệm học bị xao nhãng nghiêm trọng.

• Học viên bị kéo ra khỏi bài học vì đề xuất video không liên quan
• Logo YouTube và liên kết “Xem trên YouTube” luôn hiển thị
• Video dễ dàng bị chia sẻ lại, tải về
• Không có lời kêu gọi hành động, thu email hay phân tích lượt xem

Bạn muốn điều gì đó chuyên nghiệp hơn, giống như các nền tảng học tập hiện đại. Bạn đã đầu tư vào Presto Player – một plugin mạnh mẽ giúp bảo vệ nội dung, chèn CTA, thu email… nhưng rồi:

FluentCommunity KHÔNG hỗ trợ tích hợp trực tiếp với Presto Player.

Đó là lý do tại sao người dùng liên tục yêu cầu tích hợp Presto Player với FluentCommunity, Và Hoàng Hxn chính là người đầu tiên yêu cầu tính năng Thêm video Presto Player vào bài học khóa học trong FluentCommunity (vào ngày 19/11/2024). Nó đã có tới 182 bình chọn & 30 bình luận, để đủ thấy rằng đây là vấn đề không chỉ của Hoàng mà của rất nhiều thành viên khác

Và Shahjahan Jewel hiểu rõ vấn đề này, Nên anh ấy đã trả lời về việc tích hợp Presto Player với FluentCommunity:

Chúng tôi chưa thể xây dựng loại tích hợp này cho đến khi hoàn tất tính năng tương thích với giao diện. Ngoài ra, chúng tôi cũng dự định sẽ bổ sung một trình phát video riêng hoặc một tiện ích mở rộng trong tương lai, vì tôi tin rằng một trình phát video tốt là yếu tố thiết yếu để tích hợp mượt mà với các dịch vụ CDN và người dùng trong cộng đồng. Nếu dùng trình phát bên thứ ba như Presto Player, chúng tôi sẽ không đạt được điều đó.

— Shahjahan Jewel

Cách nhúng video Presto Player vào khóa học FluentCommunity

Tôi cũng từng gặp vấn đề này khi xây dựng Bộ Lạc HXN – cộng đồng học và làm cho người khởi nghiệp độc lập. Chúng tôi cần một cách để:

• Bảo vệ video bài học khỏi bị chia sẻ
• Loại bỏ mọi yếu tố gây xao nhãng
• Giữ người học trong hệ sinh thái của mình

Nhờ người bạn đồng hành Cường Thạch, chúng tôi đã tìm ra một cách làm đơn giản mà hiệu quả: Nhúng Instant Video Page của Presto Player vào FluentCommunity bằng mã HTML tùy chỉnh.

Dưới đây là hướng dẫn từng bước để bạn làm điều tương tự như mình đã làm:

Bước 1: Chuẩn bị

Những thứ bạn cần có để thực hiện theo hướng dẫn:

• Presto Player Pro giúp bạn kiểm soát hoàn toàn video trên WordPress: nhúng video Youtube mà không gây sao nhãng, chèn CTA, thu email, bảo vệ nội dung và tăng tương tác học viên – tất cả trong một plugin mạnh mẽ và dễ sử dụng.
• FluentCommunity Pro cung cấp giải pháp toàn diện để tạo cộng đồng học tập chuyên nghiệp trên WordPress, kết hợp các công cụ mạng xã hội và hệ thống quản lý khóa học (LMS) trong một nền tảng duy nhất, không cần biết lập trình.
• FluentSnippets Để thêm đoạn mã Code tối ưu cho Presto Player, Plugin hiện đã được Hoàng Hxn dịch sang tiếng việt để bạn dễ dàng sử dụng hơn.
• Link video đã tải lên YouTube

Bước 2: Tạo video trong Presto Player

1. Vào Presto Player > Add New Video > Chọn Youtube
2. Dán liên kết YouTube vào > Chọn Add New
3. Tạo Preset riêng (VD: Community Player) bằng cách nhấp chuột vào Video vừa thêm > Tới mục Video Preset ở thanh cài đặt > Add New Preset > Behavior > Youtube bật Hide Youtube UI (Experimental)
4. Tạo Instant Video Page và sao chép link – Presto Player sẽ cung cấp một Instant Video Page – đây chính là link mà bạn sẽ nhúng vào FluentCommunity.
   • Trên thanh công cụ quản trị, Nhấp vào Instant Video Page > Visibility > Chọn Published
   • Tiếp theo Publish video Presto Player > Xuất hện của sổ mới tại mục Media address > Chọn Copy để sao chép Link Video

Lưu ý: Để lần sau thêm video mà không phải chọn lại loại Video Preset thì bạn vào Presto Player > Cài đặt > Presets > Select default preset for video ở đây bạn chọn Preset đã tạo thêm ở trên, như ví dụ là: Community Player và nhấp Update Settings.

Bước 3: Thêm Code CSS Presto Player trong FluentSnippets

Đoạn mã code này giúp tối ưu hóa trang xem video trực tiếp (Instant Video Page) của Presto Player bằng cách ẩn các thành phần gây mất tập trung và căn chỉnh video để có giao diện gọn gàng hơn trên cả máy tính để bàn và thiết bị di động.

👉 Xem hướng dẫn chi tiết để thêm mã code vào FluentSnippets

Bước 1: Sao chép đoạn mã dưới đây

/* Chỉ ẩn header và admin bar khi có block Presto Player */
body.single-pp_video_block header,
body.single-pp_video_block #wpadminbar {
  display: none !important;
}

/* Gỡ margin-top trừ admin bar, chỉ áp dụng khi có Presto Player */
body.single-pp_video_block {
  margin-top: -32px;
}

/* Gỡ padding quanh video block */
.single-pp_video_block .pp-video {
  padding: 0 !important;
}

/* Bo tròn viền = 0 cho player */
:root {
  --presto-player-border-radius: 0px !important;
}

/* Tối ưu hiển thị video trên thiết bị nhỏ */
@media screen and (max-width: 600px) {
  .pp-video {
    max-width: 420px !important;
    padding: 20px;
    margin: 0 auto;
  }
}

Bước 2: Thêm Code vào FluentSnippets Nhấp vào ảnh để phóng to xem chỉ tiết

Nhấp vào New Snippet để thêm mới, Sau đó chọn thứ tự như dưới:

1. Chọn Kiểu CSS ở mục Snippet Type
2. Nhập Mã Code Sao chép ở bước 1 vào đây
3. Để mặc định (Hiển thị phần người dùng)
4. Nhập tên đoạn mã (Ví dụ: CSS Presto Player) sau đó nhấp vào nút Tạo đoạn mã.
5. Cuối cùng là chọn Kích hoạt

Bước 4: Thêm Video Presto Player vào bài học trong khóa học của FluentCommunity

👉 Xem hướng dẫn chi tiết để thêm Video Presto Player vào bài học trong khóa học

Bước 1: Sao chép đoạn mã dưới đây:

<div style="position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1);">
  <iframe 
    src="https://yourdomain.com/path-to-your-instant-video-page"
    allowfullscreen
    loading="lazy"
    scrolling="no"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;">
  </iframe>
</div>

Bước 2: Tạo mẫu khối với Mã HTML tùy chỉnh Nhấp vào ảnh để phóng to xem chỉ tiết

Với việc tạo ra mẫu khối giúp bạn nhanh chóng thêm Video Presto Player vào các bài học khác đơn giản bằng cách chèn mẫu khối đã tạo này. Để thực hiện các bạn làm theo thứ tự như bên dưới:

1. Vào cộng đồng và tới mục quản lý khóa học, mở bài học bất kỳ mà bạn muốn chèn video Presto Player vào
2. Tạo mẫu khối với Mã HTML tùy chỉnh: Tạo khối nhóm > Thêm khối Mã Code và dán Mã Code Sao chép ở bước 1 vào
3. Nhấp vào khối nhóm > Chọn (…) 3 dấu chấm trên thanh công cụ > Nhấp Tạo mẫu để Thêm mẫu khối > Ra cửa sổ mới, nhập tên mẫu (Ví du: Video Presto Player), chọn danh mục Video và Bỏ chọn đồng bộ.
4. Khi tạo xong, bạn có thể xóa nhóm này đi, và chuyển sang xem hướng dẫn Bước 3 ở dưới.

Bước 3: Cách thêm Video Presto Player vào các bài học

1. Thêm khối Video Presto Player mẫu: Nhấp vào thêm khối > Tìm tên “Video Presto Player” và chèn vào bài học.
2. Khi chèn mẫu xong bạn thay link trong Code sau: src="https://yourdomain.com/path-to-your-instant-video-page" bằng link trang Video Presto Player bạn muốn. Ví dụ video của mình có Link là: https://hoanghxn.com/bo-lac-hxn > Thì khi sửa lại sẽ là: src="https://hoanghxn.com/bo-lac-hxn
3. Tới đây thì chúc mừng bạn đã có thể nhúng Video Presto Player thành công cho khóa học của mình nha 😉

Nhúng video Presto Player trong bài đăng FluentCommunity

Bạn hoàn toàn có thể làm được như cách nhúng Presto Player cho khóa học, Bởi khi thêm bài đăng cũng cho pháp chúng ta thêm video với tùy chọn thêm bằng mã HTML tùy chỉnh. Nhưng theo quan điểm cá nhận mình thì không thực sự cần thiết.

Bởi với bài đăng nhanh nên sẽ không nhất thiết để chúng ta bỏ thời gian công sức để Nhúng Video Presto Player nha bạn 😉

Vài dòng cảm nghĩ cá nhân

Hoàng Hxn & Cường Thạch tin rằng trải nghiệm học tập cần được kiểm soát bởi người tạo nội dung, không phải các nền tảng quảng cáo.

• FluentCommunity hiện vẫn chưa có Video Player tích hợp sẵn, gây bất tiện cho người dùng muốn dùng video từ máy chủ riêng. Nếu không dùng bên thứ 3 như YouTube, Vimeo… thì người dùng buộc phải chèn mã HTML5 thủ công – điều này gây khó khăn cho những ai không rành kỹ thuật.

• Sẽ rất tuyệt vời nếu FluentCommunity phát triển một video player riêng, có khả năng trì hoãn việc tải YouTube cho đến khi người học nhấn “Play”. Điều này không chỉ tăng tốc độ tải trang, mà còn nâng cao trải nghiệm người học bằng cách loại bỏ yếu tố gây xao nhãng.

• Việc ẩn thương hiệu YouTube, như Presto Player đang làm, tuy có thể đối mặt với rủi ro về chính sách nền tảng, nhưng nếu FluentCommunity có thể đưa ra giải pháp khéo léo và tuân thủ, người dùng chắc chắn sẽ đánh giá cao nỗ lực tinh chỉnh và tối ưu hóa trải nghiệm.

Nếu bạn cũng đang dùng FluentCommunity và muốn có trình phát video sạch, nhanh, bảo vệ nội dung và chuyên nghiệp – hãy thử giải pháp này.

🎯 Nếu bạn cũng muốn FluentCommunity phát triển tính năng này, đừng ngần ngại chia sẻ ý kiến của mình trong cộng đồng FluentCommunity. Khi nhiều người dùng cùng bình chọn, đội ngũ phát triển sẽ có thêm động lực để ưu tiên xây dựng những tính năng thực sự hữu ích như Fluent Player.

Hãy để lại chia sẻ giải pháp này cho cộng đồng – vì một hệ sinh thái học tập an toàn và tập trung hơn.

Fluent Player sắp ra mắt – Liệu có làm thay đổi cuộc chơi?

Presto Player là một lựa chọn mạnh mẽ và dễ dùng khi bạn muốn tích hợp video vào khóa học trong FluentCommunity. Tuy nhiên, một trình phát video chính chủ mang tên Fluent Player đang được âm thầm phát triển – với mục tiêu giải quyết triệt để những giới hạn mà các trình phát bên thứ ba không thể đáp ứng.

Fluent Player hứa hẹn sẽ được tích hợp sâu với hệ sinh thái Fluent, từ việc tương thích hoàn hảo với theme, hỗ trợ CDN cho tốc độ tối ưu, cho đến khả năng cá nhân hóa trải nghiệm xem video cho từng người dùng trong cộng đồng.

Nếu bạn đang xây dựng khóa học trên nền tảng FluentCommunity, thì Fluent Player chính là mảnh ghép còn thiếu để mọi thứ trở nên liền mạch và chuyên nghiệp hơn. Hãy cùng chờ xem – liệu Fluent Player có đủ sức làm thay đổi cuộc chơi?

Hoàng Hxn & Cường Thạch
Thành viên của Bộ Lạc HXN – Cộng đồng cho người khởi nghiệp độc lập