Thẻ video HTML 5 giúp dễ dàng thêm video vào các trang web của bạn. Nhưng trong khi nó xuất hiện dễ dàng trên bề mặt, có rất nhiều điều mà bạn cần làm để có được video của bạn và chạy. Hướng dẫn này sẽ hướng dẫn bạn qua các bước để tạo một trang trong HTML 5 sẽ chạy video trong tất cả các trình duyệt hiện đại.
- Lưu trữ video HTML 5 của riêng bạn so với sử dụng YouTube
- Tổng quan nhanh về hỗ trợ video trên web
- Tạo và chỉnh sửa video của bạn
- Chuyển đổi Video thành Ogg cho Firefox
- Chuyển đổi Video thành MP4 cho Safari
- Chuyển đổi Video thành FLV cho Internet Explorer
- Thêm phần tử video vào trang web của bạn
- Thêm JavaScript và Flash Player để Internet Explorer hoạt động phần 1
- Thử nghiệm trong nhiều trình duyệt như bạn có thể
01 trên 10
Lưu trữ video HTML 5 của riêng bạn so với sử dụng YouTube
YouTube là một trang web tuyệt vời. Nó giúp dễ dàng nhúng video vào các trang web một cách nhanh chóng, và với một số ngoại lệ nhỏ là khá liền mạch trong việc thực hiện các video đó. Nếu bạn đăng video trên YouTube, bạn có thể khá tự tin rằng bất kỳ ai cũng có thể xem video đó.
Nhưng sử dụng YouTube để nhúng video của bạn có một số nhược điểm
Hầu hết các vấn đề với YouTube là ở phía người tiêu dùng, thay vì ở phía nhà thiết kế, những thứ như:
- Tìm kiếm và lập chỉ mục chậm
- Lỗi máy chủ
- Nội dung bị xóa (dường như) tùy tiện
- Quá nhiều nội dung xấu
Nhưng có một số lý do khiến YouTube cũng không tốt cho các nhà phát triển nội dung, bao gồm:
- Độ dài tối đa 10 phút đối với video (đối với tài khoản miễn phí)
- Hiệu suất tải lên kém
- YouTube giành quyền sử dụng không giới hạn đối với video của bạn
- Bất kỳ người dùng YouTube nào cũng có quyền sử dụng không giới hạn đối với video của bạn
HTML 5 Video mang lại một số lợi thế trên YouTube
Sử dụng HTML 5 cho video sẽ cho phép bạn kiểm soát mọi khía cạnh của video, từ ai có thể xem video, thời lượng, nội dung chứa, nội dung được lưu trữ và cách máy chủ hoạt động. Và HTML 5 video mang lại cho bạn cơ hội mã hóa video của bạn ở nhiều định dạng như bạn cần để đảm bảo rằng số lượng người tối đa có thể xem video. Khách hàng của bạn không cần plugin hoặc phải chờ cho đến khi YouTube phát hành phiên bản mới hơn.
Tất nhiên, HTML 5 Video cung cấp một số nhược điểm
Bao gồm các:
- Bạn phải mã hóa video của mình trong ít nhất ba codec khác nhau
- Bạn phải bao gồm một số JavaScript để đảm bảo các trình duyệt không hỗ trợ HTML 5 sẽ hoạt động
- Máy chủ của bạn phải có khả năng xử lý các yêu cầu băng thông của lưu trữ video
02 trên 10
Tổng quan nhanh về hỗ trợ video trên web
Thêm video vào trang web từ lâu đã là một quá trình khó khăn. Có rất nhiều thứ có thể sai:
- Trước tiên, bạn sử dụng thẻ
- Vì vậy, bạn chuyển sang thẻ
- Sau đó, bạn nghĩ rằng " Flash !" Và mã hóa video của bạn dưới dạng tệp FLV. Nhưng Flash không được hỗ trợ trên nhiều thiết bị di động và nhiều người ghét Flash bất kể nó được sử dụng như thế nào (25% người được hỏi trong cuộc thăm dò ý kiến của tôi về cách bạn cảm thấy về Flash nói rằng họ không thể chịu được Flash theo bất kỳ cách nào).
- Vì vậy, bạn quyết định tải video của mình lên một trang nhúng video như YouTube, nhưng sau đó bạn có vấn đề với YouTube mà chúng tôi đã thảo luận.
- Cuối cùng, bạn quyết định đi với HTML 5, nhưng Internet Explorer không hỗ trợ nó (không phải cho đến khi Internet Explorer 9). Và ngay cả khi bạn làm, có hai tiêu chuẩn codec video được hỗ trợ và chỉ có một trình duyệt có thể sử dụng cả hai. Hỗ trợ trình duyệt cho Codec và Video vùng chứa
Vậy bạn phải làm gì? Từ bỏ video không còn là lựa chọn cho hầu hết các trang web, vì video ngày càng trở nên quan trọng hơn. Và nhiều trang web đã chuyển thành công thành video.
Các trang sau của bài viết này sẽ hướng dẫn bạn cách thêm video vào các trang web hoạt động trong Firefox 3.5, Opera 10.5, Chrome 3.0, Safari 3 và 4, iPhone và Android, Flash và Internet Explorer 7 và 8. Bạn sẽ cũng có các phím bạn cần để thêm hỗ trợ cho các trình duyệt cũ hơn nếu cần.
03 trên 10
Tạo và chỉnh sửa video của bạn
Điều đầu tiên bạn cần khi bạn sắp đặt video trên trang web là video thực sự. Bạn có thể chụp liên tục và chỉnh sửa sau đó để tạo một đối tượng địa lý hoặc bạn có thể viết kịch bản và lên kế hoạch trước thời hạn. Dù bằng cách nào hoạt động tốt, nó chỉ là bất cứ điều gì bạn cảm thấy thoải mái. Nếu bạn không biết bạn nên tạo loại video nào, hãy xem các ý tưởng sau trong Hướng dẫn bằng video trên máy tính để bàn:
- Dự án video gia đình
- Video tiếp thị và quảng cáo
- Chuyến tham quan ảo video
- Cách làm Video
- Video đám cưới
Tìm hiểu cách ghi video chất lượng cao
Đảm bảo bạn biết cách ghi âm trong nhà và ngoài trời cũng như cách ghi âm. Ánh sáng cũng rất quan trọng - những bức ảnh quá sáng làm tổn thương mắt, và quá tối chỉ trông lầy lội và không chuyên nghiệp. Ngay cả khi bạn chỉ có kế hoạch để có một video 30 giây trên trang web của bạn, chất lượng cao hơn nó là tốt hơn nó sẽ phản ánh trên trang web của bạn.
Hãy nhớ rằng bản quyền cũng áp dụng cho bất kỳ âm thanh hoặc âm nhạc nào (cũng như cảnh lưu trữ) mà bạn có thể muốn sử dụng trong video của mình. Nếu bạn không có quyền truy cập vào một người bạn có thể viết và phát một bài hát cho bạn, bạn sẽ cần phải tìm nhạc miễn phí bản quyền để phát trong nền. Ngoài ra còn có những nơi bạn có thể lưu trữ cảnh để thêm vào video của bạn.
Chỉnh sửa video của bạn
Việc bạn sử dụng phần mềm chỉnh sửa nào không quan trọng, miễn là bạn quen thuộc với phần mềm đó và có thể sử dụng nó một cách hiệu quả. Gretchen, Video hướng dẫn dành cho máy tính để bàn, có một số mẹo chỉnh sửa video chuyên nghiệp có thể giúp bạn chỉnh sửa video để trông tuyệt vời.
Lưu Video của bạn thành MOV hoặc AVI (hoặc MPG, CD, DV)
Trong phần còn lại của hướng dẫn này, chúng tôi sẽ giả sử bạn lưu video của mình ở một số loại định dạng chất lượng cao (không nén) như AVI hoặc MOV. Mặc dù bạn có thể sử dụng những tệp này như chúng, bạn gặp phải tất cả các sự cố với video mà chúng tôi đã thảo luận. Các trang sau sẽ giải thích cách chuyển đổi tệp của bạn thành ba loại để có thể xem được bởi số lượng trình duyệt lớn nhất.
04 trên 10
Chuyển đổi Video thành Ogg cho Firefox
Định dạng đầu tiên chúng ta sẽ chuyển thành là Ogg (đôi khi được gọi là Ogg-Theora). Định dạng này là định dạng mà Firefox 3.5, Opera 10.5 và Chrome 3 có thể xem.
Thật không may, trong khi Ogg có hỗ trợ trình duyệt, nhiều chương trình video nổi tiếng mà bạn có thể mua (Adobe Media Encoder, QuickTime, v.v.) không cung cấp tùy chọn chuyển đổi Ogg. Vì vậy, cách duy nhất để chuyển đổi video của bạn thành Ogg là tìm một chương trình chuyển đổi trên Web.
Tùy chọn chuyển đổi
Có một công cụ trực tuyến được gọi là Media-Convert yêu cầu chuyển đổi các định dạng video (và âm thanh) thành các định dạng video (và âm thanh) khác. Khi chúng tôi thử nó với video thử nghiệm 3 giây, chúng tôi không thể làm cho nó hoạt động trên máy Mac của mình. Nhưng bạn có thể có may mắn hơn. Trang web này có lợi ích miễn phí.
Một số công cụ khác mà chúng tôi đã tìm thấy bao gồm:
- Miro Video Converter (Windows Macintosh) - Chương trình này có lợi cho việc chuyển đổi sang cả Ogg và MP4 (H.264) và nó là mã nguồn mở.
- Chuyển đổi Video Koyote (Windows)
- Chuyển đổi video miễn phí Chúng tôi nghĩ rằng điều này có cả phiên bản Windows và Macintosh, nhưng thật khó để nói từ trang web của họ
- Bộ mã hóa Theora đơn giản (Macintosh) - đây là cái chúng tôi có xu hướng sử dụng.
Sau khi bạn lưu video của mình ở định dạng Ogg, hãy lưu video đó vào vị trí trên trang web của bạn và chuyển đến trang tiếp theo để chuyển đổi video sang các định dạng khác cho các trình duyệt khác.
05 trên 10
Chuyển đổi Video thành MP4 cho Safari
Định dạng tiếp theo bạn nên chuyển đổi video thành MP4 (video H.264) để có thể phát trên Safari 3 và 4 và iPhone và Android. Ngoài ra, video H.264 có thể dễ dàng chuyển đổi thành tệp FLV để xem trên Flash.
Định dạng này sẵn có hơn trong các sản phẩm thương mại và có thể bạn đã có một chương trình chuyển đổi thành MP4 nếu bạn có trình chỉnh sửa video. Nếu bạn có Adobe Premiere, bạn có thể sử dụng Bộ mã hóa video Adobe hoặc nếu bạn có QuickTime Pro cũng sẽ hoạt động. Nhiều người trong số những người chuyển đổi chúng tôi đã thảo luận trên trang trước cũng sẽ chuyển đổi video thành MP4.
- Media-Convert - công cụ trực tuyến
- Miro Video Converter (Windows Macintosh) - Chương trình này có lợi cho việc chuyển đổi sang cả Ogg và MP4 (H.264) và nó là mã nguồn mở.
- SUPER (Windows) - sẽ chuyển đổi nhiều loại tệp khác nhau thành MP4 và FLV
- Chuyển đổi video miễn phí Chúng tôi nghĩ rằng điều này có cả phiên bản Windows và Macintosh, nhưng thật khó để nói từ trang web của họ
Lưu tệp MP4 của bạn vào trang web của bạn và sau đó bạn sẽ cần phải chuyển đổi nó sang Flash để Internet Explorer sử dụng.
06 trên 10
Chuyển đổi Video thành FLV cho Internet Explorer
Cách dễ nhất để chuyển đổi video sang FLV là sử dụng Flash. Đó là cách chúng tôi chuyển đổi video của mình sang Flash. Nhưng nếu bạn không có Flash, dưới đây là hai công cụ phổ biến để chuyển đổi tệp sang FLV:
- SUPER (Windows) - sẽ chuyển đổi nhiều loại tệp khác nhau thành MP4 và FLV
- ffmpegX (Macintosh) - sẽ chuyển đổi nhiều loại tệp khác nhau thành Mp4 và FLV.
Lưu tệp FLV của bạn vào trang web của bạn và trang tiếp theo sẽ chỉ cho bạn cách viết HTML để bạn có thể phát video của mình.
07 trên 10
Thêm phần tử video vào trang web của bạn
Nó rất dễ sử dụng HTML 5 để thêm video vào các trang Web. Hầu hết các trình duyệt hiện đại đều hỗ trợ HTML 5 video, mặc dù chúng không hỗ trợ tất cả theo cùng một cách. Nhưng điều này có nghĩa là nếu bạn lưu video của mình dưới dạng cả định dạng Ogg và MP4, bạn sẽ chỉ có thể viết bốn hoặc năm dòng HTML để hiển thị trong hầu hết các trình duyệt hiện đại (ngoại trừ Internet Explorer 8). Dưới đây là cách thực hiện:
- Viết trình đánh dấu tài liệu HTML 5 để các trình duyệt biết rằng bạn mong đợi HTML 5:
- Tạo trang web của bạn như bạn thường tạo nó:
title>
head>
body>
html> - Bên trong cơ thể, đặt thẻ
- Quyết định những thuộc tính bạn muốn video của mình có:
- tự động phát - để bắt đầu ngay khi được tải xuống
- điều khiển - cho phép người đọc kiểm soát video (tạm dừng, tua lại, tua đi)
- vòng lặp - bắt đầu video từ đầu khi kết thúc
- preload - tải xuống trước video để video sẵn sàng nhanh hơn khi khách hàng nhấp vào video đó
- áp phích - xác định hình ảnh bạn muốn sử dụng khi video bị dừng
video> - Sau đó, thêm các tệp nguồn cho hai phiên bản video của bạn (MP4 và OGG) bên trong phần tử
:
- Mở trang trong Chrome 1, Firefox 3.5, Opera 10 và / hoặc Safari 4 và đảm bảo trang hiển thị chính xác. Bạn nên kiểm tra nó trong ít nhất Firefox 3.5 và Safari 4 - vì mỗi người dùng một codec khác nhau.
Đó là nó. Khi bạn có mã này tại chỗ, bạn sẽ có một video hoạt động trong Firefox 3.5, Safari 4, Opera 10 và Chrome 1. Nhưng còn về Internet Explorer thì sao?
Internet Explorer không giống như HTML 5 hoặc thẻ
Trong phần tiếp theo, chúng ta sẽ nói về những gì bạn có thể làm để có được IE 8 để chơi độc đáo với các thẻ video HTML 5 của bạn và hiển thị một video. Bạn phải sử dụng Flash. Tin vui là IE 9 được kỳ vọng hỗ trợ HTML 5 và thẻ video.
08 trên 10
Thêm JavaScript và Flash Player để Internet Explorer hoạt động
Bạn có thể nhận thấy rằng trong HTML của trang trước, không có dòng nguồn cho tệp FLV. Và nếu bạn kiểm tra trang đó trong Internet Explorer, nó sẽ không hoạt động. Đó là bởi vì Internet Explorer không nhận ra HTML 5 và nó không thể phát video OGG hoặc MP4 một cách tự nhiên. Để Internet Explorer 7 và 8 hoạt động, bạn cần phải phát video đó dưới dạng Flash. Nhưng có nhiều bước để làm cho nó hoạt động hơn là chỉ thêm tệp FLV.
Bước 1: Nhận Trình phát Video Flash cho Trang web của bạn
Chúng tôi khuyên bạn nên lấy FlowPlayer vì nó là trình phát video Flash nguồn mở mà bạn có thể cài đặt trên máy chủ Web của mình và sử dụng bất cứ khi nào bạn có video Flash để phát. Phiên bản miễn phí của FlowPlayer chèn quảng cáo vào video của bạn, nhưng bạn cũng có thể mua giấy phép thương mại nếu bạn cần chúng.
Làm theo hướng dẫn trên trang web FlowPlayer để cài đặt FlowPlayer trên trang web của bạn. Tóm lại, bạn sẽ cài đặt 2 tệp SWF và tệp JavaScript trên trang web của mình. Ở cuối HTML của bạn, (trước thẻ body>), bạn sẽ thêm một dòng: