Cách chèn Video với HTML 5

HTML5 hỗ trợ thẻ <video> để chèn các file video theo cách mặc định, tuy nhiên hiện nay thẻ này vẫn đang được phát triển, nó vẫn chưa hoạt động được trên một số trình duyệt.

Các trình duyệt hỗ trợ thẻ <video> bao gồm : Firefox 3.5, Safari 3 / 4, Chrome và Opera
Các trình duyệt không hỗ trợ : IE 8, IE 7, IE 6, IE 5, IE 4, IE 3, IE 2, IE 1, Netscape .v.v…..
HTML5 hiện nay hỗ trợ một số codec video và audio như H.264, Theora, AAC, Vorbis và định dạng có đuôi  .MP4, .Ogg. Tuy nhiên tới thời điểm này thì không phải trình duyệt nào cũng hỗ trợ toàn bộ các codec trên.
Đây là danh sách codec / trình duyệt hỗ trợ :
Theora, Vorbis, Ogg : Firefox, Opera, Chrome
H.264, AAC, MP4 : Chrome, Saíari, Iphone, Android
Nếu như muốn người xem có thể xem được video trên tất cả các trình duyệt thì e rằng hiện nay bạn phải encode video của bạn nhiều hơn một định dạng. À quyên và để encode video theo codec H.264 thì bạn sẽ phải trả một khoản phí bản quyền nữa
Riêng encode sang ogg thì hiện nay chắc các bạn điều biết các phần mềm đổi định dạng rồi nên mình bỏ qua phần này.
Riêng Firefox có một add on giúp chuyển video sang dịnh dạng ogg là : Firefogg.
Trang chủ firefogg : http://firefogg.org
HTML5 với thẻ <video> bạn có thể chèn video theo các cách sau đây :
Một file video đơn: Đơn giản là chèn đường dẫn file video vào thuộc tính src, giống như khi chèn hình ảnh  : <img src=”…..” />, còn đối với video thì ta chỉ cần thay bằng thẻ <video> :

<video src="something.ogv"> </video>

Thêm yếu tố cố định chiều rộng và chiều cao cho video width và height. Nếu bạn có lỡ đặt chiều rộng hoặc chiều cao nhỏ hơn  so với chiều rộng / cao thực sự của video thì video đó sẽ được tự động căn giữa thay vì làm giãn video như đối với hình ảnh. Ví dụ :

<video src="something.ogv" height="240" width="320"></video>

Khi chèn video với HTML5 thì video của bạn bình thường khi hiển thị sẽ không có bảng điều khiển, để thêm bảng điều khiển cho video thì bạn phải tự thiết kết lấy một cái thôi, bạn có thể thiết kế giao diện bảng điều khiển thông qua HTML, CSS và Javascript
Còn nếu không muốn (thể) hoặc ngại thiết kế bạn có thể sử dụng giao diện mặc định bằng cách thêm thuộc tính controls vào trong thẻ <video>. Ví dụ :

<video src="something.ogv" wight="320" height="240" controls></video>

Tiếp theo là 2 thuộc tính preload và autoplay :
Thuộc tính preload sẽ tự động tải video ngay sau khi truy cập vào trang web chứa video đó, dĩ nhiên nếu chèn thuộc tính này thì bạn cần chắc là người dùng thực sự muốn xem video đó không thì sẽ hao tổn lượng băng thông lớn một cách lãng phí.  Ví dụ :

<video src="something.ogv" height="240" width="320" preload></video>

Để tắt thuộc tính này bạn thêm giá trị none cho thuộc tính preload. Ví dụ :

<video src="something.ogv" preload="none" height="240" width="320"></video>

Thuộc tính autoplay sẽ tự động chạy video ngay khi truy cập vào trang web chứa video đó, theo mình cái này nên hạn chế sử dụng, không ai thích việc truy cập vào một đang đọc tin và giật thót tim vì có cái gì đó đang kêu. Trước kia hay giật mình vì cái “Mỗi ngày tôi chọn một niềm vui…….” của trang ACB, cứ như là muốn đuổi khách đi quá . Ví dụ cho thuộc tính này :

<video src="something.ogv" height="240" width="320" autoplay></video>

HTML5 với thẻ <video> hiện tại thì nếu bạn muốn người truy cập xem được video trên hầu hết các trình duyệt thì bạn cần encode video đó ra 2 định dạng có đuôi là .ogv và .mp4, vậy làm sao để chèn một lúc 2 video khác định dạng vào cùng một thẻ ? với HTML5 thì bạn chỉ cần sử dụng thuộc tính source để thêm nhiều video trên cùng một thẻ, trình duyệt sẽ tự động chạy các video theo thứ tự, nếu video không chạy được thì trình duyệt sẽ dừng tải file đó và sang file video tiếp theo. Ví dụ :

<video controls="controls" height="240" width="320">
<source src="something.ogv" type="video/ogg; codecs="theora, vorbis" ">
<source src="something.mp" type="video/mp4; codecs="avc1.4201E, mp4a.40.2" ">
</video>

Ở ví dụ trên chúng ta có thêm thuộc tính type, thuộc tính type có 3 giá trị lần lượt chỉ : định dạng, video codec và audio codec. Ví dụ như với file something.ogv thì thuộc tính type chỉ định dạng là OGG, video codec là theora và audio codec là vorbis.
HTML5 cùng thẻ <video> trên Internet Explorer
Đợi đã, chẳng phải IE không hỗ trợ HTML5, vậy làm sao mà có thể hiển thị được thẻ <video> của HTML5 trên IE ? Bốc phét hả ?
Trả lời : Vì IE không hỗ trợ HTML5 nên chúng ta cần phải sử dụng một script để hiển thị HTML5 thông qua nền flash.
Hiện nay có một phần mềm mã nguồn mở là FlowPlayer hỗ trợ việc chạy các file encode H.264 và AAC định dạng MP4, việc của bạn là upload 2 file bao gồm .swf và một file Javascript lên hosting. Và do FlowPlayer không hiểu thẻ <video> nên chúng ta phải nhét thêm một file Javascript nữa lên hosting để chuyển trực tiếp thẻ <video> sang thành Flash.
Ở đây chúng ta có 2 file Javascript cần đưa vào site là : flowplayer.min.js của FlowPlayer và html5-video.js được cung cấp bởi DiveIntoHTML5
Trang chủ FlowPlayer : http://flowplayer.org
Ví dụ :

…
…
<script src="flowplayer.min.js">

<script src="html5-video.js">
...
...

Tiếp theo bạn cần làm cho IE nhận dạng được thẻ <video> và <source> nếu không thì công của chúng ta từ bước 1 coi như công cốc, thêm 1 file javascript khác là “HTML5 Enabling Script” lên đầu trang.
Link HTML5 Enabling Script
Ví dụ :

<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
<![endif]-->

Sau khi thêm các file từ bước 1 đến tận bước 2 thì bây giờ khi bạn dùng thẻ <video> IE sẽ tự động nhận dạng và chuyển sang Flash để sử dụng FlowPlayer cho việc hiển thị / chạy video. Ví dụ :

<video id="movie" preload="none" controls="controls" height="240" width="320">
<source src="pr6.mp4" type="video/mp4; codecs="avc1.42E01E, mp4a.40.2"">
<source src="pr6.ogv" type="video/ogg; codecs="theora, vorbis"">
</video>

Vậy là bạn có thể sử dụng “thử nghiệm” HTML5 trên các trình duyệt được rồi, bạn có thể sử dụng server di động  để thử nghiệm mà không làm ảnh hưởng tới website / blog chính của bạn, tới đây chắc chắn IE9 sẽ hỗ trợ HTML5 mặc dù chưa thấy Microsoft thông báo gì cả, HTML5 sẽ tiếp tục phát triển rộng. Dù vậy theo các chuyên gia thì cần ít nhất đến năm 2020 thì CSS3 với HTML5 mới ở mức phổ biến. Còn mình thì tiếp tục chờ CSS4 và HTML6.

Nguồn DiveIntoHTML5

Tải miễn phí EditPlus Text Editor 3.51

Tính năng thích hợp trên Internet:
- Dùng chính EditPlus để làm web browser xem và chỉnh sửa nội dung của tập tin HTML hoặc java applet mà không cần chạy thêm trình browser.
- Tích hợp sẵn các lệnh FTP để upload tập tin lên FTP hoặc chỉnh sửa trực tiếp tập tin nằm trên FTP server.
- Làm sáng các URL và địa chỉ email.
- HTML toolbar: Thêm HTML tags nhanh và dễ từ toolbar này, hỗ trợ cả các tính năng chèn màu, chèn ký tự, tạo bảng table và tạo đối tượng.

• Chọn tài liệu (Document selector): Chọn văn bản tập tin đã nạp lên bộ nhớ nhanh chóng bằng chuột click . Nhanh hơn chọn trên menu Window hoặc Ctrl-Tab nhiều lần như những phần mềm khác.
• Tiện ích người dùng (User tools): Hỗ trợ những lệnh cho người dùng tạo như Keystroke recording (lưu và lặp là các trình tự phím nhấn).
• Tự động hòan tất từ khóa (Auto-completion): Tự động hoàn tất từ khóa đang gõ. Mặc định hỗ trợ cho Perl và C/C++. Người dùng có thể tạo file auto-completion riêng cho những ngôn ngữ lập trình khác.
• Cửa sổ Cliptext: Lưu lại nhiều cliptext để truy xuất dễ và nhanh.
• Template: Tạo tập tin mới nhanh hơn nhờ templates.

Serial đăng ký:
Name: cryvn@yahoo.com
Serial: 1C257-A2248-7EZ95-92WAD-CATCD

Download  EditPlus Text Editor 3.51

Menu cố định cho blog đẹp

Đây là dang menu trượt cố định bên trên khi kéo trình duyệt mà đã được nhiều người sử dụng. Tinhocso.net hôm nay sẻ mang đến bạn một style mới khá chuẩn sử dụng CSS3 và HTML 5 nên gọi là Good !
Demo Image
Thêm CSS

#tinhocso_net_floating_menu{background-color: #1484CE;background: #1484ce;background: -moz-linear-gradient(top,  #1484ce 0%, #1274b5 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1484ce), color-stop(100%,#1274b5));background: -webkit-linear-gradient(top,  #1484ce 0%,#1274b5 100%);background: -o-linear-gradient(top,  #1484ce 0%,#1274b5 100%);background: -ms-linear-gradient(top,  #1484ce 0%,#1274b5 100%);background: linear-gradient(to bottom,  #1484ce 0%,#1274b5 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1484ce', endColorstr='#1274b5',GradientType=0 );border-bottom: 1px solid rgba(255, 255, 255, 0.1);box-shadow: 0 2px 0 #0E5A8C;box-shadow: 0px 2px 0px #0e5a8c;height:34px;width:100%;min-width:970px;position:fixed;top:0;left:0;z-index:9999;overflow:hidden;border-bottom:1px solid #2a8fd2;}
#tinhocso_net_floating_menu ul{list-style: none;margin:0 auto;width:970px;}
#tinhocso_net_floating_menu ul li{float:left}
#tinhocso_net_floating_menu ul li a{line-height:34px;padding:0 15px;color:#f0e8e5;font-size:13px;font-family:Arial, sans-serif;text-shadow:0px -1px 0px #0f669f;display:block;text-decoration:none;border-right: 1px solid #1470ad;border-left:1px solid #2a88c6;}
#tinhocso_net_floating_menu ul li a:hover{background-color:rgba(255,255,255,0.125);color:white;}

Thêm HTML vào bất cứ nơi đâu, tốt nhất thì nên chèn vào wrapper

<div id='tinhocso_net_floating_menu'>
<ul>
  <li style='border-left:1px solid rgba(30, 30, 30, 0.125);'><a href='/'><img alt='Home' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKPP_F9RHtY69FzANEvUd-cJRTUtam_m7CO0gvbs7OH_bL6VcOXnv466iH42NQxFZy-AWiIN6spSdPGK_mHYknQh8Jrh9zz55NOtleIXPyk2YHAM86Krh-pOWd5J1tUKSQHzR8J48lBUdU/s1600/tinhocso.net-home.png' style='padding:0px;'/></a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a></li>
<li><a href='#'>Menu 4</a></li>
<li><a href='#'>Menu 5</a></li>
</ul>
</div>

Thêm tiện ích nút Like và Chia sẻ của Facebook đẹp vào blog/website

Dưới đây là đoạn code hiển thị nút like giống demo như sau :

Và đây là code , bạn có thể chèn nó vào template ở nọi vị trí

<div id="fb-root">
</div>
<script>
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<fb:like href="http://tinhocso.net" send="true" show_faces="true" width="450"></fb:like>

Thay http://tinhocso.net bằng domain của bạn vào nhé !

Kiểm tra website trên các trình duyệt online miễn phí

Tool kiểm tra miễn phí tại http://browsershots.org , và dưới đây là bản mẩu của tinhocso.net !

Demo : http://browsershots.org/http://www.tinhocso.net/

Axure RP Pro Full Key - Phần mềm thiết kế khung website chuyên nghiệp

Các tính năng chính của Axure RP Pro :
- Nhanh chóng thiết kế giao diện người dùng trong một môi trường quen thuộc và kéo thả. Xác định các chức năng của mỗi đối tượng (nút tức) bằng cách thêm các chú thích và liên kết.

- Xem và tương tác với mẫu thử nghiệm của bạn trong trình duyệt. Chú thích có thể được xem trong mẫu thử nghiệm bằng cách nhấn vào nhãn. Liên kết và đối tượng là chức năng HTML.
- Tài liệu thiết kế với dễ đọc, thông số kỹ thuật chuyên nghiệp. Các tài liệu Word tạo ra bao gồm ảnh chụp màn hình với chú thích và các bảng đối tượng với chú thích và thông tin liên kết.
- Tiết kiệm thời gian và thay đổi toàn cầu bằng cách tham khảo sử dụng và các mẫu. Một thay đổi một tham chiếu hoặc mẫu sẽ được phản ánh trên tất cả các trang tham chiếu hoặc mẫu được sử dụng….
Download
Dùng Key bản quyền

License: KosKomputer
Key: dcENpZgjsYDoFPNYx9JMm77TfrzIMlv5iXfdwturL4pDe7DEHjEfjvfCodDKdjLr

Theo : Tin Học Số - (www.tinhocso.net)