THML5 VIDEO not working mobi (lỗi không có ảnh bìa)

Thảo luận trong 'Ngôn ngữ lập trình CSS, HTML, HTML5' bắt đầu bởi seolagi, 3/7/24.

  1. seolagi
    Tham gia ngày:
    16/4/14
    Bài viết:
    1,044
    Đã được thích:
    81
    Điểm thành tích:
    48
    chào mọi người, em có sử dụng code dưới để nhúng video html 5 vào website, trên máy tính bàn thì hoạt động bình thường, nhưng khi xem trên mobi di động, đặc biệt iphone thì nó không hiển thị gì cả. Chỉ hiện thị 1 vùng trắng.

    Ấn vào vùng trắng hiển thị trên điện thoại mobi thì nó mới tải video từ từ lên được. Có cách nào hiển thị video hình ảnh thumbnail của video đó lên được không?
    Mã:
    <video width="260" height="500" class="video" controls>
<source src="/wp-content/uploads/2024/07/videott.mp4" type="video/mp4">
</video>
    Em có lên mạng tìm hiểu add thêm code sau vào video thì nó tự động phát trên mobi, em thì chèn tới 5 cái video khi xem trên điện thoại nó phát 1 lúc chóng mặt, có cách nào khách ấn vào nó mới xem được không? giúp em với.
    Mã:
    <video width="260" height="500" class="video" playsinline autoplay loop muted controls>
<source src="/wp-content/uploads/2024/07/videott.mp4" type="video/mp4">
</video>
     
    Cảm ơn đã xem bài:

    THML5 VIDEO not working mobi (lỗi không có ảnh bìa)

    seolagi, 3/7/24
    #1
  3. admin
    Tham gia ngày:
    22/5/13
    Bài viết:
    4,992
    Đã được thích:
    1,215
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Demo trên điện thoại iphone xem được video bình thường.

    video-tren-dien-thoai-1.jpg

    Em sửa đoạn code trên thành như sau nhé:

    Mã:
    <video width="260" height="500" poster="/wp-content/uploads/2024/07/bvideo.jpg"  class="video" controls>
<source src="/wp-content/uploads/2024/07/videott.mp4" type="video/mp4">
</video>
    • /wp-content/uploads/2024/07/bvideo.jpg là ảnh bìa video
    • /wp-content/uploads/2024/07/videott.mp4 đường dẫn video trên website
    CODE tham khảo thêm: muốn ẩn hiện cái controls trên máy tính bàn. Rê chuậ vào mới hiển thị nút play.
    Mã:
    var ttw = document.body.clientWidth;
if (ttw > 767) {
    $(".csvideo").hover(
        function () {
            this.setAttribute("controls", "controls");
        }, function () {
            this.removeAttribute("controls");
        }
    );
}
     
    admin, 3/7/24
    #2


Chủ để tương tự : THML5 VIDEO
Diễn đàn Tiêu đề Date
Ngôn ngữ lập trình CSS, HTML, HTML5 Tạo ảnh bìa thumbnail image cho video trong HTML5 như thế nào? 9/11/21
Ngôn ngữ lập trình CSS, HTML, HTML5 Xin kích thước tất cả các size của youtube video channel? 23/11/20
Ngôn ngữ lập trình CSS, HTML, HTML5 Video auto play/off/pause on hover mouse HTML 5 12/4/20