Xây dựng trình xem video với Html5

Tuần trước rảnh rỗi nên mình có tìm mấy khoá học online trên udemy thì thấy có khoá tự tạo trình xem video với html5 và javascripts nên nhảy vào học vì thấy hay hay :3 thực ra chủ yếu vào học vì nó free thôi :))

Mình có làm theo thì chỉ cần 2h là được vì chỉ step by step nên không quá khó.  Mọi người có thể vào học theo keyword dưới nhé :)) mình online ipad nên ngại lấy link :3

  
Mình có chỉnh lại một chút với bootstrap để responsitive cho nó cái tuy nhiên thì lại có vấn để xảy ra vì chỉ copy code nên không hiểu hết :))
Source trang html

<!DOCTYPE html>

<html>

<head>

 <link rel=”stylesheet” type=”text/css” href=”player.css”>

 <link rel=”stylesheet” type=”text/css” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”&gt;

 

 http://player.js

 https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js

</head>

<body>

 

       

      <video id=”video” poster=”images/thumbnail.png”>

       <source src=”sample.mp4″>

        It seems your browser doesn’t support the HTML5 video tag. Please update it!

       </video>

      </div>
     

      </div>
     

       

        0:00 / 0:00

       <img id=”sound-button” src=”images/sound.png”>

       

       </div>

       <img id=”fullscreen-button” src=”images/fullscreen.png”>

      </div>
     </div>

    </div>

   </div>

  </div>

 </body>

 </html>

Trong trang html thì mình có để offset để căn giữa cho cái div chứa video. Chính đoạn này nó làm lỗi cái javascripts nếu mọi người làm theo khoá học kia. 

Đoạn js lỗi là đoạn thay đổi âm lượng của video và đoạn tua video. Ở trong file js thì có thực hiện 1 số phép tính như dưới

 var mouseX = ev.pageX – sbarContainer.offsetLeft ;

 var width = window.getComputedStyle(sbarContainer).getPropertyValue(‘width’);

 width = parseFloat(width.substr(0, width.length – 2));
 video.volume = (mouseX/width);

chỗ code này nó tính vị trí của con trỏ chuột trên thanh âm lượng rồi chia cho độ dài thanh để từ đó chỉnh mức âm lượng cho video.

Các bạn lưu ý chỗ mouseX thì nó tính bằng vị trí của con trỏ trừ đi đoạn offset của thẻ div chứa thanh âm lượng tuy nhiên do mình có offset cả thẻ div để căn giữa

   <div class=”col-md-offset-3 col-md-6″ id=”container”>

chính vì thế nó sẽ tính sai và làm cho kết quả là số dương khá to thế nên lỗi :))

Để khắc phục các bạn trừ thêm đoạn offset của div bao ngoài là được

 var mouseX = ev.pageX – sbarContainer.offsetLeft – container.offsetLeft;

tương tự với phần tua video 

Mình có đẩy sourcode mà mình tuỳ biến lại để mọi người tham khảo trên github của mình. https://github.com/hoangnl/VideoPlayer

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s