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

Play video sử dụng html5

Từ khi htnl5 ra đời thì việc chạy những video trở lên đơn giản hơn bao giờ hết,chúng ta không cần phải sử dụng tới các player flash với những cấu hình phức tạp mà chỉ đơn giản bằng các thẻ html.Thẻ video trong html5 được cấu hình đơn giản và hỗ trợ khá nhiều các sự kiện cho phép chúng ta can thiệp và tùy chỉnh player này theo ý muốn.

Play video sử dụng html5

– Các trình duyệt hỗ trợ chạy video trên html5:

Các trình duyệt hỗ trợ chạy video trên html5

Các trình duyệt hỗ trợ chạy video trên html5


– Cú pháp đơn giản nhất để chạy video trên html 5

<video src="test.mp4"  width="300" height="200" controls>
    Your browser does not support the <video> element.   
</video>

+ Để chạy được video các bạn cần sử dụng thẻ video trong đó thì

  1. src: là thuộc tính chưa đường dẫn tới video
  2. width: Chiều rộng video
  3. height: Chiều cao video
  4. controls: cho phép người sử dụng để điều khiển video

– Bạn có thể sử dụng thẻ source để xác định đa phương tiện cùng với kiểu đa phương tiện và nhiều thuộc tính khác. Một phần tử video cho phép nhiều phần tử source và trình duyệt sẽ sử dụng định dạng được nhận ra đầu tiên,ví dụ:

 <video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video> 

Chèn subtitles vào video html5

– Để sử dụng các sub cho video chúng ta sẽ sử dụng các thẻ track bên trong thẻ video,các định dạng file sub có thể là vtt,srt..
– Ví dụ:

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
  <track src="subtitles_vi.vtt" kind="subtitles" srclang="vi" label="Việt Nam">
</video>

Các kiểu video

File Format Media Type
MP4 video/mp4
WebM video/webm
Ogg video/ogg

Các thuộc tính của thẻ video

– Dưới đây là các thuộc tính quan trọng và được sử dụng nhiều trong thẻ video

Thuộc tính Miêu tả
autoplay Thuộc tính logic này nếu được xác định trước, video sẽ tự động bắt đầu chơi lại (playback) ngay sau khi nó có thể thực hiện mà không dừng lại để hoàn thành việc tải dữ liệu.
autobuffer Thuộc tính logic này nếu được định cấu hình, video sẽ tự động bắt đầu đệm ngay cả khi nó không được thiết lập để tự động chơi.
controls Nếu thuộc tính này có mặt, nó sẽ cho phép người sử dụng để điều khiển video phát lại sau, bao gồm âm lượng, chơi lại từ đầu và dừng/khôi phục lại sự phát lại.
height Thuộc tính này xác định chiều cao khu vực hiển thị của video, bằng đơn vị CSS pixel.
loop Thuộc tính logic này nếu được xác định, sẽ cho phép video tự động playback từ đầu sau khi kết thúc.
preload Thuộc tính này xác định video sẽ được tải tại trang tải, và sẵn sàng chạy. Bị bỏ qua nếu autoplay có mặt.
poster Đây là một URL của một hình ảnh để hiển thị cho tới khi người sử dụng chơi hoặc chơi lại từ đầu.
src URL của video được nhúng. Nó là tùy ý; bạn có thể thay thế cho sử dụng phần tử <source> trong khối video để xác định video để nhúng.
width Thuộc tính này xác định độ rộng khu vực hiển thị của video, bằng đơn vị CSS pixel.

Xử lý các sự kiện của Media

Các thẻ HTML5 video có những sự kiện được sử dụng bởi Javascript giúp cho chúng ta dễ dàng tùy chỉnh player này theo ý muốn:

Sự kiện Miêu tả
abort Sự kiện này được tạo khi playback bị bở dở.
canplay Sự kiện này được tạo khi đủ dữ liệu có sẵn mà đa phương tiện có thể được chơi.
ended Sự kiện này được tạo khi playback hoàn thành.
error Sự kiện này được tạo khi một lỗi xảy ra
loadeddata Sự kiện này được tạo khi Frame đầu tiên của media đã hoàn thành tải.
loadstart Sự kiện này được tạo khi quá trình tải của media bắt đầu.
pause Sự kiện này được tạo khi playback bị dừng.
play Sự kiện này được tạo khi playback bắt đầu hoặc khôi phục.
progress Sự kiện này được tạo định kỳ để thông báo tiến trình của việc tải media.
ratechange Sự kiện này được tạo khi tốc độ playback thay đổi.
seeked Sự kiện này được tạo khi một hoạt động seek hoàn thành.
seeking Sự kiện này được tạo khi một hoạt động seek bắt đầu.
suspend Sự kiện này được tạo khi việc tải media bị hoãn.
volumechange Sự kiện này được tạo khi âm lượng audio thay đổi
waiting Sự kiện này được tạo khi hoạt động được yêu cầu (ví dụ như playback) bị trì hoãn để đợi hoạt động khác kết thúc (ví dụ như hoạt động seek).

– Ví dụ:


<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> 


18/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

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