Biến video thành mã html

Chèn video vào một trang web không tương đối dễ dàng vì các trình duyệt web không có tiêu chuẩn thống nhất để xác định các tệp phương tiện được nhúng như video

Trong chương này, chúng tôi sẽ trình bày một số cách thêm video trên các trang web, từ phần tử HTML5 mới nhất cho đến các video phổ biến trên YouTube

Sử dụng Phần tử video HTML5

Phần tử HTML5 mới được giới thiệu cung cấp một cách tiêu chuẩn để nhúng video vào các trang web. Tuy nhiên, yếu tố video tương đối mới, nhưng nó hoạt động trong hầu hết các trình duyệt web hiện đại

Ví dụ sau chỉ cần chèn video vào tài liệu HTML, sử dụng bộ điều khiển mặc định của trình duyệt, với một nguồn được xác định bởi thuộc tính src

    Your browser does not support the HTML5 Video element.

Video, sử dụng bộ điều khiển mặc định của trình duyệt, với các nguồn thay thế

    
    
    Your browser does not support the HTML5 Video element.

Sử dụng đối tượng Element

element is used to embed different kinds of media files into an HTML document. Initially, this element was used to insert ActiveX controls, but according to the specification, an object can be any media object such as video, audio, PDF files, Flash animations or even images.

The following code fragment embeds a Flash video into a web page.

    
    
    Your browser does not support the HTML5 Video element.

0

    
    
    Your browser does not support the HTML5 Video element.

1

    
    
    Your browser does not support the HTML5 Video element.

2

    
    
    Your browser does not support the HTML5 Video element.

3

Phần tử được sử dụng để nhúng nội dung đa phương tiện vào tài liệu HTML

The following code fragment embeds a Flash video into a web page.

    
    
    Your browser does not support the HTML5 Video element.

0

Cảnh báo. Tuy nhiên, phần tử được hỗ trợ rất tốt trong các trình duyệt web hiện tại và nó cũng được xác định là tiêu chuẩn trong HTML5, nhưng video của bạn có thể không phát do trình duyệt không hỗ trợ Flash hoặc không có plugin

    
    
    Your browser does not support the HTML5 Video element.

8

    
    
    Your browser does not support the HTML5 Video element.

9

0

1

2

3

4

5 thẻ và không hỗ trợ tất cả các trình duyệt. Điều này có thể gây rắc rối lớn khi thêm nhiều nguồn để hỗ trợ các định dạng khác nhau

Iframe là một khung nội tuyến cho phép các mục trong một trang web được nhúng vào một trang web khác. Ví dụ: iframe cho phép bạn nhúng video YouTube vào một trang web khác một cách dễ dàng. Bằng cách sử dụng iframe, bạn không phải lo lắng về vấn đề tương thích định dạng tệp

Lợi ích của việc nhúng video vào trang web của bạn

• Nó cải thiện thời gian tải trên trang web của bạn
• Nó cho phép bạn chọn các dịch vụ khác nhau để lưu trữ video
• Nó làm tăng sự tương tác với các bài đăng trên mạng xã hội
• Người dùng có thể phát video mà không cần phải rời khỏi trang web của họ

Nhúng video vào trang web bằng HTML và CSS

điều kiện tiên quyết

Bạn sẽ cần các điều kiện tiên quyết sau để nhúng video

• một máy tính
• mạng ổn định
• Tài khoản Google [Để truy cập YouTube]
• Notebook hỗ trợ HTML [Cái được sử dụng ở đây được gọi là Sublime Text]
• Kỹ năng mã hóa [Kiến thức cơ bản về HTML và CSS]
• một trình duyệt

Ghi chú bên lề về nhúng bằng iframe và URL

• Khi nhúng video từ một trang web, bạn có thể sử dụng URL video, iframe hoặc nhúng mã. Trong hướng dẫn này, chúng ta sẽ sử dụng iframe và URL
• Chúng tôi sẽ sử dụng YouTube, nền tảng video nổi tiếng. Nhúng video không chỉ giới hạn ở các video trên YouTube. Bạn có thể sử dụng chúng trên bất kỳ nền tảng truyền thông xã hội nào hỗ trợ video như Animoto, Facebook, Flickr, TED, Vimeo và Vine
• Chọn video mà bạn muốn nhúng. Sao chép và dán URL của nó
• URL là viết tắt của Bộ định vị tài nguyên thống nhất. Nó chỉ định vị trí chính xác của nội dung trên mạng máy tính

Các bước để nhúng video YouTube vào trang web của bạn

• Bước 1. Mở trang YouTube và tìm kiếm video mà bạn muốn nhúng

• Bước 2. Bấm vào video để chơi nó

• Bước 3. Bấm vào nút chia sẻ

Trong khi video phát, bạn sẽ thấy nút 'chia sẻ' bên dưới video. Khi nhấp vào nó, bạn sẽ tìm thấy một vài tùy chọn chia sẻ, bao gồm nhiều nền tảng truyền thông xã hội khác nhau

• Bước 4. Nhấp vào “Nhúng” như trong hình bên dưới

Sau khi nhấp vào 'Nhúng', YouTube sẽ tự động tạo mã để bạn sử dụng. Thẻ iframe sẽ có các thuộc tính khác nhau như URL của nguồn video, chiều rộng và chiều cao của video

• Bước 5. Nhấp vào 'sao chép'

Nhấp vào 'sao chép' như trong hình bên dưới. Mã đã sao chép sẽ được dán vào trang HTML của bạn

• Bước 6. Mở trang HTML của bạn

Định vị trang HTML của bạn, nơi bạn muốn dán thẻ khung nội tuyến

• Bước 7. Nhập hoặc dán thẻ khung nội tuyến mà bạn đã sao chép từ YouTube vào trang HTML của mình

Khối mã bên dưới cho biết cách bạn có thể nhúng video vào HTML

  Put your preferred title
  

  body{ background-color: purple;
  background-text: white;}

  



  EMBEDDING A VIDEO

  

Bạn có thể thay đổi tiêu đề hoặc màu nền cho phù hợp với nhu cầu của mình. Nhấn vào đây để kiểm tra mã này

• Bước 8. Lưu các thay đổi bạn đã thực hiện trên trang HTML của mình

Sau khi lưu, trong khi bạn vẫn đang ở trang HTML của mình, hãy nhấp chuột phải và chọn “Mở trong Trình duyệt”. Mã HTML của bạn sẽ chạy trong trình duyệt của bạn

• Bước 9. Đầu ra trình duyệt của bạn

Tùy thuộc vào mã HTML của bạn [hoặc cách bạn tạo kiểu cho nó], bạn có thể đặt thẻ khung nội tuyến ở bất kỳ đâu bạn muốn trong trang HTML của mình. Sau khi bạn đã nhúng thành công video vào trang web của mình, bạn có thể chủ động tương tác với video đó

Điều này có nghĩa là bạn có thể chuyển tiếp, tua lại, phát, tạm dừng và điều chỉnh âm lượng của video. Bạn cũng có thể nhấp vào biểu tượng YouTube trong trang được nhúng để phát video trực tiếp trên YouTube. Tất cả các hoạt động này được gọi là điều khiển video

• Bước 10. Thưởng thức quan điểm của bạn

Như đã đề cập trước đó, CSS được sử dụng để tạo kiểu cho trang web của bạn. Ảnh chụp màn hình ở trên có nền màu đỏ nâu trong khi ảnh chụp màn hình bên dưới có nền màu tím. Bạn có thể chơi với các kỹ năng HTML và CSS để phù hợp với sở thích của mình

Mẹo quan trọng

• Tránh video siêu liên kết. URL của video phải là URL của chính nó, không có bất kỳ ký tự hoặc dấu cách nào nếu không URL sẽ không được nhúng
• Siêu liên kết là một điểm nổi bật được thực hiện cho một liên kết sao cho khi được nhấp hoặc di chuột vào liên kết đó, trình duyệt sẽ tự động hiển thị một trang khác hoặc thay đổi trang hiện tại để hiển thị nội dung được tham chiếu
• Bạn cũng có thể nhúng hình ảnh và các nội dung khác vào bài đăng hoặc trang miễn là mục bạn muốn nhúng có URL riêng
• Nếu video bạn muốn nhúng không phải do bạn tạo, bạn nên xin phép chủ sở hữu để tránh vi phạm bản quyền

Sự kết luận

Cùng với việc biết cách nhúng video bằng HTML và CSS, chúng tôi đã tìm hiểu lý do đằng sau việc sử dụng thẻ iframe và URL thay vì thẻ

6 trong HTML5

Làm cách nào để chèn video mp4 vào HTML?

Video có thể là HTML không?

Làm cách nào để thêm video MOV vào HTML?

Bạn có thể sử dụng video trong HTML5 không?