Nhúng video vào trang web đơn giản với 6 cách này

Video là một cách tuyệt vời để nói chuyện với khán giả và truyền đạt thông tin một cách thú vị. Thêm video vào một trang web không dễ dàng như tải nó lên YouTube. Thật tuyệt vời nếu mẫu trang web hoặc CMS cho phép thực hiện điều đó một cách hoàn hảo, nếu không, bạn sẽ phải dành hàng giờ để khiến các video hoạt động. Để tránh trường hợp này xảy ra, bài viết này sẽ hướng dẫn các bạn 6 cách nhúng video trang web hoặc blog.

Nhúng video là gì?

Nhúng video là đưa một video vào code trang web. Có nghĩa là trình phát video được tích hợp trong trang web. Nhúng video không giới hạn trong việc tải lên một video đơn giản đến một số máy chủ, đó là một quá trình phức tạp hơn rất nhiều. Bạn sẽ cần một video ở định dạng được chỉ định và một trình phát web để chạy nó.

Định dạng video nhúng

Trước tiên cần phân biệt giữa video thường và video web. Video thường có ở nhiều định dạng như: AVI, MP4, MKV, WMV, TOD, TS, v.v... Các video web được tìm thấy rất nhiều trên các trang chia sẻ video là streaming video. Trong streaming video, tất cả nội dung được gửi trong luồng dữ liệu liên tục và được phát khi nó đến.

• Tìm hiểu về các định dạng file video

Không phải tất cả các định dạng video đều có thể stream ngoại trừ WebM, MP4, QT, MOV, WMV, FLV, SWF, 3GP, RM và một số định dạng khác. Vấn đề là các định dạng này được kết nối chặt chẽ với phần mềm middleware:

• FLV và SWF là các “thùng chứa” video độc quyền của Adobe Systems, được phát qua Adobe Flash Player.
• WMV có thể được xem trực tiếp với Windows Media Player của Microsoft.
• QT và MOV được liên kết với Apple QuickTime.
• RM liên quan đến RealPlayer của RealNetworks.

MP4 (H.264, AAC) dường như là định dạng phổ biến nhất cho video phát trực tiếp trên Internet. Nó không liên quan đến bất kỳ phần mềm middleware cụ thể nào và có thể được xem trực tiếp ở hầu hết các trình duyệt trên máy tính để bàn và di động.

Tiêu chuẩn video web

Năm 2011, chỉ có một tiêu chuẩn web được biết đến là HTML4 và nó không cho phép nhúng video trực tiếp vào các trang web. Các thẻ <iframe> hoặc <object> với tham chiếu đến một số phần mềm middleware (như Flash Player hoặc RealPlayer). Bằng cách này mã nhúng video sẽ trông giống như hình sau:

Thật may mắn, mọi thứ đã thay đổi cùng với sự xuất hiện của HTML5 vào năm 2015. Tiêu chuẩn mới này mang lại khả năng nhúng video mà không cần bất kỳ phần mềm trung gian nào, chỉ qua thẻ <video>. Tất cả những gì bạn cần là một tệp video ở định dạng yêu cầu và một code trình phát web đơn giản như sau:

Một lợi thế của HTML5 là nó hỗ trợ đa nền, video HTML5 có thể chạy tốt trên PC, điện thoại thông minh và máy tính bảng.

• 12 mẫu HTML5 tuyệt đẹp các nhà thiết kế web không nên bỏ qua

Bây giờ, hãy khám phá các cách phổ biến nhất về nhúng video, ưu và nhược điểm của chúng và những trang web nào phù hợp nhất.

Các cách nhúng video vào trang web

1. HTML5 Video Player

HTML5 Video Player là giải pháp lý tưởng nếu đối tượng trang web sử dụng các thiết bị khác nhau. Để thêm video tương thích HTML5 vào trang web, chỉ cần chuẩn bị file video ở ba định dạng: MP4, WebM, OGG, vì các trình duyệt khác nhau hỗ trợ chất lượng video khác nhau. Tạo một video HTML5 và thực hiện theo hướng dẫn dưới đây để nhúng video HTML5 vào trang web.

Trình phát HTML5 trên trang web sẽ giống như thế này:

Một số giải pháp trả phí như JW Player hoặc Projekktor cung cấp trình phát tùy chỉnh và một số tùy chọn nâng cao, như nhúng tiêu đề, v.v...

Ưu điểm:

• Video web sẽ được truyền trực tiếp trên các thiết bị di động.
• Không cần yêu cầu người xem cài đặt bất kỳ phần mềm middleware nào như Adobe Flash Player để phát video.
• Tất cả các trình duyệt hiện đại hỗ trợ thẻ video HTML5.

Nhược điểm:

• Các phiên bản Internet Explorer cũ sẽ không thể phát các video HTML5.
• Cần lưu trữ các video trên máy chủ.
• Phải chuẩn bị video ở ba định dạng.

2. YouTube

YouTube dường như là giải pháp dễ nhất và phổ biến nhất để nhúng video vào một trang web. Từ năm 2015 YouTube cung cấp phát lại video trong Flash và HTML5. Điều đó có nghĩa là các video đã tải lên YouTube có thể được phát trực tuyến trên PC và các thiết bị.

• Cách chèn video YouTube vào trang Fanpage Facebook

Bước 1. Tạo kênh YouTube và tải video lên đó.

Bước 2. Mở video và nhấp vào Share > Embed.

Bước 3. Nhấn Show more và tùy chỉnh trình phát nếu cần.

Bước 4. Sao chép mã nhúng mà trang web cung cấp và dán nó vào trang web.

Trình phát video trên trang web sẽ giống như trên YouTube. Nhúng video từ YouTube phù hợp với các tất cả các trang web. Các trang web nhỏ có thể tiết kiệm tiền cho việc lưu trữ video, trong khi những trang lớn có thể đẩy mạnh thương hiệu trên YouTube và tìm kiếm của Google bằng các video của họ.

Ưu điểm:

• Dễ thực hiện.
• Không cần lưu trữ các video trên máy chủ.
• Cơ hội quảng cáo video.
• Hỗ trợ phát video đa nền tảng.

Nhược điểm:

• Khách truy cập trang web sẽ truy cập YouTube và rời khỏi trang web.
• YouTube có thể thêm quảng cáo vào video nếu video không tuân thủ chính sách bản quyền của họ.
• Phụ thuộc vào lưu trữ trên YouTube.
• Không thể chỉnh sửa trình phát video.

3. Vimeo

Vimeo là một trang web phổ biến khác để chia sẻ video. Trái ngược với YouTube, nó cung cấp các tùy chọn cao cấp cùng với lưu trữ video miễn phí. Các tùy chọn Vimeo Plus & PRO (59,95 đô la hoặc 199 đô la một năm) bao gồm tải lên và nhúng video HD, trình phát HTML5 tùy chỉnh hoàn chỉnh, các tùy chọn quản lý video nâng cao và bảo mật. Tài khoản cơ bản miễn phí cũng cho phép người dùng nhận mã nhúng video để dán trên trang web.

• Bỏ qua YouTube, đây là 7 lý do bạn nên xem video trên Vimeo ngay hôm nay

Bước 1. Tạo kênh Vimeo và tải video lên đó.

Bước 2. Mở trình phát video và nhấp vào nút Share.

Bước 3. Đi đến phần Embed và nhấp More options để tùy chỉnh trình phát.

Bước 4. Sao chép mã nhúng và dán vào trang web.

Nhiều nhà thiết kế web đồng ý rằng trình phát Vimeo trông phong cách hơn YouTube. Tuy nhiên, cơ hội quảng bá video của Vimeo vẫn còn xa so với các đối thủ cạnh tranh.

Ưu điểm:

• Miễn phí lưu trữ video.
• Trình phát web đẹp.
• Hỗ trợ qua trình duyệt.
• Tùy biến trình phát web cơ bản.

Nhược điểm:

• Cần trả phí để nhúng video HD.
• Khách truy cập trang web có thể xem trực tiếp trên Vimeo và bỏ trang web.

Nhúng video từ Vimeo là giải pháp lý tưởng cho người đăng ký Plus & PRO vì có thể nhận được tất cả các lợi ích của lưu trữ video công cộng và điều chỉnh trình phát web theo nhu cầu.

4. Nhúng video HTML qua Flash Player

Adobe Flash Player là một phương tiện rất phổ biến để phát video trong mã HTML. Tuy nhiên, với sự từ chối hỗ trợ của Apple trên các thiết bị iOS và sự ra đời của HTML5, Flash Player ít được sử dụng. Tuy nhiên, bạn vẫn có thể sử dụng phương pháp nhúng video cũ này nếu khách truy cập trang web sử dụng máy tính cá nhân và phiên bản trình duyệt cũ.

• Khắc phục lỗi Flash khi xem video trên YouTube

Flash Player chỉ có thể xem các định dạng FLV và SWF. Vì vậy, cần phải chuyển đổi video thành một trong những định dạng này. Sử dụng công cụ như Freemake Video Converter để chuyển đổi video sang Flash. Phần mềm chuyển các tệp video sang các định dạng Flash và cung cấp mã để nhúng vào trang.

Trình phát video sẽ có dạng như sau:

Nếu có các kỹ năng code HTML cơ bản, bạn có thể dễ dàng tuỳ chỉnh trình phát này theo nhu cầu.

• 17 code HTML đơn giản bạn có thể học trong 10 phút

Ưu điểm:

• Video SWF có thể chứa các đối tượng tương tác.
• Dễ dàng chuẩn bị các video Flash với phần mềm miễn phí.

Nhược điểm:

• Không hỗ trợ phát trên di động.
• Lưu trữ video trên máy chủ.
• Yêu cầu plugin Flash Player.

Flash Player dành cho các trang web nhằm vào khách truy cập sử dụng máy tính để bàn và được mã hoá trong HTML4.

5. Nhúng video trên WordPress

WordPress là nền tảng mã nguồn mở nổi tiếng nhất để viết blog. Từ năm 2003 nó đã trải qua hàng chục lần cập nhật và trong đó có tính năng tải và nhúng video vào các bài đăng giống như cách tải hình ảnh. Video phải ở một trong các định dạng trực tuyến và không thể tải các video lớn, vì nhiều tài khoản WordPress được giới hạn ở kích thước video 100 MB.

Để nhúng một đoạn video vào bài viết WordPress, hãy thực hiện theo các bước sau:

Bước 1. Đảm bảo video ở định dạng MP4, WMV, FLV, MOV, SWF.

Bước 2. Đi tới WordPress console và mở bài đăng hoặc trang muốn thêm video.

Bước 3. Nhấn vào nút Add Media, sau đó Upload files và chọn tập tin video.

Bước 4. Đảm bảo Display Settings được chuyển đổi sang Embed Media Player và chèn video vào bài đăng.

Trình phát mặc định của WordPress sẽ như sau:

Một tùy chọn tuyệt vời khác của WordPress là nó có thể nhúng trực tiếp từ YouTube, Vimeo, Dailymotion, Vine và một số trang web video khác thông qua URL. Để làm điều này, hãy chọn tab Insert from URL thay vì Upload files, dán URL video và video sẽ được nhúng vào bài đăng. Ngoài ra, bạn có thể thêm một liên kết video vào chính bài viết và WordPress sẽ thêm trình phát web của nó vào đó.

Ưu điểm:

• Dễ thực hiện
• Cho phép nhúng từ nhiều trang web

Nhược điểm:

• Giới hạn kích thước tập tin
• Video cần ở định dạng trực tuyến
• Không chỉnh sửa trình phát video

Đây là tùy chọn nhúng video tốt nhất cho các trang web WordPress.

6. Plugin Freemake Slider cho WordPress

Plugin Freemake Slider cho WordPress là một lựa chọn tuyệt vời cho những ai cần nhúng nhiều video trên blog hoặc trang web dựa trên WordPress.

Để nhúng video trên blog WordPress hoặc trang web, tải Freemake Slider. Sau đó đi đến cài đặt plugin và chọn tạo một thanh trượt mới, chọn Add YouTube. Ngoài ra, bạn cũng có thể thêm danh sách phát YouTube, video ngoại tuyến từ máy tính và video Vimeo. Sau đó chọn một phong cách cho thanh trượt video. Tùy chỉnh bất kỳ cài đặt nào như phát lại (tự động phát, ngẫu nhiên, v.v...), tùy chọn phản hồi, kiểu nếu cần và nhấp vào Save & Publish.

Khi hoàn thành, hãy sao chép mã và dán nó vào bài đăng hoặc trang web.

Ưu điểm:

• Miễn phí
• Dễ sử dụng
• Giữ nhiều video một cách gọn gàng
• Nhiều kiểu trượt
• Tùy biến cao
• Hỗ trợ hình ảnh, video, và các tập tin âm thanh trực tuyến và ngoại tuyến.

Nhược điểm:

• Cần phải có YouTube API để sử dụng Freemake Slider với danh sách phát trên YouTube.

Freemake Slider là một lựa chọn tuyệt vời để thêm nhiều nội dung đa phương tiện trên trang web.

Chúc các bạn thực hiện thành công!