VietNetwork.Vn

Bài viết này sẽ hướng dẫn bạn cách xây dựng các điều khiển video HTML5 tùy chỉnh bằng jQuery thay vì sử dụng các điều khiển video HTML5 của trình duyệt riêng.

Giới thiệu

Yếu tố video HTML5 , một trong những tính năng phổ biến nhất trong HTML5. Hiện tại nó đã được hỗ trợ bởi hầu hết các trình duyệt hiện đại và thậm chí là như vậy đối với IE9 . Tuy nhiên, mỗi trình duyệt cung cấp các điều khiển video trình duyệt riêng. Để có các điều khiển video HTML5 nhất quán trên tất cả các trình duyệt, chúng tôi phải tích hợp các điều khiển video HTML5 tùy chỉnh riêng thay vì sử dụng các điều khiển mặc định.


Trên thực tế, không khó để có các điều khiển video HTML5 tùy chỉnh. Trong bài đăng này, tôi sẽ chỉ cho bạn cách xây dựng các điều khiển video HTML5 tùy chỉnh của riêng bạn bằng jQuery. Hy vọng bạn sẽ tìm thấy nó hữu ích!

Đánh dấu cơ bản phần tử video HTML5

Trước khi chúng tôi bắt đầu, hãy nhớ lại đánh dấu cơ bản video HTML5.

<video id="myVideo" controls poster="video.jpg" width="600" height="400" >
    <source src="video.mp4" type="video/mp4" />
    <source src="video.webm" type="video/webM" />
    <source src="video.ogv" type="video/ogg" />
    <p>Your browser does not support the video tag.</p>
</video>
Cách tốt nhất là bao gồm ba định dạng video - MP4 , WebM và Ogg làm các thành phần nguồn để video HTML5 của bạn hoạt động trên nhiều trình duyệt. Bạn cũng nên đặt một số văn bản dưới dạng dự phòng bên trong phần tử video , trong trường hợp trình duyệt người dùng không hỗ trợ video HTML5. Tất nhiên, bạn cũng có thể sử dụng Flash làm dự phòng.

Nếu bạn gặp sự cố khi mã hóa video của mình sang các định dạng HTML5 được đề cập ở trên, hãy thử Miro Converter , nó hỗ trợ cho cả Window và Mac.

• Do lỗi trong iPad, bạn phải đặt định dạng MP4 làm nguồn đầu tiên nếu bạn muốn video HTML5 hoạt động trong iPad.

Bắt đầu với Điều khiển video HTML5 tùy chỉnh

May mắn thay, các yếu tố phương tiện HTML5 (âm thanh và video) hỗ trợ API các yếu tố phương tiện mà chúng ta có thể truy cập bằng JavaScript và sử dụng chúng để kết nối các điều khiển video HTML5 của chúng tôi.

Trước khi bắt đầu với mã hóa, hãy để tôi giải thích ngắn gọn về nhắm mục tiêu yếu tố video jQuery.

Trong JavaScript, chúng tôi sử dụng getElementById('videoID') để nhắm mục tiêu thành phần video. Kết quả là chúng ta sẽ nhận được một đối tượng DOM. Tuy nhiên, điều này không tương đương với nhắm mục tiêu jQuery $('#videoID') sẽ trả về một đối tượng jQuery , không phải đối tượng DOM. Đó là lý do tại sao chúng ta không thể trực tiếp sử dụng bộ chọn jQuery để gọi / sử dụng các thuộc tính và hàm DOM của video HTML5 trước khi chuyển đổi nó thành đối tượng DOM.

//return a DOM object
var video = document.getElementById('videoID'); //or
var video = $('#videoID').get(0); //or
var video = $('#videoID')[0];
 
//return a jQuery object
var video = $('#videoID');
Điều chạy / tạm dừng video

OK, đó là tất cả để giới thiệu. Hãy bắt đầu mã hóa ngay bây giờ. Trước tiên, chúng tôi sẽ tạo một điều khiển Phát / Tạm dừng đơn giản cho video của chúng tôi.

<div class="control">
    <a href="#" class="btnPlay">Play/Pause[/url]
</div>
Chúng tôi có thể dễ dàng kiểm soát trạng thái video bằng các hàm DOM video HTML5, đó là .play() và .pause() .

//Play/Pause control clicked
$('.btnPlay').on('click', function() {
    if(video[0].paused) {
        video[0].play();
    }
    else {
        video[0].pause();
    }
    return false;
};
Hiển thị video Thời gian phát lại hiện tại và thời lượng

Video HTML5 cũng hỗ trợ phát lại video. Bằng cách này, chúng tôi sẽ hiển thị thời gian và thời lượng phát lại video hiện tại .

<div class="progressTime">
    Current play time: <span class="current"></span>
    Video duration: <span class="duration"></span>
</div>
Để có được thời lượng video HTML5, chúng tôi phải đảm bảo siêu dữ liệu video được tải. Chúng tôi có thể dễ dàng phát hiện ra nó bằng cách sử dụng sự kiện loadedmetadata video HTML5.

Đối với thời gian phát lại video hiện tại, chúng tôi có thể sử dụng các sự kiện thời gian chờ video HTML5 để theo dõi nó.

//get HTML5 video time durationvideo.on('loadedmetadata', function() {
    $('.duration').text(video[0].duration);
});
 
//update HTML5 video current play time
video.on('timeupdate', function() {
    $('.current').text(video[0].currentTime);
});
Thanh tiến trình video

Vì chúng tôi có thể nhận được thời gian phát video hiện tại và thời lượng video, tại sao không chuyển đổi những dữ liệu này thành thanh tiến trình video tuyệt vời?

<style>
.progressBar
{
    position: relative;
    width: 100%;
    height: height:10px;
    backgroud-color: #000;
}
.timeBar
{
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: #ccc;
}
</style>
<div class="progressBar">
    <div class="timeBar"></div>
</div>
Dưới đây cho thấy công thức chuyển đổi thời lượng video và thời gian phát lại video hiện tại thành thanh tiến trình với sự trợ giúp của JavaScript.

//get HTML5 video time duration
video.on('loadedmetadata', function() {
    $('.duration').text(video[0].duration));
});
 
//update HTML5 video current play time
video.on('timeupdate', function() {
    var currentPos = video[0].currentTime; //Get currenttime
    var maxduration = video[0].duration; //Get video duration
    var percentage = 100 * currentPos / maxduration; //in %
    $('.timeBar').css('width', percentage+'%');
});
Làm xong!!? Chưa! Chúng ta phải làm cho thanh tiến trình này có thể tìm kiếm và kéo được . Trong trường hợp này, chúng ta phải sử dụng các trình nghe mousedown , mouseup và mousemove và liên kết chúng với thanh tiến trình. Của couse, nếu bạn muốn, bạn cũng có thể thay thế nó bằng thanh trượt!

var timeDrag = false;   /* Drag status */
$('.progressBar').mousedown(function(e) {
    timeDrag = true;
    updatebar(e.pageX);
});
$(document).mouseup(function(e) {
    if(timeDrag) {
        timeDrag = false;
        updatebar(e.pageX);
    }
});
$(document).mousemove(function(e) {
    if(timeDrag) {
        updatebar(e.pageX);
    }
});
 
//update Progress Bar control
var updatebar = function(x) {
    var progress = $('.progressBar');
    var maxduration = video[0].duration; //Video duraiton
    var position = x - progress.offset().left; //Click pos
    var percentage = 100 * position / progress.width();
 
    //Check within range
    if(percentage > 100) {
        percentage = 100;
    }
    if(percentage < 0) {
        percentage = 0;
    }
 
    //Update progress bar and video currenttime
    $('.timeBar').css('width', percentage+'%');
    video[0].currentTime = maxduration * percentage / 100;
};
Hiển thị thanh đệm

Tuy nhiên, chúng ta có thể có một thanh đệm cho video HTML5 của mình. Sự kiện progress video HTML5 sẽ được kích hoạt khi trình duyệt người dùng tải dữ liệu. Nó sẽ có ích để tạo thanh đệm video. Tuy nhiên, Chrome mới nhất dường như có lỗi với sự kiện progress . Do đó, chúng tôi sẽ thay thế nó bằng hàm JavaScript setTimeout() .

<style>
.progressBar {
    position: relative;
    width: 100%;
    height: height:10px;
    backgroud-color: #000;
}
.bufferBar {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: #ccc;
}
</style>
<div class="progressBar">
    <div class="bufferBar"></div>
</div>
Thuộc tính buffered video HTML5 sẽ trả về một đối tượng của phạm vi đã được đệm. Do đó, chúng tôi sẽ sử dụng giá trị cuối cùng của dữ liệu đệm.

//loop to get HTML5 video buffered data
var startBuffer = function() {
    var maxduration = video[0].duration;
    var currentBuffer = video[0].buffered.end(0);
    var percentage = 100 * currentBuffer / maxduration;
    $('.bufferBar').css('width', percentage+'%');
 
    if(currentBuffer < maxduration) {
        setTimeout(startBuffer, 500);
    }
};
setTimeout(startBuffer, 500);
Điều khiển âm lượng cho video

Bây giờ, chúng tôi cũng sẽ bao gồm các điều khiển âm lượng cho video của chúng tôi. Có hai điều khiển âm lượng khác nhau sẽ được thêm vào, đó là điều khiển nút tắt tiếng và điều khiển thanh âm lượng .

<a href="#" class="muted" >Mute/Unmute[/url]
<div class="volumeBar">
    <div class="volume"></div>
</div>
Tại đây, chúng tôi sẽ thay đổi độ rộng của âm lượng và thanh âm lượng của video khi người dùng nhấp vào điều khiển thanh âm lượng. Và tắt tiếng video khi bấm điều khiển tắt tiếng. Vâng, bạn có thể làm cho thanh âm lượng của bạn cũng có thể kéo!

//Mute/Unmute control clicked
$('.muted').click(function() {
    video[0].muted = !video[0].muted;
    return false;
});
 
//Volume control clicked
$('.volumeBar').on('mousedown', function(e) {
    var position = e.pageX - volume.offset().left;
    var percentage = 100 * position / volume.width();
    $('.volumeBar').css('width', percentage+'%');
    video[0].volume = percentage / 100;
});
Chuyển tiếp nhanh, chuyển động chậm và điều khiển tua lại

Có, video HTML5 hỗ trợ thay đổi tốc độ phát lại. Chúng tôi có thể thay đổi tốc độ phát lại video bằng cách thay đổi thuộc tính playbackrate video.

<div class="control">
    <a href="#" class="ff">Fast Forward[/url]
    <a href="#" class="rw">Rewind[/url]
    <a href="#" class="sl">Slow Motion[/url]
</div>
Thật không may, Firefox chưa hỗ trợ playbackrate thuộc tính. Nhưng một phần dành cho Chrome (không hỗ trợ giá trị âm, được tua lại). Cho đến nay chỉ có Safari hỗ trợ đầy đủ.

//Fast forward control
$('.ff').on('click', function() {
    video[0].playbackrate = 3;
    return false;
});
 
//Rewind control
$('.rw').on('click', function() {
    video[0].playbackrate = -3;
    return false;
});
 
//Slow motion control
$('.sl').on('click', function() {
    video[0].playbackrate = 0.5;
    return false;
});
Có gì khác trong Video HTML5?

Còn gì nữa không Video HTML5 có nhiều sự kiện và thuộc tính hơn có thể được sử dụng để kiểm soát phát lại video. Tôi sẽ không bao gồm tất cả nhưng các sự kiện video HTML5 hữu ích ở đây. Tuy nhiên, bạn có thể xem danh sách các thuộc tính và sự kiện DOM video HTML5 .

Sự kiện video HTML5 ended

• Sự kiện được kích hoạt khi video kết thúc.

Sự kiện có thể phát video HTML5

• Sự kiện được kích hoạt khi video có thể được phát, nhưng quá trình đệm vẫn đang tiếp diễn.

Sự kiện có thể phát video HTML5

• Sự kiện được kích hoạt khi toàn bộ video có thể được phát.

Sự kiện seeking video HTML5

• Sự kiện được kích hoạt khi trình duyệt tìm kiếm vị trí của video.

Sự kiện waiting video HTML5

• Sự kiện được kích hoạt khi chờ thêm dữ liệu để phát video.

Khác gì?

Còn gì nữa không Khác với các điều khiển chính, bạn có thể có một số điều khiển bổ sung đối với video của mình. Dưới đây là một số điều khiển thú vị bổ sung có thể được thêm vào video của bạn.

Đầu tiên, một điều khiển toàn màn hình cho video.

$('.fullscreen').on('click', function() {
    //For Webkit
    video[0].webkitEnterFullscreen();
 
    //For Firefox
    video[0].mozRequestFullScreen();
 
    return false;
});
Tiếp theo sẽ tắt / bật điều khiển .

$('.btnLight').click(function() {
    if($(this).hasClass('on')) {
        $(this).removeClass('on');
        $('body').append('<div class="overlay"></div>');
        $('.overlay').css({
            'position':'absolute',
            'width':100+'%',
            'height':$(document).height(),
            'background':'#000',
            'opacity':0.9,
            'top':0,
            'left':0,
            'z-index':999
        });
        $('#myVideo').css({
            'z-index':1000
        });
    }
    else {
        $(this).addClass('on');
        $('.overlay').remove();
    }
    return false;
});
Đến lượt của bạn thực hành.

Bây giờ là lượt của bạn! Bạn có thể có nhiều điều khiển hơn như điều khiển mở rộng video, điều khiển video HD, v.v. Vì khả năng là vô cùng với jQuery. Chỉ để sáng tạo. =)

Nếu bạn cảm thấy lười biếng trong việc tạo các điều khiển video tùy chỉnh, bạn vẫn có thể nhận các plugin jQuery hiện có cho video HTML5 để làm phần còn lại cho bạn.