/ / 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 FormatMedia Type
MP4video/mp4
WebMvideo/webm
Oggvideo/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ínhMiêu tả
autoplayThuộ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.
autobufferThuộ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.
controlsNế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.
heightThuộ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.
loopThuộ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.
preloadThuộ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.
srcURL 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.
widthThuộ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ệnMiêu tả
abortSự kiện này được tạo khi playback bị bở dở.
canplaySự 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.
endedSự kiện này được tạo khi playback hoàn thành.
errorSự kiện này được tạo khi một lỗi xảy ra
loadeddataSự kiện này được tạo khi Frame đầu tiên của media đã hoàn thành tải.
loadstartSự kiện này được tạo khi quá trình tải của media bắt đầu.
pauseSự kiện này được tạo khi playback bị dừng.
playSự kiện này được tạo khi playback bắt đầu hoặc khôi phục.
progressSự kiện này được tạo định kỳ để thông báo tiến trình của việc tải media.
ratechangeSự kiện này được tạo khi tốc độ playback thay đổi.
seekedSự kiện này được tạo khi một hoạt động seek hoàn thành.
seekingSự kiện này được tạo khi một hoạt động seek bắt đầu.
suspendSự kiện này được tạo khi việc tải media bị hoãn.
volumechangeSự kiện này được tạo khi âm lượng audio thay đổi
waitingSự 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