B4: Cách chèn Flash, File nhạc, File Phim, Bản đồ vào file HTML5

Thảo luận trong 'Ngôn ngữ lập trình CSS, HTML, HTML5' bắt đầu bởi phamcongson, 10/12/15.

  1. phamcongson
    Tham gia ngày:
    3/6/13
    Bài viết:
    474
    Đã được thích:
    93
    Điểm thành tích:
    28
    Giới tính:
    Nam
    Bài 4: Cách chèn Flash, File nhạc, audio, File Video, File Phim, Bản đồ, chèn youtube, chèn iframe web khác web của bạn trong lập trình code HTML5

    1. Cách chèn file Flash vào web code HTML5

    • Cấu trúc: dùng thẻ embed.
    Mã:
    <embed src="đường dẫn tới file flash(swf)" width="180" height="300">
    
    Xem chi tiết tại:
    Mã:
    http://www.w3schools.com/html/html_object.asp
    2. Cách chèn file nhạc, audio vào web code HTML5
    • Cấu trúc: dùng thẻ audio
    Mã:
    <!-- thẻ 'audio' để chèn file nhạc vào code web html5 -->
    <audio autoplay controls>
        <!-- danh sách các file nhạc, nếu trình duyệt hỗ trợ định dạng nào, thì trình duyệt đó sẽ chạy file tương ứng -->
        <source src="media/baihat.mp3">
        <source src="media/baihat.ogg">
        Nội dung hiển thị nếu Trình duyệt không hỗ trợ định dạng MP3 này.
    </audio>
    
    Xem chi tiết tại:
    Mã:
    http://www.w3schools.com/html/html5_audio.asp
    3. Cách chèn file video vào web code HTML5
    • Cấu trúc: dùng thẻ video
    Mã:
    <!-- thẻ 'video' để chèn file video vào code web html5 -->
    <video width="500" height="300" controls>
        <source src="media/movie.mp4">
        Nội dung hiển thị nếu Trình duyệt không hỗ trợ định dạng mp4 này.
    </video>
    
    Xem chi tiết tại:
    Mã:
    http://www.w3schools.com/html/html5_video.asp
    4. Cách chèn youtube vào web
    • Trước tiên truy cập vào video youtube cần gắn.
    • Tiếp theo click chuật phải trên video cần gắn đó như hình dưới và chọn "Get embed code" và copy đoạn code hiển thị. Và gắn vào file .html nơi vị trí cần file youtube này hiển thị.
    chen-youtube-vao-code-html5.png
    Mã:
    </h2>
    <iframe width="640" height="360" src="https://www.youtube.com/embed/1ezsSs0sgrQ" frameborder="0" allowfullscreen>
    </iframe>
    
    Xem chi tiết tại:
    Mã:
    http://www.w3schools.com/html/html_youtube.asp
    5. Cách chèn web khác vào web của mình
    • Cấu trúc: dùng thẻ iframe
    Mã:
    <iframe src="http://vnexpress.net" width="800" height="600"></iframe>
    
    Download Code
    Demo Code:
    Mã:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Bài 4: Chèn Flash, file nhạc, file phim vào code HTML5</title>
    <meta name="description" content="Bài 4: Chèn Flash, file nhạc, file phim vào code HTML5, thẻ 'embed' dùng để chèn các thuộc tính flash, video, movie, img,.. code web html, thuộc tính scale='exactfit' để gắn cố định height và width lại ">
    </head>
    
    <body>
    <h1 align="center">Bài 4: Chèn Flash, file nhạc, file phim vào code HTML5</h1>
    
    <h2>1. Cách chèn file Flash vào web code HTML5</h2>
    
    <!-- thẻ 'embed' dùng để chèn các thuộc tính flash, video, movie, img,.. code web html, thuộc tính scale='exactfit' để gắn cố định height và width lại-->
    
    <embed src="media/24120_24-44.swf" width="600" height="800" scale="exactfit" >
    
    <embed src="media/BSTu_180x300.swf" width="180" height="300">
    
    <h2>2. Cách chèn file nhạc, audio vào web code HTML5</h2>
    
    <!-- thẻ 'audio' để chèn file nhạc vào code web html5 -->
    <audio autoplay controls>
        <!-- danh sách các file nhạc, nếu trình duyệt hỗ trợ định dạng nào, thì trình duyệt đó sẽ chạy file tương ứng -->
        <source src="media/baihat.mp3">
        <source src="media/baihat.ogg">
        Trình duyệt không hỗ trợ định dạng MP3 này.
    </audio>
    
    
    <h2>3. Cách chèn file video vào web code HTML5</h2>
    
    <!-- thẻ 'video' để chèn file video vào code web html5 -->
    <video width="500" height="300" controls>
        <source src="media/movie.mp4">
        Trình duyệt không hỗ trợ định dạng mp4 này.
    </video>
    
    <h2>4. Cách chèn youtube vào web</h2>
    
    <iframe width="640" height="360" src="https://www.youtube.com/embed/1ezsSs0sgrQ" frameborder="0" allowfullscreen>
    </iframe>
    
    <h2>5. Cách chèn bản đồ vào web</h2>
    
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3918.9994919255714!2d106.60138251514994!3d10.81135006150356!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31752b949a51e5ab%3A0xf4fddcb34210904!2zRGnhu4VuIMSRw6BuIFNFTyBWaeG7h3QgTmFtIElUU0VPVk4!5e0!3m2!1svi!2s!4v1449318698735" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
    
    <h2>6. Cách chèn web khác vào web của mình</h2>
    
    <iframe src="http://vnexpress.net" width="800" height="600"></iframe>
    
    </body>
    </html>
    
     
    Cảm ơn đã xem bài:

    B4: Cách chèn Flash, File nhạc, File Phim, Bản đồ vào file HTML5

    Chỉnh sửa cuối: 10/12/15


Chủ để tương tự : Cách chèn
Diễn đàn Tiêu đề Date
Ngôn ngữ lập trình CSS, HTML, HTML5 [Hỏi] Khoảng cách chữ text trong html css là thuộc tính gì ấy nhỉ? 1/9/20
Ngôn ngữ lập trình CSS, HTML, HTML5 Hướng dẫn cách cấu hình bản ghi MX cho Gmail trong cài đặt domain 11/8/20
Ngôn ngữ lập trình CSS, HTML, HTML5 Thuộc tính khoảng cách text, khoảng cách chữ trong html css là gì? 30/6/20
Ngôn ngữ lập trình CSS, HTML, HTML5 Thẻ <METER> Element Tag trong HTML5 cách sử dụng 25/2/18
Ngôn ngữ lập trình CSS, HTML, HTML5 Thẻ <PROGRESS> Element Tag trong HTML5 cách sử dụng 25/2/18