/ / Tổng hợp / Comment (1)

html5 video api javascript

Trong bài trước mình đã giới thiệu cho các bạn về play video sử dụng html5,qua đó chúng ta có thể chạy 1 video sử dụng thẻ video một cách đơn giản.Theo mình khi sử dụng html5 để chạy video có ưu điểm là đơn giản,đặc biệt có thể chạy trên mobile và có nhiều sự kiện để tùy chỉnh.Trong bài hôm nay mình sẽ giới thiệu về các sự kiện đó,các bạn có thể sử dụng html5 video api để tạo một player theo ý muốn của mình.

Xem demo

Xem demo

html5 video api javascript

– Để có thể sử dụng html5 video api trước tiên chúng ta cần phải tạo ra các element để chạy video đã,ví dụ:

<video id="video" controls width="600" height="300">
<source id="mp4" src="video.mp4" type="video/mp4"></source>
Your user agent does not support the HTML5 Video element.
</video>

– Các element trên mình đã giải thích trong bài trước lên trong phần này mình không giải thích thêm nữa,khi thêm đoạn code html trên thì chúng ta đã có 1 player chạy video,nhưng nó vẫn chưa thể hoạt động theo ý muốn của ta được,công việc tiếp theo chúng ta sẽ tạo ra các nút điều khiển cơ bản để tùy chỉnh video,ví dụ:

<button id="bt_play">play</buton>
<button id="bt_pause">pause</button>
<button id="bt_big">Big</button>
<button id="bt_small">Small</button>
<button id="bt_back">Lùi 5 giây</button>
<button id="bt_speed_up">Tăng tốc độ</button>
<button id="bt_speed_down">Giảm tốc độ</button>
<button id="bt_fullscreen">full screen</button>
<input id="bt_vol" type="range" min="0" max="100" step="1" value="50">
<input type="range" id="bt_timeline" min="0" max="100" step="1" value="0">
Current: <span id="currentTime">0</span> / <span id=“durationTime">0</span>

– Và kết quả chúng ta sẽ có:

html5 video api javascript

html5 video api javascript

PLay/pause html5 video

– Trước tiên chúng ta sẽ tìm hiểu 2 sự kiện play pause:

  1. play : Sự kiện này được tạo khi playback bắt đầu hoặc khôi phục.
  2. pause : Sự kiện này được tạo khi playback bị dừng.

Chúng ta sẽ xây dựng đoạn code sau để tùy chỉnh PLay/pause cho video

//khởi tạo các đối tượng
var $video         =  $('video#video');
var $player        = $video[0];
var $bt_play_pause = $('#bt_play_pause');
var $bt_big        = $('#bt_big');
var $bt_small      = $('#bt_small');
var $bt_speed_down = $('#bt_speed_down');
var $bt_speed_up   = $('#bt_speed_up');
var $bt_fullscreen = $('#bt_fullscreen');
var $bt_back       = $('#bt_back');
//Play/Pause control clicked
$bt_play_pause.on('click', function() {
     if($player.paused) { //kiểm tra xem player đang chạy hay dừng,nếu player đang dừng thì thực hiện play và ngược lại
          $player.play();
     }
     else {
          $player.pause();
     }
     return false;
});

Hiển thị thời gian phát video và thời gian hiện tại

Chúng ta sẽ tiếp tục đến với phần hiển thị thời gian hiện tại và tổng thời gian của một video.video API cung cấp cho chúng ta 2 phương thức để thực hiện việc đó một cách đơn giản.

  1. video.duration: trả về tổng thời gian phát của video.
  2. video.currentTime: trả về giá trị thời gian hiện tại đang phát của video.

Trong phần này chúng ta sẽ làm quen với một sự kiện javascript mới là loadedmetadatatimeupdate.

  1. loadedmetadata: Sự kiện này được tạo khi Frame đầu tiên của media đã hoàn thành tải.
  2. timeupdate: Sự kiện theo dõi thời gian hiện tại của video.
//Lấy tổng thời gian chạy video
$video.on('loadedmetadata', function() {
      $('#durationTime').text($player.duration);
});

//Cập nhật thời gian hiện tại đang chạy video
$video.on('timeupdate', function() {
    $('#currentTime').text($player.currentTime);
});

Thay đổi kích thước của video

– Các bạn hoàn toàn có thể thay đổi kích thước của player chạy video với thuộc tính width height

//tăng kích thước của video
$bt_big.on('click', function() {
      $player.width  = '800';
      $player.height = '500';
});
	        	   
//Giảm kích thước của video
$bt_small.on('click', function() {
    $player.width  = '400';
    $player.height = '200';
});

Tiến hoặc lùi lại số giây quy định

– Chúng ta hoàn toàn có thể cho video tiến hoặc lùi lại bao nhiều giây

//Lùi lại 5 giây
$bt_back.on('click', function(e) { 
     var value = 5;//số giây cần lùi lại
     var time_new =  $video.prop('currentTime') - value; //nếu lùi video lại 5 giây
     //var time_new =  $video.prop('currentTime') + value; //nếu tiến video lên 5 giây
     $video.prop('currentTime', time_new);
});

Tăng giảm tốc độ video

– Trong video html5 mình rất thích sự kiện tăng giảm tốc độ video thông qua playbackRate

//giảm tốc độ video mỗi lần giảm 0.1
$bt_speed_down.click(function() {
	var playbackRate = $video.prop('playbackRate');
	var value = parseFloat(playbackRate) - 0.1;
	value = value.toFixed(1);
        $video.prop('playbackRate', value);
});

//tăng tốc độ video mỗi lần tăng 0.1
$bt_speed_up.click(function() {
	var playbackRate = $video.prop('playbackRate');
        var value = parseFloat(playbackRate) + 0.1;
	value = value.toFixed(1);
	$video.prop('playbackRate', value);
});

Xem ở chế độ toàn màn hình trong

– Khi xem video mà các bạn muốn xem toàn màn hình thì điều đó rất đơn giản,chỉ cần thêm đoạn code sau:

 //xem video toàn màn hình
$bt_fullscreen.click(function() {
     if ($player.requestFullscreen) {
	 $player.requestFullscreen();
     } else if ($player.mozRequestFullScreen) {
	 $player.mozRequestFullScreen();
     } else if ($player.webkitRequestFullscreen) {
	 $player.webkitRequestFullscreen();
     }
});
  1. requestFullscreen: dùng cho mọi trình duyệt khi đã phát triển hoàn chỉnh.
  2. mozRequestFullScreen: dùng cho firefox.
  3. webkitRequestFullscreen: dùng cho Chrome, Safari.
  4. msRequestFullscreen: dùng cho IE 11+

Tổng kết: Qua bài viết này mình đã giới thiệu cho các bạn về các sự kiện quan trọng trong html5 video api,qua đó chúng ta hoàn toàn có thể tự xây dựng cho mình một player để chạy các video,nó sẽ rất cần thiết cho những bạn có ý định làm website xem phim.Chúc các bạn thành công.
Tải mã nguồn bài viết tại đây:
http://ouo.io/pINOK9



20/09/2015
Written by nobitacnt

Trong bài viết không tránh khỏi những câu từ chưa chính xác,mong nhận được sự góp ý để website hoàn thiện hơn.Nếu thấy bài viết có ích với bạn hãy like và share để ủng hộ nhé :D.

Bài viết chùng chuyên mục

One comment

  1. trong says:
     /  Reply

    Bai viet rat hay,cam on da chia se

Gửi bình luận

Giới thiệu

Mình tạo ra blog này với mong muốn chia sẻ và học hỏi kinh nghiệm trong quá trình thiết kế website. Website đang trong quá trình phát triển chân thành cảm ơn mọi sự góp ý của các bạn để làm cho website ngày càng hoàn thiên.

DMCA.com Protection Status
Theo dõi qua Email

Tổng hợp các bài viết về

Hoc php - CodeIgniter Framework - Laravel Framework - PHP va MYSQL