Tạo ảnh bìa thumbnail image cho video trong HTML5 như thế nào?

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

  1. seolagi

    seolagi

    Moderator

    Thành viên BQT

    Tham gia ngày:
    16/4/14
    Bài viết:
    851
    Đã được thích:
    72
    Điểm thành tích:
    28
    Hi mọi người, mình có cái video tải lên hosting sau đó cài code video html5 vào web, giờ làm sao để đổi được cái ảnh bìa thumbnail cho video nhỉ?

    Code video HTML5 của mình là:
    Mã:
    <video width="100%" controls>
        <source src="/wp-content/uploads/thumbnail/tbimg.jpg" type="img/jpg">
        <source src="/wp-content/uploads/video/video.mp4" type="video/mp4">
    </video>
    
    Mình có làm ảnh bìa cho video html5 như trên mà không được. Bạn nào biết giúp mình với

    tao-anh-nen-cho-video.jpg
     
    Cảm ơn đã xem bài:

    Tạo ảnh bìa thumbnail image cho video trong HTML5 như thế nào?

  2. admin

    admin Phạm Công Sơn Thành viên BQT

    Tham gia ngày:
    22/5/13
    Bài viết:
    4,521
    Đã được thích:
    1,095
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Tạo ảnh bìa cho video thì bạn dùng thuộc tính poster="" để tạo nhé, video bạn đổi lại như sau:
    HTML:
    <video width="100%" poster="/wp-content/uploads/thumbnail/tbimg.jpg" controls>
        <source src="/wp-content/uploads/video/video.mp4" type="video/mp4">
    </video>
    
     
    seolagi thích bài này.
  3. seolagi

    seolagi

    Moderator

    Thành viên BQT

    Tham gia ngày:
    16/4/14
    Bài viết:
    851
    Đã được thích:
    72
    Điểm thành tích:
    28
    Cảm ơn ad em đã làm được rồi, thanks
     
  4. Đầu Tư là gì

    Đầu Tư là gì Thành Viên Mới

    Tham gia ngày:
    18/11/21
    Bài viết:
    4
    Đã được thích:
    0
    Điểm thành tích:
    1
    Giới tính:
    Nữ
    Cho em hỏi làm cho áp phích video HTML5 có cùng kích thước với chính video như thế nào ạo_O
    ______________________________________________________________
    ĐẦU TƯ là gì ? Loại hình ĐẦU TƯ bạn cần biết ? Các chiến lược ĐẦU TƯ CHỨNG KHOÁN an toàn hiệu quả 2021 !;)
    >>> Xem ngay tại : Dautulagi.com
     


Like và Share ủng hộ ITSEOVN