Lưu này như một file html và tải nó lên trong Android Chrome:HTML5 điều khiển video trên Android Chrome không trải dài toàn bộ chiều rộng của video trong trang này đơn giản
<html>
<body style="overflow:hidden;transform: scale(0.5, 0.5);">
<video controls>
<source src="http://techslides.com/demos/sample-videos/small.mp4">
</video>
</body>
</html>
Nó sẽ giống như thế này:
Nếu bạn chơi đùa với nó, bạn sẽ thấy rằng việc loại bỏ một trong hai overflow:hidden hoặc transform:scale sẽ làm cho các điều khiển trải dài toàn bộ chiều rộng của video như mong đợi. Tuy nhiên, sự kết hợp của hai kiểu này làm cho bất kỳ điều khiển video nào có kích thước không chính xác, như được hiển thị.
This question có vẻ hơi liên quan và đề xuất thêm transform: translateZ(0) vào phần tử chứa, tuy nhiên việc thêm bản dịch đó vào biến đổi hiện có trên cơ thể hoặc vào div chứa mới không giải quyết được vấn đề.
Đây có phải là lỗi trong Android Chrome không? Tôi không hiểu tại sao kết hợp của hai kiểu này lại ảnh hưởng đến chiều rộng điều khiển video.
Việc thêm chế độ xem có trợ giúp không? Có thể trình duyệt đang phát minh ra kích thước khung nhìn khác nhau trong mỗi trường hợp. –
là hành vi như mong đợi trong các trình duyệt/thiết bị khác? –
@JoshLee - việc thêm chế độ xem không giúp được gì. Thêm '' trong một '
' không có hiệu lực. @ mad.meesh - Đúng vậy. Trên mọi trình duyệt dành cho máy tính để bàn, các điều khiển video trải rộng toàn bộ chiều rộng của video. Giống nhau trên iPhone 6 plus của tôi. Tương tự trên Android Firefox. Điều này dường như bị giới hạn đối với Android Chrome. – alan