programming html

Trình phát html5

Thôi nói chung cái này tui thấy cái thư viện này nó hay nè, nó lải nhải nè nên giới thiệu choa anh em coi chơi

Ai có nhu cầu nhúng Player vào web thì coi thử nhoa

Vime. js support anh em Youtube, Vimeo, Dailymotion, HTML5, v. v

Trang chủ của nó đây. https. // vimejs. com/


Về cơ bản hướng dẫn trên trang chủ rất chi tiết nên không còn gì phải nói thêm

Anh em thích thì thích mà không thích thì commet chơi nha

Thẻnghiane nghĩa nè vimejs vime. js html5 player html player player web nghĩa nè code js vime

  • chia sẻ

Nghĩa Nê

Bạn có thể quan tâm

CẬP NHẬT. Trình phát âm thanh HTML5 với Danh sách phát. https. //github. com/trangsihung/html5-audio-player-with-playlist

Trong bài trước mình đã hướng dẫn sử dụng jQuery để điều khiển Thẻ âm thanh HTML5, lần này dựa vào đó chúng ta sẽ tạo Trình phát âm thanh HTML5 đơn giản. Trong bài mình tập trung vào jQuery, còn phần giao diện HTML-CSS thì các bạn có thể tham khảo phần này trong phần code HTML-CSS hoặc tự code một cái

HTML–CSS

1

One new in code HTML-CSS on is tag 

var player = {
        play  : $['#play'],
        stop  : $['#stop'],
        vol :   $['.volume input'],
    },
    song = new Audio[];
    song.type = 'audio/mpeg';
    control_player[song, player];
3 in HTML5. Về 
var player = {
        play  : $['#play'],
        stop  : $['#stop'],
        vol :   $['.volume input'],
    },
    song = new Audio[];
    song.type = 'audio/mpeg';
    control_player[song, player];
0 bạn có thể xem thêm thông tin tại

Nút điều khiển của người chơi là mình dùng để làm

JAVASCRIPT

Đây là phần quan trọng nhất đối với HTML5 Audio Player, ta thêm vào các tệp js sau. thư viện jQuery, plugin prefixfree giúp tự bổ sung tiền tố 

var player = {
        play  : $['#play'],
        stop  : $['#stop'],
        vol :   $['.volume input'],
    },
    song = new Audio[];
    song.type = 'audio/mpeg';
    control_player[song, player];
1 trong CSS
  • người chơi. js xử lý các thao tác mà chúng ta thực hiện trên trình phát như. nhấn play/pause, stop, tăng/giảm âm lượng
  • chủ yếu. js is main script section

Bắt đầu với 

var player = {
        play  : $['#play'],
        stop  : $['#stop'],
        vol :   $['.volume input'],
    },
    song = new Audio[];
    song.type = 'audio/mpeg';
    control_player[song, player];
2, đầu tiên ta tạo bộ chọn jQuery cho các thành phần của trình phát và gọi hàm 
var player = {
        play  : $['#play'],
        stop  : $['#stop'],
        vol :   $['.volume input'],
    },
    song = new Audio[];
    song.type = 'audio/mpeg';
    control_player[song, player];
3 với tham số là biến 
var player = {
        play  : $['#play'],
        stop  : $['#stop'],
        vol :   $['.volume input'],
    },
    song = new Audio[];
    song.type = 'audio/mpeg';
    control_player[song, player];
4

var player = {
        play  : $['#play'],
        stop  : $['#stop'],
        vol :   $['.volume input'],
    },
    song = new Audio[];
    song.type = 'audio/mpeg';
    control_player[song, player];

Sau đó trong tệp 

var player = {
        play  : $['#play'],
        stop  : $['#stop'],
        vol :   $['.volume input'],
    },
    song = new Audio[];
    song.type = 'audio/mpeg';
    control_player[song, player];
5 ta tạo hàm 
var player = {
        play  : $['#play'],
        stop  : $['#stop'],
        vol :   $['.volume input'],
    },
    song = new Audio[];
    song.type = 'audio/mpeg';
    control_player[song, player];
3 với các sự kiện nhấp vào nút chơi và nút dừng trên trình phát

function control[ctrl] {
    ctrl.play.on['click', function[e] {
        e.preventDefault[];
        status = $[this].find['i'].hasClass['icon-pause'] ? 'play' : 'pause';

        if[status == 'play']{
            $[this].changeClass['icon-pause','icon-play'];
        }else{
            $[this].changeClass['icon-play','icon-pause'];
        }
    }];

    ctrl.stop.on['click', function[e] {
        e.preventDefault[];
        button.play.changeClass['icon-pause','icon-play'];
    }];
}

$.fn.changeClass = function[before, after] {
    $[this].find['i'].removeClass[before].addClass[after];
}

Ta thấy khi click vào 

var player = {
        play  : $['#play'],
        stop  : $['#stop'],
        vol :   $['.volume input'],
    },
    song = new Audio[];
    song.type = 'audio/mpeg';
    control_player[song, player];
7, if icon is pause thì sẽ chuyển thành play và ngược khi icon is play thì sẽ chuyển thành pause. Khi nhấn nút dừng, biểu tượng tạm dừng sẽ phát thành công. Nếu thấy khó hiểu các bạn có thể xem click vào demo bên dưới để dễ hiểu hơn. function 
var player = {
        play  : $['#play'],
        stop  : $['#stop'],
        vol :   $['.volume input'],
    },
    song = new Audio[];
    song.type = 'audio/mpeg';
    control_player[song, player];
8 giúp code gọn hơn khi addClass và removeClass

1

Tiếp tục trong 

var player = {
        play  : $['#play'],
        stop  : $['#stop'],
        vol :   $['.volume input'],
    },
    song = new Audio[];
    song.type = 'audio/mpeg';
    control_player[song, player];
2 tạo thêm biến số 
function control[ctrl] {
    ctrl.play.on['click', function[e] {
        e.preventDefault[];
        status = $[this].find['i'].hasClass['icon-pause'] ? 'play' : 'pause';

        if[status == 'play']{
            $[this].changeClass['icon-pause','icon-play'];
        }else{
            $[this].changeClass['icon-play','icon-pause'];
        }
    }];

    ctrl.stop.on['click', function[e] {
        e.preventDefault[];
        button.play.changeClass['icon-pause','icon-play'];
    }];
}

$.fn.changeClass = function[before, after] {
    $[this].find['i'].removeClass[before].addClass[after];
}
0 lưu các thông tin về bài hát, bao gồm tên bài hát, ca sĩ và link file mp3

var player = {
        play  : $['#play'],
        stop  : $['#stop'],
        vol :   $['.volume input'],
    },
    song = new Audio[];
    song.type = 'audio/mpeg';
    control_player[song, player];
4

Đổi 

function control[ctrl] {
    ctrl.play.on['click', function[e] {
        e.preventDefault[];
        status = $[this].find['i'].hasClass['icon-pause'] ? 'play' : 'pause';

        if[status == 'play']{
            $[this].changeClass['icon-pause','icon-play'];
        }else{
            $[this].changeClass['icon-play','icon-pause'];
        }
    }];

    ctrl.stop.on['click', function[e] {
        e.preventDefault[];
        button.play.changeClass['icon-pause','icon-play'];
    }];
}

$.fn.changeClass = function[before, after] {
    $[this].find['i'].removeClass[before].addClass[after];
}
1, 
function control[ctrl] {
    ctrl.play.on['click', function[e] {
        e.preventDefault[];
        status = $[this].find['i'].hasClass['icon-pause'] ? 'play' : 'pause';

        if[status == 'play']{
            $[this].changeClass['icon-pause','icon-play'];
        }else{
            $[this].changeClass['icon-play','icon-pause'];
        }
    }];

    ctrl.stop.on['click', function[e] {
        e.preventDefault[];
        button.play.changeClass['icon-pause','icon-play'];
    }];
}

$.fn.changeClass = function[before, after] {
    $[this].find['i'].removeClass[before].addClass[after];
}
2 và giá trị 
function control[ctrl] {
    ctrl.play.on['click', function[e] {
        e.preventDefault[];
        status = $[this].find['i'].hasClass['icon-pause'] ? 'play' : 'pause';

        if[status == 'play']{
            $[this].changeClass['icon-pause','icon-play'];
        }else{
            $[this].changeClass['icon-play','icon-pause'];
        }
    }];

    ctrl.stop.on['click', function[e] {
        e.preventDefault[];
        button.play.changeClass['icon-pause','icon-play'];
    }];
}

$.fn.changeClass = function[before, after] {
    $[this].find['i'].removeClass[before].addClass[after];
}
3 theo 
function control[ctrl] {
    ctrl.play.on['click', function[e] {
        e.preventDefault[];
        status = $[this].find['i'].hasClass['icon-pause'] ? 'play' : 'pause';

        if[status == 'play']{
            $[this].changeClass['icon-pause','icon-play'];
        }else{
            $[this].changeClass['icon-play','icon-pause'];
        }
    }];

    ctrl.stop.on['click', function[e] {
        e.preventDefault[];
        button.play.changeClass['icon-pause','icon-play'];
    }];
}

$.fn.changeClass = function[before, after] {
    $[this].find['i'].removeClass[before].addClass[after];
}
0. Đặt mức cấm âm lượng đầu tiên của Âm thanh theo giá trị của 
function control[ctrl] {
    ctrl.play.on['click', function[e] {
        e.preventDefault[];
        status = $[this].find['i'].hasClass['icon-pause'] ? 'play' : 'pause';

        if[status == 'play']{
            $[this].changeClass['icon-pause','icon-play'];
        }else{
            $[this].changeClass['icon-play','icon-pause'];
        }
    }];

    ctrl.stop.on['click', function[e] {
        e.preventDefault[];
        button.play.changeClass['icon-pause','icon-play'];
    }];
}

$.fn.changeClass = function[before, after] {
    $[this].find['i'].removeClass[before].addClass[after];
}
5, do âm lượng chỉ có giá trị từ 0 đến 1 nên ta chia giá trị của 
function control[ctrl] {
    ctrl.play.on['click', function[e] {
        e.preventDefault[];
        status = $[this].find['i'].hasClass['icon-pause'] ? 'play' : 'pause';

        if[status == 'play']{
            $[this].changeClass['icon-pause','icon-play'];
        }else{
            $[this].changeClass['icon-play','icon-pause'];
        }
    }];

    ctrl.stop.on['click', function[e] {
        e.preventDefault[];
        button.play.changeClass['icon-pause','icon-play'];
    }];
}

$.fn.changeClass = function[before, after] {
    $[this].find['i'].removeClass[before].addClass[after];
}
5 cho 100 [do ta set max=100]. Use 
function control[ctrl] {
    ctrl.play.on['click', function[e] {
        e.preventDefault[];
        status = $[this].find['i'].hasClass['icon-pause'] ? 'play' : 'pause';

        if[status == 'play']{
            $[this].changeClass['icon-pause','icon-play'];
        }else{
            $[this].changeClass['icon-play','icon-pause'];
        }
    }];

    ctrl.stop.on['click', function[e] {
        e.preventDefault[];
        button.play.changeClass['icon-pause','icon-play'];
    }];
}

$.fn.changeClass = function[before, after] {
    $[this].find['i'].removeClass[before].addClass[after];
}
7 to audio auto play
2

F5 lại trình duyệt để kiểm tra kết quả. Ta thấy âm thanh đã phát tự động.
Tiếp theo là liên kết các điều khiển trên trình phát với phần Âm thanh.
3

Giải thích đoạn mã trên, khi Audio được phát thì giá trị của 

function control[ctrl] {
    ctrl.play.on['click', function[e] {
        e.preventDefault[];
        status = $[this].find['i'].hasClass['icon-pause'] ? 'play' : 'pause';

        if[status == 'play']{
            $[this].changeClass['icon-pause','icon-play'];
        }else{
            $[this].changeClass['icon-play','icon-pause'];
        }
    }];

    ctrl.stop.on['click', function[e] {
        e.preventDefault[];
        button.play.changeClass['icon-pause','icon-play'];
    }];
}

$.fn.changeClass = function[before, after] {
    $[this].find['i'].removeClass[before].addClass[after];
}
8 sẽ thay đổi và có sự kiện của 
function control[ctrl] {
    ctrl.play.on['click', function[e] {
        e.preventDefault[];
        status = $[this].find['i'].hasClass['icon-pause'] ? 'play' : 'pause';

        if[status == 'play']{
            $[this].changeClass['icon-pause','icon-play'];
        }else{
            $[this].changeClass['icon-play','icon-pause'];
        }
    }];

    ctrl.stop.on['click', function[e] {
        e.preventDefault[];
        button.play.changeClass['icon-pause','icon-play'];
    }];
}

$.fn.changeClass = function[before, after] {
    $[this].find['i'].removeClass[before].addClass[after];
}
9, khi đó ta tính phần trăm giữa 
function control[ctrl] {
    ctrl.play.on['click', function[e] {
        e.preventDefault[];
        status = $[this].find['i'].hasClass['icon-pause'] ? 'play' : 'pause';

        if[status == 'play']{
            $[this].changeClass['icon-pause','icon-play'];
        }else{
            $[this].changeClass['icon-play','icon-pause'];
        }
    }];

    ctrl.stop.on['click', function[e] {
        e.preventDefault[];
        button.play.changeClass['icon-pause','icon-play'];
    }];
}

$.fn.changeClass = function[before, after] {
    $[this].find['i'].removeClass[before].addClass[after];
}
8 và 
var player = {
        play  : $['#play'],
        stop  : $['#stop'],
        vol :   $['.volume input'],
    },
    song = new Audio[];
    song.type = 'audio/mpeg';
    control_player[song, player];
41 và lấy phần thưởng này đặt chiều rộng cho 
var player = {
        play  : $['#play'],
        stop  : $['#stop'],
        vol :   $['.volume input'],
    },
    song = new Audio[];
    song.type = 'audio/mpeg';
    control_player[song, player];
42 và giá trị của 
var player = {
        play  : $['#play'],
        stop  : $['#stop'],
        vol :   $['.volume input'],
    },
    song = new Audio[];
    song.type = 'audio/mpeg';
    control_player[song, player];
43. Còn 
var player = {
        play  : $['#play'],
        stop  : $['#stop'],
        vol :   $['.volume input'],
    },
    song = new Audio[];
    song.type = 'audio/mpeg';
    control_player[song, player];
42 và 
var player = {
        play  : $['#play'],
        stop  : $['#stop'],
        vol :   $['.volume input'],
    },
    song = new Audio[];
    song.type = 'audio/mpeg';
    control_player[song, player];
43 là phần nào thì xem lại phần HTML-CSS

var player = {
        play  : $['#play'],
        stop  : $['#stop'],
        vol :   $['.volume input'],
    },
    song = new Audio[];
    song.type = 'audio/mpeg';
    control_player[song, player];
2

Khi click vào 

var player = {
        play  : $['#play'],
        stop  : $['#stop'],
        vol :   $['.volume input'],
    },
    song = new Audio[];
    song.type = 'audio/mpeg';
    control_player[song, player];
43, ta lấy 
var player = {
        play  : $['#play'],
        stop  : $['#stop'],
        vol :   $['.volume input'],
    },
    song = new Audio[];
    song.type = 'audio/mpeg';
    control_player[song, player];
47 là phần trăm thời gian đã phát, từ đó tính thời gian của Audio khi đã phát theo 
var player = {
        play  : $['#play'],
        stop  : $['#stop'],
        vol :   $['.volume input'],
    },
    song = new Audio[];
    song.type = 'audio/mpeg';
    control_player[song, player];
47. VD. Khi click thì 
var player = {
        play  : $['#play'],
        stop  : $['#stop'],
        vol :   $['.volume input'],
    },
    song = new Audio[];
    song.type = 'audio/mpeg';
    control_player[song, player];
47 is 40. Ta set
20 is 40% of
21

Hoàn thành chức năng điều khiển, sữa lại chức năng điều khiển trong 

var player = {
        play  : $['#play'],
        stop  : $['#stop'],
        vol :   $['.volume input'],
    },
    song = new Audio[];
    song.type = 'audio/mpeg';
    control_player[song, player];
2 thành
23, mở tệp 
var player = {
        play  : $['#play'],
        stop  : $['#stop'],
        vol :   $['.volume input'],
    },
    song = new Audio[];
    song.type = 'audio/mpeg';
    control_player[song, player];
5 và thêm tham số
25 vào trình phát hàm. Viết thêm
26 khi chuyển từ
27 sang
28, 
function control[ctrl] {
    ctrl.play.on['click', function[e] {
        e.preventDefault[];
        status = $[this].find['i'].hasClass['icon-pause'] ? 'play' : 'pause';

        if[status == 'play']{
            $[this].changeClass['icon-pause','icon-play'];
        }else{
            $[this].changeClass['icon-play','icon-pause'];
        }
    }];

    ctrl.stop.on['click', function[e] {
        e.preventDefault[];
        button.play.changeClass['icon-pause','icon-play'];
    }];
}

$.fn.changeClass = function[before, after] {
    $[this].find['i'].removeClass[before].addClass[after];
}
7 khi chuyển từ
28 sang
27. Và thêm
32 khi nhấp vào nút dừng

var player = {
        play  : $['#play'],
        stop  : $['#stop'],
        vol :   $['.volume input'],
    },
    song = new Audio[];
    song.type = 'audio/mpeg';
    control_player[song, player];
0

Do ta lấy giá trị của
33 là phần thưởng khối lượng nên khi thay đổi giá trị sẽ làm thay đổi khối lượng

var player = {
        play  : $['#play'],
        stop  : $['#stop'],
        vol :   $['.volume input'],
    },
    song = new Audio[];
    song.type = 'audio/mpeg';
    control_player[song, player];
2

Tóm tắt

Do đó đã hoàn thành đơn giản HTML5 Audio Player. Dựa vào code trong bài này, bài sau mình sẽ hướng dẫn tạo playlist cho HTML5 Audio Player mới tạo này

Do mình viết theo cách hiểu của mình khi mã nên có thể khi đọc bài viết bạn sẽ không hiểu lắm. Bạn nên vừa đọc vừa thực thi code thì sẽ dễ hiểu hơn. Ở cuối bài có phần demo và code khi hoàn thành bạn có thể down về xem

Bài Viết Liên Quan

Ứng dụng trò chuyện trong php với mã nguồn
Tập bản đồ mongodb chạy trên cái gì?
Nếu khác trong Laravel 8
Hình ảnh con trăn
Chèn ngắt dòng trong excel tìm và thay thế
Làm thế nào để bạn vẽ một con rùa trong python?
Tìm định dạng ngày trong chuỗi python
Hướng dẫn dùng cookies edit trong PHP
Epcot Hours February 2023
2023 GMC Denali 3500 kép Giá
What are the dates for MLB Spring Training 2023?
Công thức loại bỏ trùng lặp trong Excel là gì
Xóa hàng trong google sheet ipad
Cách viết the input trong html
Python mũ đỏ 8
Nkangala TVET College Online application for 2023 link
Hậu tố thay thế tệp Python
Tốc độ Java so với C++
1 tiki xu bằng bao nhiêu
Bootstrap 3 thả xuống nhiều lựa chọn với hộp kiểm

Toplist mới

#1
Top 9 tập bản đồ lớp 8 bài 31 2023
7 tháng trước
#2
Top 6 kết quả thi hsg đà nẵng 2022 2023
7 tháng trước
#3
Top 9 tủ nhựa đài loan 4 cánh 3d 2023
7 tháng trước
#4
Top 9 chất khí có thể làm mất màu dung dịch nước brom là: a. so2. b. co2. c. o2. d. hcl. 2023
7 tháng trước
#5
Top 8 tìm việc làm tiện, phay bảo q7 2023
7 tháng trước
#6
Top 3 tôi xuyên thành tiểu kiều the của lão đại phản 2 2023
7 tháng trước
#7
Top 9 đổi mới phong cách, thái độ phục vụ của cán bộ y tế hướng tới sự hài lòng của người bệnh 2023
7 tháng trước
#8
Top 2 bài the dục phát triển chung lớp 6 2022 2023
7 tháng trước
#9
Top 3 bài giảng vũ điệu sắc màu (lớp 4) 2023
7 tháng trước

Bài mới nhất

Bài toán liên quan tới mức cường độ âm năm 2024
Tính bảo hiểm xã hội theo mức lương nào năm 2024
Lãi gửi tiết kiệm ngân hàng nào cao nhất năm 2024
Cơ sở hình thành các nền văn minh phương đông năm 2024
Hội nông dân việt nam thành lập năm nào năm 2024
Lỗi the exception breakpoint a breakpoint has been reached năm 2024
Bài tập vẽ hình tiêu chuẩn jis 2d sang 3d năm 2024
Lưu văn bản vào đĩa ta thực hiện năm 2024
Bài 7 sgk toán lớp 9 trang 69 năm 2024
Viết văn kể về một lần em mắc lỗi năm 2024

Chủ Đề

programming Hỏi Đáp Toplist Là gì Mẹo Hay Địa Điểm Hay mẹo hay Học Tốt Công Nghệ Nghĩa của từ Khỏe Đẹp Bao nhiêu đánh giá Top List bao nhieu bao nhiêu hướng dẫn Bài tập Xây Đựng So Sánh Tiếng anh So sánh Sản phẩm tốt Ngôn ngữ Bài Tập javascript Thế nào Ở đâu Hướng dẫn Dịch Máy tính Đại học Tại sao Món Ngon Khoa Học