HTML5 – CSS – Tutorial – Step 8

LÀM VIỆC VỚI CÁC THÀNH PHẦN VIDEO, AUDIO CỦA HTML5


– Thành phần VIDEO, AUDIO trong HTML5
+ Tại sao phải thêm video, âm thanh vào trang web?
    • Tạo nên trang web hấp dẫn
    • Thu hút sự truy cập của người duyệt với website
    • Là một cách thu hút người dùng
+ HTML5 chèn video, âm thanh vào trang web như thế nào?
    • Cung cấp thành phần HTML video chạy trong trình duyệt
    • Tích hợp thêm với Javascript
    • Câu lệnh:

<video src=‘video/BigBuck.ogg’ autoplay></video>

    • Autoplay:   thuộc tính quy định với trình duyệt đoạn video sẽ được chơi ngay khi trang được load
+ HTML5 cung cấp thêm các điều khiển cho video:

<video src='video/BigBuck.ogg' controls poster='poster854.jpg' width='320' height='180' ></video> 

    • Controls: cung cấp trình điều khiển video trên các trình duyệt khác nhau

contorl media on firefox

Control trên Firefox


control trên chrome

Control trên Chrome


    • Poster:  thuộc tính chỉ định cho trình duyệt load hình ảnh ban đầu của video
    • Width, height:  thuộc tính chỉ định kích thước của video
    • Audio:  thuộc tính này cho phép tắt tiếng của video, giá trị ‘muted’
    • Loop:  thuộc tính này sẽ kích hoạt đoạn video phát lại
    • Preload:  cho phép tải đoạn video ngay khi tải trang web, giảm thời gian tải video


– Thêm các thuộc tính để video được hỗ trợ trên nhiều trình duyệt:
    • Có nhiều định dạng, codec cho video nhưng không phải lúc nào cũng hỗ trợ HTML5
  + Định dạng Ogg:
    • Định dạng theo chuẩn mã nguồn mở
    • Được hỗ trợ bởi các trình duyệt Chrome, Firefox, Opera
mp4_ogg
  + Định dạng MP4:
    • Sử dụng codec H.264 và âm thanh sử dụng codec AAC
    • Được hỗ trợ bởi IE, Safari, iOS và Android

  + Để đoạn video ở cả2 định dạng Ogg và MP4 sẽ giúp hiển thị tốt trên các trình duyệt và thiết bị

<video controls poster='poster320.jpg' width='320' height='180'> 
     <source src='video/BigBuck.ogg'> 
     <source src='video/BigBuck.mp4'> 
</video> 

  + Thêm thuộc tính type, codecs: mô tả cấu trúc kiểu của file ogg, mp4

<source src='video/BigBuck.ogg' type='video/ogg; codecs="theora, vorbis"'> 
<source src='video/BigBuck.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>

– Điều khiển video với Javascript:
điều khiển video html qua javascript

<video id="myVideo" width="640" height="360" __idm_id__="82945">
<!-- MP4 must be first for iPad! -->
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4"><!-- Safari / iOS, IE9 -->
<source src="http://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm"><!-- Chrome10+, Ffx4+, Opera10.6+ -->
<source src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg"><!-- Firefox3.6+ / Opera 10.5+ -->
Your browser does not support HTML5 video.
</video>
<button onclick="playVid()" type="button">Play Video</button>
<button onclick="pauseVid()" type="button">Pause Video</button>
<script type="text/javascript">
var vid = document.getElementById("myVideo"); 
function playVid() { 
    myVideo.play(); 
} 
function pauseVid() { 
    myVideo.pause(); 
} 
</script>

– Chèn âm thanh vào trang web sử dụng HTML5:
audio tag trong html5

<audio controls> 
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4"><!-- Safari / iOS, IE9 -->
<source src="http://clips.vorwaerts-gmbh.de/VfE.webm"><!-- Chrome10+, Ffx4+, Opera10.6+ -->
<source src="http://clips.vorwaerts-gmbh.de/VfE.ogv"><!-- Firefox3.6+ / Opera 10.5+ -->
</audio>

Copyright © 2018. Powered by WordPress & Romangie Theme.