Thẻ video HTML5 giúp dễ dàng thêm video vào các trang Web của bạn. Nhưng mặc dù bề ngoài có vẻ dễ dàng, nhưng có rất nhiều điều bạn cần làm để thiết lập và chạy video của mình. Hướng dẫn này sẽ đưa bạn qua các bước để tạo một trang trong HTML5 sẽ chạy video trong tất cả các trình duyệt hiện đại Show
01 của 07 Lưu trữ video HTML 5 của riêng bạn so với. Sử dụng YouTubeYouTube 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ỏ, việc thực thi các video đó khá liền mạch. Nếu bạn đăng video lê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ểmHầu hết các vấn đề với YouTube đều nằm ở phía người tiêu dùng chứ không phải ở phía nhà thiết kế, chẳng hạn như
Nhưng có một số lý do khiến YouTube không tốt cho các nhà phát triển nội dung, bao gồm
Video HTML5 mang lại một số lợi thế so với YouTubeSử dụng HTML5 cho video cho phép bạn kiểm soát mọi khía cạnh của video, từ việc ai có thể xem video, thời lượng, nội dung chứa gì, nơi lưu trữ video và cách máy chủ hoạt động. Và HTML5 mang đến cho bạn cơ hội để mã hóa video của mình ở nhiều định dạng mà bạn cần để đảm bảo 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 đợi cho đến khi YouTube phát hành phiên bản mới hơn Tất nhiên, video HTML5 có một số hạn chếBao gồm các
02 của 07 Tổng quan nhanh về Hỗ trợ Video trên WebThêm video vào các trang Web từ lâu đã là một quá trình khó khăn. Có rất nhiều điều có thể đi sai
Vậy bạn phải làm gì? . Và nhiều trang đã chuyển sang video thành công Các trang tiếp theo 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, Internet Explorer 7 và 8. Bạn cũng sẽ có các khóa cần thiết để thêm hỗ trợ cho các trình duyệt cũ khác nếu cần 03 của 07 Tạo và chỉnh sửa video của bạnĐiều đầu tiên bạn cần khi đưa một video lên một trang Web là video thực tế. Bạn có thể quay liên tục và chỉnh sửa sau đó để tạo tính năng hoặc bạn có thể viết kịch bản và lên kế hoạch trước cho tính năng đó. Dù bằng cách nào cũng hoạt động tốt, đó 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 mình nên làm loại video nào, hãy xem những ý tưởng này từ Hướng dẫn Video trên Máy tính để bàn
Tìm hiểu cách quay 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—bức ảnh quá sáng sẽ làm hại mắt và quá tối trông có vẻ lầy lội và không chuyên nghiệp. Ngay cả khi bạn chỉ dự định có một video dài 30 giây trên trang web của mình, chất lượng càng cao thì video đó càng phản ánh tốt hơn trên trang web của bạn Cũng nên nhớ rằng bản quyền áp dụng cho bất kỳ âm thanh hoặc bản nhạc nào (cũng như cảnh quay có sẵn) 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 tìm nhạc miễn phí bản quyền để phát trong nền. Cũng có những nơi bạn có thể lưu trữ cảnh quay để thêm vào video của mình Chỉnh sửa video của bạnKhông quan trọng bạn sử dụng phần mềm chỉnh sửa nào, miễn là bạn quen thuộc với nó và có thể sử dụng nó một cách hiệu quả. Gretchen, Hướng dẫn Video trên 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 của mình sao cho chúng trông đẹp mắt Lưu Video của bạn sang MOV hoặc AVI (hoặc MPG, CD, DV)Đối với phần còn lại của hướng dẫn này, chúng tôi sẽ giả định rằng 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 các tệp này như hiện tại, nhưng bạn gặp phải tất cả các sự cố với video mà chúng ta đã thảo luận. Các trang sau đây giải thích cách chuyển đổi tệp của bạn thành ba loại để số lượng trình duyệt lớn nhất có thể xem tệp đó 04 của 07 Chuyển đổi video sang Ogg cho FirefoxĐịnh dạng đầu tiên chúng tôi sẽ chuyển đổi sang 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 đều 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 sang Ogg là tìm một chương trình chuyển đổi trên Web Tùy chọn chuyển đổiCó một công cụ trực tuyến tên là Media-Convert tuyên bố sẽ chuyển đổi các định dạng video (và âm thanh) khác nhau thành các định dạng video (và âm thanh) khác. Khi chúng tôi dùng thử với video thử nghiệm dài 3 giây của mình, 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ể gặp may mắn hơn. Trang web này có lợi ích là miễn phí Một số công cụ khác mà chúng tôi tìm thấy bao gồm
Khi bạn đã lưu video của mình ở định dạng Ogg, hãy lưu video đó vào một 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 của 07 Chuyển đổi Video sang MP4 cho Safari và Internet ExplorerĐịnh dạng tiếp theo bạn nên chuyển đổi video của mình sang là MP4 (H. 264) để có thể phát trên Internet Explorer 9 trở lên, Safari 3 và 4 cũng như iPhone và Android Định dạng này dễ có hơn trong các sản phẩm thương mại và có thể bạn đã có chương trình chuyển đổi sang 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 Adobe Video Encoder hoặc nếu bạn có QuickTime Pro cũng hoạt động tốt. Nhiều trình chuyển đổi mà chúng tôi đã thảo luận ở trang trước cũng chuyển đổi video sang MP4
06 của 07 Thêm phần tử video vào trang web của bạn
Đó là nó. Khi bạn có mã này, 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 Internet Explorer thì sao? 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ợ video HTML 5, mặc dù chúng không hỗ trợ 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 ở cả định dạng Ogg và MP4, bạn chỉ cần viết bốn hoặc năm dòng HTML để video hiển thị trong hầu hết các trình duyệt hiện đại (ngoại trừ Internet Explorer 8). Đây là cách Viết điểm đánh dấu loại tài liệu HTML 5 để các trình duyệt biết mong đợi HTML 5
Đó là nó. Khi bạn có mã này, bạn sẽ có một video hoạt động trong Firefox 3. 5, Safari 4, Opera 10, Internet Explorer 9+ và Chrome 1 07 của 07 Kiểm tra trong càng nhiều trình duyệt càng tốtĐể yên tâm, bạn cũng nên thử nghiệm trên các trình duyệt cũ hơn để xem chúng làm được những gì, đặc biệt nếu nhiều độc giả của bạn sử dụng các trình duyệt cũ hơn Kiểm tra các trang video là rất quan trọng nếu bạn muốn khởi chạy thành công. Bạn nên chắc chắn kiểm tra trang của mình trong các trình duyệt và phiên bản phổ biến nhất cho trang web của bạn Chúng tôi nhận thấy rằng mặc dù có thể sử dụng các công cụ như BrowserLab và AnyBrowser để kiểm tra video, nhưng điều đó không đáng tin cậy bằng việc bạn tự mở trang đó trên trình duyệt. Khi bạn làm điều đó, bạn thực sự có thể thấy nó có hoạt động hay không Vì bạn đã cố gắng hết sức để mã hóa video của mình ở nhiều định dạng, bạn nên kiểm tra video để đảm bảo video hiển thị trên nhiều trình duyệt. Điều này có nghĩa là, ở mức tối thiểu, bạn nên kiểm tra nó trên Firefox, Safari và IE Bạn có thể kiểm tra trong Chrome, nhưng vì Chrome có thể xem cả hai phương pháp nên khó có thể biết liệu có sự cố hay không hoặc Chrome đang sử dụng codec nào Để yên tâm, bạn cũng nên thử nghiệm trên các trình duyệt cũ hơn để xem chúng làm được những gì, đặc biệt nếu nhiều độc giả của bạn sử dụng các trình duyệt cũ hơn Làm cho video hoạt động trong các trình duyệt cũ hơnNhư với bất kỳ trang Web nào, trước tiên bạn nên xem xét tầm quan trọng của việc làm cho các trình duyệt đó hoạt động. Nếu 90% khách hàng của bạn sử dụng Netscape, thì bạn nên có kế hoạch dự phòng cho họ. Nhưng nếu ít hơn 1% làm, nó có thể không quan trọng lắm Khi bạn đã quyết định mình sẽ cố gắng hỗ trợ trình duyệt nào, cách dễ nhất là chỉ cần tạo một trang thay thế để họ xem video ở chế độ. Trên trang thay thế đó, bạn sẽ nhúng video bằng HTML 4. Và sau đó sử dụng một số hình thức phát hiện trình duyệt để chuyển hướng chúng đến đó hoặc chỉ cần thêm một liên kết đến trang đó trên trang này Trích dẫn bài viết này Định dạng trích dẫn của bạn Kyrnin, Jennifer. "Sử dụng HTML5 để hiển thị video trong các trình duyệt hiện tại. "ThinkCo. https. //www. suy nghĩ. com/how-to-use-html-5-to-display-video-in-modern-browsers-3469944 (truy cập ngày 30 tháng 12 năm 2022) Làm cách nào để chèn video vào HTML5?Sử dụng thẻ
. Điều đó có nghĩa là video được xác định bằng cách thêm URL video vào thuộc tính nguồn. Người ta có thể sử dụng nó để nhúng các video được nhập từ máy tính hoặc được lưu trữ bởi một trang web bên ngoài.
Chúng tôi có thể sử dụng video trong HTML không?Phần tử HTML .
Thẻ video có được hỗ trợ trong HTML5 không?The browser will choose the first source it supports. The text between the tags will only be displayed in browsers that do not support the MP4 có tương thích với HTML5 không?Mức tối thiểu cho video HTML5 là MP4 + WebM hoặc Ogg (hoặc cả hai) , sử dụng phiên bản MP4 cho dự phòng Flash. |
