# 180: Làm video trên thiết bị di động - Thủ thuật CSS

Anonim

Cảnh báo công bằng: Tôi không phải là chuyên gia về nội dung này, tôi chỉ xem video trên web và giải quyết một số vấn đề tôi gặp phải khi hiển thị các video clip trong các bài đăng trên blog.

Tôi có một trình mô phỏng iOS trong video này và tôi đang đặt một thẻ video HTML vào tài liệu HTML cơ bản cho một video nhanh mà tôi đã quay bằng Kap.

Có rất nhiều điều cần xem xét với video:

  1. Trao quyền kiểm soát! Như trong ,. Lưu ý trong video, tôi đã mất một phút để nhận ra đó là lý do tại sao video không hiển thị bất kỳ thứ gì trên thiết bị di động cho đến khi xuất hiện.
  2. Phát video nội tuyến, chẳng hạn như , điều này khiến video không ở chế độ toàn màn hình trên thiết bị di động vào lần thứ hai bạn phát.
  3. Định kích thước linh hoạt và theo tỷ lệ khung hình.
  4. Nơi lưu trữ nó. Máy chủ web của bạn có tốt không? Nó có nên nằm trên CDN không? Bạn có nên sử dụng một máy chủ phương tiện chuyên về những thứ như thế này không? Trong video, tôi sử dụng nó trên Droplr rất tiện lợi, sau đó trên CodePen Asset Hosting cũng rất tiện dụng và cuối cùng là trên Cloudinary vì nó có thể thực hiện những công việc ưa thích như tối ưu hóa và xử lý định dạng.
  5. Đảm bảo video sẽ giống một video chết tiệt. Trên điện thoại di động, nếu bạn đang sử dụng , có nghĩa là một poster: . Nếu không, bạn nhận được một màu trắng không có gì. Đôi khi, chỉ điều đó thôi cũng đáng để sử dụng một số loại trợ giúp.

Tất nhiên, bạn có thể chuck video trên YouTube hoặc bất cứ điều gì và xử lý video tốt mà không cần gì cả. Nhưng YouTube không phải lúc nào cũng phù hợp với những video trình diễn nhỏ như tôi đã làm ở đây. Thêm vào đó, chúng nặng, vì vậy bạn có thể nhìn vào việc tải chúng một cách lười biếng.

Cuối cùng, chúng tôi xem xét studio.cloudinary.com. Nó có thể thực hiện một số công việc gọn gàng, như cung cấp trình phát tùy chỉnh và phát trực tuyến tốc độ bit thích ứng, điều này rất lạ mắt và thực sự có vẻ như là một điều quan trọng để có hiệu suất video tốt nhất có thể.