Bước 3: Bắt đầu QuickTime để Windows Media Player chuyển đổi. Nhấn chuyển đổi và để cho này QuickTime thông minh để Windows Media Video Converter làm phần còn lại cho bạn! Lưu ý: Bạn cũng có thể chuyển đổi tập tin QuickTime MOV của bạn để một MP4, F4V hoặc vv và thưởng thức
Tuy nhiên giờ đây bạn có thể dễ dàng chèn video vào website của bạn thông qua thẻ . Cách chèn một video trong HTML: Để chèn video trong html, bạn sẽ chèn như sau: Trình duyệt của bạn không hỗ trợ thẻ video Đoạn text "Trình duyệt của bạn không hỗ trợ thẻ video" sẽ được hiển thị nếu browser của bạn không hỗ trợ HTML5.
Dịch Vụ Hỗ Trợ Vay Tiền Nhanh 1s. Trang chủ Tham khảo Tag html html5 Định nghĩa và sử dụng Tag xác định một video, chẳng hạn như một đoạn phim hoặc một trường video. Đoạn text nằm bên trong và sẽ hiển thị khi trình duyệt không hỗ trợ tag Thường dùng kèm với tag để hiện thị được nhiều nội dung hơn. Sự khác nhau giữa và HTML5 HTML5 ● Không hỗ trợ ● Đây là tag mới trong HTML5 Cấu trúc Dòng thông báo Html viết Trình duyệt bạn đang dùng không hỗ trợ tag video. Hiển thị nhiều nội dung với tag Do trình duyệt hỗ trợ các định dạng file video khác nhau, nên cách dùng trên có thể chạy video cho nhiều trình duyệt và hệ điều hành khác nhau. Định dạng file video hỗ trợ bởi trình duyệt và hệ điều hành WebM X 4 6 X X X X Ogg X 6 X X X X MPEG-4 9 X X X X X Chuyển đổi định dạng file video Trình duyệt hỗ trợ Yêu cầu phiên bản trình duyệt với mức tối thiểu được hỗ trợ cho thẻ Trình duyệt dành cho PC Tag được hỗ trợ trong đa số các trình duyệt. Thiết bị hỗ trợ Yêu cầu phiên bản hệ điều hành và trình duyệt với mức tối thiểu được hỗ trợ cho thẻ ĐIỆN THOẠI SMARTPHONE Hệ điều hành Trình duyệt MÁY TÍNH BẢNG TABLETS Hệ điều hành Trình duyệt Thuộc tính Cách sử dụng Thuộc tính tùy chọn Thuộc tính Giá trị Ví dụ Mô tả audio muted audio="muted" Xác định trạng thái mặc định của âm thanh. autoplay autoplay autoplay="autoplay" Xác định trạng thái tự động chạy của video. controls controls controls="controls" Hiển thị bộ điều khiển của video. height pixel height="100px" Xác định chiều cao của video. loop loop loop="loop" Xác định video có được lặp lại hay không. poster URL poster="image/ Xác định hình đại diện cho video. preload preload preload="preload" Xác định việc tải video khi tải trang. src URL src="video/ Xác định đường dẫn của video. width pixel width="100px" Xác định chiều rộng của video. Thuộc tính Tổng quát và thuộc tính sự kiện Tất cả thuộc tính tổng quát và thuộc tính sự kiện được xác định trên phần lớn các thành phần HTML5
Thẻ video trong HTML 1. Định nghĩa và cách sử dụng Thẻ được sử dụng để nhúng nội dung video vào tài liệu, chẳng hạn như một đoạn phim hoặc các luồng video khác Thẻ chứa một hoặc nhiều thẻ với các nguồn video khác nhau. Trình duyệt sẽ chọn nguồn đầu tiên mà nó hỗ trợ Văn bản giữa thẻ và sẽ chỉ được hiển thị trong các trình duyệt không hỗ trợ thẻ Có ba định dạng video được hỗ trợ trong HTML MP4, WebM và OGG Trình duyệt MP4 WebM Ogg Edge YES YES YES Chrome YES YES YES Firefox YES YES YES Saf YES YES NO Opera YES YES YES 2. Ví dụ về 3. Các trình duyệt hỗ trợ Phần tử
Thẻ video HTML5 giúp bạn dễ dàng thêm video vào các trang Web của mình . Nhưng bề ngoài thì có vẻ dễ dàng, nhưng có rất nhiều thứ bạn cần phải làm để bắt đầu và chạy video của mình. 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 HTML5 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 sang Ogg cho Firefox Chuyển đổi video thành MP4 cho Safari và Internet Explorer Thêm phần tử video vào trang web của bạn Thêm trình phát JavaScript để đưa Internet Explorer hoạt động Kiểm tra càng nhiều trình duyệt càng tốt 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 bạn 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á tin tưởng rằng bất kỳ ai cũng có thể xem video đó. Nhưng việc sử dụng YouTube để nhúng video của bạn có một số mặt hạn chế 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 Máy chủ ngừng hoạt động Nội dung bị xóa dường như tùy ý Quá nhiều nội dung xấu Nhưng có một số lý do tại sao YouTube cũng không tốt cho các nhà phát triển nội dung, bao gồm Thời lượng tối đa 10 phút cho video đối với tài khoản miễn phí Hiệu suất tải lên kém YouTube có được 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 Video HTML5 mang lại một số lợi thế so với YouTube Sử dụng HTML5 cho video 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 gì, nơi lưu trữ video và cách máy chủ hoạt động. Và HTML5 cung cấp cho bạn cơ hội mã hóa video của bạn ở nhiều định dạng tùy thích để đảm bảo số lượng người tối đa có thể xem. 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 cung cấp một số mặt hạn chế Bao gồm các Bạn phải mã hóa video của mình bằng í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ợ HTML5 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 video lưu trữ. Tổng quan nhanh về Hỗ trợ Video trên Web Thê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 thứ có thể xảy ra sai sót Đầu tiên, bạn sử dụng thẻ để nhúng video vào trang của mình. NHƯNG thẻ đó không được dùng nữa để thay thế cho thẻ khác. Và một số trình duyệt không bao giờ hỗ trợ nó tốt. Vì vậy, bạn chuyển sang thẻ , nhưng các trình duyệt cũ hơn không hỗ trợ thẻ này và các trình duyệt mới hơn thì hỗ trợ sơ sài. 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òn được hỗ trợ trên các thiết bị Windows. Vì vậy, bạn quyết định tải video của mình lên một trang web nhúng video như YouTube, nhưng sau đó bạn gặp các vấn đề với YouTube mà chúng tôi đã thảo luận. Cuối cùng, bạn quyết định sử dụng HTML5, nhưng Internet Explorer không hỗ trợ nó phải đến Internet Explorer 9. Và ngay cả khi bạn làm như vậy, có hai tiêu chuẩn codec video được hỗ trợ và chỉ một trình duyệt có thể sử dụng cả hai. Vậy bạn phải làm gì? Từ bỏ video không còn là một lựa chọn đối với 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 đã chuyển sang video thành công. 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 Opera Chrome Safari 3 và 4, iPhone và Android, cũng như Internet Explorer 7 và 8. Bạn cũng sẽ có các phím bạn cần để thêm hỗ trợ cho các trình duyệt cũ khác nếu cần. Tạo và chỉnh sửa video của bạn Điều đầu tiên bạn cần khi đưa video lên trang Web là video thực tế. Bạn có thể quay liên tục và chỉnh sửa sau đó để tạo ra một tính năng hoặc bạn có thể viết kịch bản và lên kế hoạch cho nó trước thời hạn. Dù bằng cách nào cũng hoạt động tốt, chỉ cần bạn cảm thấy thoải mái là được. Nếu bạn không biết mình nên tạo loại video nào, hãy xem những ý tưởng này từ Hướng dẫn Video dành cho 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 qua video Làm thế nào để Video Video đám cưới Tìm hiểu cách quay video chất lượng cao Đảm bảo rằng 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 sẽ gây hại cho mắt, và quá tối sẽ trông rất khó chịu và thiếu chuyên nghiệp. Ngay cả khi bạn chỉ định có một video 30 giây trên trang web của mình, chất lượng càng cao thì video đó sẽ phản ánh trên trang web của bạn càng tốt. Cũng nên nhớ rằng bản quyền áp dụng cho bất kỳ âm thanh hoặc nhạc nào cũng như cảnh quay trong kho 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à chơi 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ạn Bạn sử dụng phần mềm chỉnh sửa nào không quan trọng, chỉ cần 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 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 của mình để chúng trông đẹp mắt. Lưu Video của bạn vào 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ả 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 các tệp này như chúng vốn có, nhưng bạn sẽ gặp phải tất cả các vấn đề với video mà chúng ta đã thảo luận. Các trang sau 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 được tệp. 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 Opera 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, 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 đổi Có một công cụ trực tuyến được gọi là Media-Convert tuyên bố chuyển đổi nhiều định dạng video và âm thanh sang các định dạng video và âm thanh khác. Khi chúng tôi thử nó với video thử nghiệm dài 3 giây của tôi, chúng tôi không thể làm cho nó hoạt động trên máy Mac của tôi. 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 Miro Video Converter Windows Macintosh Chương trình này có lợi ích là chuyển đổi sang cả Ogg và MP4 và nó là mã nguồn mở. Công cụ chuyển đổi video miễn phí Chúng tôi nghĩ rằng phần mềm này có cả phiên bản Windows và Macintosh, nhưng thật khó để nhận biết từ trang web của họ Bộ mã hóa Theora đơn giản Macintosh Đây là bộ mã hóa mà chúng tôi có xu hướng sử dụng. 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. Chuyển đổi video thành MP4 cho Safari và Internet Explorer Định dạng tiếp theo bạn nên chuyển đổi video của mình thành MP4 video để có thể phát trên Internet Explorer 9 trở lên, Safari 3 và 4, iPhone và Android. Định dạng này sẵn có hơn trong các sản phẩm thương mại và bạn có thể đã có một 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. Nhiều trình chuyển đổi mà chúng ta đã thảo luận ở trang trước cũng chuyển đổi video sang MP4. MediaConvert Một công cụ AWS trực tuyến. Miro Video Converter Windows Macintosh Chương trình này có lợi ích là chuyển đổi sang cả Ogg và MP4 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 Free Video Converter Chúng tôi nghĩ rằng phần mềm này có cả phiên bản Windows và Macintosh, nhưng thật khó để nhận biết từ trang web của họ. Thêm phần tử video vào trang web của bạn Tạo trang Web của bạn như cách bạn thường tạo Bên trong phần thân, đặt thẻ Quyết định những thuộc tính bạn muốn video của mình có Chúng tôi khuyên bạn nên sử dụng các điều khiển và tải trước. Sử dụng tùy chọn áp phích nếu video của bạn không có cảnh đầu tiên đẹp. autoplay - bắt đầu ngay khi tải xuống điều khiển - cho phép người đọc của bạn điều khiển video tạm dừng, tua lại, tua đi nhanh vòng lặp - bắt đầu video từ đầu khi nó kết thúc tải trước - tải xuống trước video để video sẵn sàng nhanh hơn khi khách hàng nhấp vào áp phích - xác định hình ảnh bạn muốn sử dụng khi video bị dừng 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 Opera 10 và / hoặc Safari 4 và đảm bảo rằng nó hiển thị chính xác. Bạn nên kiểm tra nó trong ít nhất Firefox và Safari 4 - vì chúng sử dụng một codec khác nhau. Đó là nó. Sau khi có mã này, bạn sẽ có một video hoạt động trong Firefox Safari 4, Opera 10 và Chrome 1. Nhưng còn Internet Explorer thì sao? Rất dễ dàng 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ù không phải tất cả chúng đều hỗ trợ nó theo cách giống nhau. 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ó thể viết bốn hoặc năm dòng HTML để hiển thị video trong hầu hết các trình duyệt hiện đại ngoại trừ Internet Explorer 8. Đây là cách thực hiện Viết mã đánh dấu loại tài liệu HTML 5 để các trình duyệt biết mong đợi HTML 5 Tạo trang Web của bạn như cách bạn thường tạo Bên trong phần thân, đặt thẻ Quyết định những thuộc tính bạn muốn video của mình có Chúng tôi khuyên bạn nên sử dụng các điều khiển và tải trước. Sử dụng tùy chọn áp phích nếu video của bạn không có cảnh đầu tiên đẹp. autoplay - bắt đầu ngay khi tải xuống điều khiển - cho phép người đọc của bạn điều khiển video tạm dừng, tua lại, tua đi nhanh vòng lặp - bắt đầu video từ đầu khi nó kết thúc tải trước - tải xuống trước video để video sẵn sàng nhanh hơn khi khách hàng nhấp vào áp phích - xác định hình ảnh bạn muốn sử dụng khi video bị dừng 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 Opera 10 và / hoặc Safari 4 và đảm bảo rằng nó hiển thị chính xác. Bạn nên kiểm tra nó trong ít nhất Firefox và Safari 4 vì chúng sử dụng một codec khác nhau. Đó là nó. Sau khi có mã này, bạn sẽ có video hoạt động trong Firefox Safari 4, Opera 10, Internet Explorer 9+ và Chrome 1. Kiểm tra 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 hoạt động như thế nào, đặc biệt nếu nhiều người đọc của bạn sử dụng các trình duyệt cũ hơn. Việc 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 đảm bảo 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 nó không đáng tin cậy bằng việc tự đưa trang lên trình duyệt. Khi bạn làm điều đó, bạn thực sự có thể biết liệu nó có hoạt động hay không. Vì bạn đã gặp khó khăn khi mã hóa video của mình ở nhiều định dạng, bạn nên kiểm tra nó để đảm bảo rằng video hiển thị trên nhiều trình duyệt. Điều này có nghĩa là, tối thiểu, bạn nên thử nghiệm 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 rất khó để biết liệu có sự cố hay không hoặc codec nào mà Chrome đang sử dụng. Để 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 hoạt động như thế nào, đặc biệt nếu nhiều người đọc 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ơn Như 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 như thế nào. Nếu 90% khách hàng của bạn sử dụng Netscape, thì bạn nên có một kế hoạch dự phòng cho họ. Nhưng nếu ít hơn 1% thì điều đó có thể không quan trọng lắm. Khi bạn đã quyết định những trình duyệt nào bạn sẽ cố gắng hỗ trợ, cách dễ nhất là chỉ cần tạo một trang thay thế để họ xem video. Trên trang thay thế đó, bạn sẽ nhúng video bằng HTML 4. Và sau đó hoặc 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 liên kết đến trang đó trên trang này.
Ví dụ và cách sử dụng thẻ video trong HTML5. Sử dụng javascript để lắng nghe các sự kiện và tùy chỉnh các thuộc tính trong thẻ Video. Trình duyệt của bạn không hỗ trợ thẻ video trong HTML5. Video được cung cấp từ Big Buck Bunny. Code 1234567891011121314151617 Trình duyệt của bạn không hỗ trợ thẻ video trong được cung cấp từBig Buck Bunny. Demo Hiển thị video trên web Trước khi HTML5 ra đời, không có bất kỳ chuẩn nào quy định việc hiển thị video trên website. Nếu muốn hiển thị video trên trình duyệt, thông thường người dùng phải thêm chương trình hỗ trợ như flash. Khi thẻ được đưa vào HTML5, bạn có thể dễ dàng chèn video theo đúng chuẩn. Trình duyệt hỗ trợ Số trong bảng dưới đây thể hiện phiên bản đầu tiên của trình duyệt hỗ trợ đầy đủ cho thuộc tính. Thuộc tính Video Thẻ video trong HTML5 Sử dụng thẻ để hiển thị video trong HTML5 1234567891011121314151617 Trình duyệt của bạn không hỗ trợ thẻ video trong được cung cấp từBig Buck Bunny. Demo Cách sử dụng thẻ video Thuộc tính controls cho phép hiển thị thanh điều khiển video như bắt đầu, tạm dừng, âm lượng… Thuộc tính height và width được sử dụng để quy định chiều cao và độ rộng của video. Nếu thuộc tính height và width không được thiết lập, trình duyệt sẽ không biết kích thước chính xác của video dẫn tới trang có thể bị co dãn khi tải video. Đoạn thông báo nằm giữa thẻ và chỉ hiển thị đối với những trình duyệt không hỗ trợ thẻ . Bạn có thể sử dụng nhiều thẻ để liên kết tới tệp tin video có định dạng khác nhau. Trình duyệt sẽ tự động tải kiểu video mà nó hỗ trợ. Nếu có nhiều kiểu video được hỗ trợ trong thẻ , trình duyệt sẽ sử dụng kiểu đầu tiên. Tự động chạy video Để video tự động chạy ngay khi tải trang, bạn sử dụng thuộc tính autoplay Trình duyệt của bạn không hỗ trợ thẻ video trong được cung cấp từ Big Buck Bunny. Demo Thuộc tính autoplay không hoạt động trên Safari, Opera và các thiết bị di động như iPad, iPhone. Định dạng video được hỗ trợ Hiện tại, có 3 kiểu định dạng được hỗ trợ trong thẻ là MP4, WebM và Ogg Trình duyệtMP4WebMOgg Internet ExplorerCÓKHÔNGKHÔNG ChromeCÓCÓCÓ FirefoxCÓCÓCÓ SafariCÓKHÔNGKHÔNG OperaCÓ từ phiên bản 25CÓCÓ Các kiểu video Định dạngKiểu MP4video/mp4 WebMvideo/webm Oggvideo/ogg Phương thức, thuộc tính, sự kiện trong thẻ video HTML5 sử dụng DOM cho các phương thức, thuộc tính và sự kiện của thẻ . Nó cho phép bạn tải, chạy, dừng video cũng như thiết lập thời lượng và âm lượng của video. Bạn có thể sử dụng javascript để bắt các sự kiện trong DOM qua đó nắm được các trạng thái của video như video bắt đầu chạy, tạm dừng, Trình duyệt của bạn không hỗ trợ thẻ video trong HTML5. Video được cung cấp từ Big Buck Bunny. Code 12345678910111213141516171819202122232425262728293031323334353637383940414243 Chạy/Tạm dừngCỡ lớnCỡ nhỏCỡ vừaTrình duyệt của bạn không hỗ trợ thẻ video trong myVideo = playPause {if makeBig { = 560;}function makeSmall { = 320;}function makeNormal { = 420;}Video được cung cấp từ Big Buck Bunny. Demo
Ví dụ về video trong HTMLChạy video trong HTMLPhần tử trong HTMLCách hoạt động?Phát tự động video trong HTMLHTML Video – Hỗ trợ trình duyệtHTML Video – Các kiểu MediaHTML Video – Các phương thức, thuộc tính và sự kiệnThẻ Video trong HTML5Kết luận Nguồn Big Buck Bunny Trình duyệt của bạn không hỗ trợ thẻ video của HTML5. Chạy video trong HTML Trước HTML5, video chỉ có thể được chạy được trong các trình duyệt có cài đặt plug-in để xem video ví dụ như flash. Video trong HTML5 định nghĩa một chuẩn để nhúng video vào một trang web. Phần tử trong HTML Để hiển thị một video HTML, sử dụng phần tử Ví dụ Trình duyệt của bạn không hỗ trợ thẻ video. Kết quả Trình duyệt của bạn không hỗ trợ thẻ video. Cách hoạt động? Thuộc tính controls thêm các điều khiển cho video như chạy, dừng và âm lượng. Một ý tưởng tốt là luôn sử dụng thuộc tính chiều rộng width và chiều cao height. Nếu chiều cao và chiều rộng không được thiết lập, trang web có thể rung hình trong khi tải video. Phần tử cho phép bạn định nghĩa các các tập tin video thay thế mà trình duyệt có thể chọn từ đó. Trình duyệt sẽ sử dụng các định dạng đầu tiên mà nó nhận biết được. Đoạn văn bản nằm giữa thẻ và sẽ chỉ hiển thị trong trình duyệt mà trình duyệt không hỗ trợ phần tử . Phát tự động video trong HTML Để một video chạy tự động ta sử dụng thuộc tính autoplay Ví dụ Trình duyệt của bạn không hỗ trợ thẻ video. Kết quả Trình duyệt của bạn không hỗ trợ thẻ video. Thuộc tính autoplay không làm việc trong các thiết bị di động như iPad và iPhone. HTML Video – Hỗ trợ trình duyệt Trong HTML5, Có 3 loại video được hỗ trợ với định dạng MP4, WebM, and Ogg. Các trình duyệt hỗ trợ các định dạng khác nhau Trình duyệtMP4WebMOggInternet ExplorerCóKhôngKhôngChromeCóCóCóFirefoxCóCóCóSafariCóKhôngKhôngOperaCó từ Opera 25CóCó HTML Video – Các kiểu Media Định dạng FileKiểu MediaMP4video/mp4WebMvideo/webmOggvideo/ogg HTML Video – Các phương thức, thuộc tính và sự kiện HTML5 định nghĩa DOM Data Object Model với các phương thức, thuộc tính và sự kiện cho phần phần tử . Điều này cho phép bạn tải, chạy và dừng video, cũng như các thiết lập thời gian chạy và âm lượng. Cũng có những sự kiện DOM có thể thông báo cho bạn khi video bắt đầu chạy, dừng, vv. Ví dụ Sử dụng JavaScript Play/Pause Big Small Normal Your browser does not support HTML5 video. var myVideo = function playPause { if else } function makeBig { = 560; } function makeSmall { = 320; } function makeNormal { = 420; } Kết quả Your browser does not support HTML5 video. Thẻ Video trong HTML5 ThẻMô tảĐịnh nghĩa một video hoặc đoạn phimĐịnh nghĩa nhiều nguồn tài nguyên cho phần tử media, cũng như vàĐịnh nghĩa phần text hiển thị khi chạy nhạc Kết luận Qua đây là một số chia sẻ về video trong HTML, mời bạn tiếp tục theo dõi các bài viết sau để hiểu rõ hơn về HTML. Các bạn có thể tham khảo các bài viết hay về HTML tại đây. Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.
thẻ video trong html