GetSmile.Mobie.In - Diễn đàn chia sẻ Cú đêm Việt Nam

AiChat.Wap.Sh - Diễn đàn Xtgem Việt Nam

HamTruyen.Xtgem.Com - Blog Ham Truyện nơi hội tụ của những tín đồ mê truyện chữ

Trang chủ >> WapMaster

Tìm Kiếm → Thảo Luận

Share Code Video Player Trình Phát Video cho Web/Wap/Blog cơ bản sử dụng tag <video> trong HTML5

RoSino18k

29-05-2016

Với sự phát triển của công nghệ thông tin, các thiết bị số không ngừng hiện đại. Và trong xu hướng của thời đại mới, người dùng trẻ có nhu cầu về mảng xem video online khá lớn. Vì thế việc trang bị một trình phát video (video player) cho Wap/Web là rất cần thiết. Tại Cú Đêm Việt Nam đã share rất nhiều code xem video với đầy đủ các tính năng khủng: tùy chọn chất lượng, bật tắt đèn wap, thích, chia sẻ video... đến những tính năng nhỏ như: đếm thời gian, thanh chạy video,.. được viết bằng CSS3, HTML5, JavaScript rất đẹp và mượt mà. Tuy nhiên thực tế rất nhiều các wapmaster lại chưa biết cấu trúc cơ bản của trình phát video này. Hôm nay mình sẽ Share Code phát HTML5 Video Player cơ bản...
Vì sao nói là cơ bản? Code này là code thuần túy mà nhiều trang web đang sử dụng. Phải có cấu trúc này mới xây dựng được Video Player nâng cao như hiển thị nút chọn độ phân giải, hiển thị hiệu ứng loading, thời gian đang phát, tổng thời gian, v.v... Tùy chỉnh giao diện trình phát Video...

Để làm được những cái đó các bạn sẽ sử dụng JavaScript kèm theo CSS hơi phức tạp chút.
Vì thế bài này mình sẽ đưa ra code HTML5 cơ bản cho trình phát Video để các bạn tham khảo, bài sau mình sẽ chia sẻ trình chạy HTML5 với giao diện đẹp hơn và chuyên nghiệp hơn

Ở dưới đây mình sẽ đưa ra 2 dạng cơ bản

Dạng HTML5 Play Video Simple

Phía trên là DEMO cho các bạn tham khảo. Các bạn chỉ cần coppy đoạn code ngắn sau

<video width="100%" controls>

  <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">

  <source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">

  Your browser does not support the video tag.

</video>

Các bạn chú ý phần URL trực tiếp của Video và phần định dạng Video
Các bạn nhớ đừng để đuôi một đường mà thuộc tính type một nẻo sẽ không chạy được.
Hiện nay mình thấy đuôi mp4 thông dụng và chạy được hầu hết

CHÚ Ý HTML5 Play Video hỗ trợ đa số trình duyệt PC và kể cả trên Smartphone cũng hoạt động tốt nên các bạn yên tâm sử dụng

Dạng HTML5 Play Video kèm JS

Dạng này đó là dạng các nút các bạn có thể ấn Play để phát, Pause để tạm dừng, Big Small Normal là các chế độ rộng Video.
Để làm được như vậy chúng ta tất nhiên cần thêm một đoạn JS (javascript) nữa như sau:

<div style="text-align:center"> 

  <button onclick="playPause()">Play/Pause</button> 

  <button onclick="makeBig()">Big</button>

  <button onclick="makeSmall()">Small</button>

  <button onclick="makeNormal()">Normal</button>

  <br><br>

  <video id="video1" width="420">

    <source src="mov_bbb.mp4" type="video/mp4">

    <source src="mov_bbb.ogg" type="video/ogg">

    Your browser does not support HTML5 video.

  </video>

</div> 

<script> 

var myVideo = document.getElementById("video1"); 



function playPause() { 

    if (myVideo.paused) 

        myVideo.play(); 

    else 

        myVideo.pause(); 

} 



function makeBig() { 

    myVideo.width = 560; 

} 



function makeSmall() { 

    myVideo.width = 320; 

} 



function makeNormal() { 

    myVideo.width = 420; 

} 

</script>

Tùy chỉnh cũng tương tự như trên. Nếu muốn trang web/wap/blog của bạn thực sự nhẹ và đơn giản thì như vậy là quá đủ

Ở bài sau mình sẽ chia sẻ HTML5 nâng cao của trình phát Video Player cho các bạn muốn làm chuyên nghiệp hơn
Hãy dùng bạn bè và đồng nghiệp đón đọc tại Cú Đêm Việt Nam các bạn nhé. Chúc các bạn thành công!

Nguồn: CodeSEO.Net