0986184211

Hướng dẫn tắt html5 youtube trên firefox hoặc chrome, chèn thẻ video hoặc audio trong html5, tối ưu hóa phân phối css

Hiện nay, flash không còn thịnh hành như trước và có nhiều lỗ hổng bảo mật vì vậy Google đã chính thức chặn flash kể từ phiên bản Chrome 53 và các trình duyệt web khác như FireFox ... cũng đã bắt đầu chặn hẳn flash và chỉ hiện khi người dùng cho phép bật. Flash được thay thế hẳn bằng HTML5, các đặc trưng HTML5, bao gồm sự hỗ trợ audio và video tự nhiên mà không cần Flash và cho tính bảo mật cao hơn hẳn flash đã quá cũ. Thẻ HTML5 <audio> hoặc <video> giúp bạn chèn nhạc hoặc clip/video vào trang web đơn giản hơn rất nhiều. Bạn cần thiết lập thuộc tính src để nhận diện nguồn phương tiện là audio hoặc video và bao gồm một thuộc tính control (trình điều khiển) để người dùng có thể chơi và dừng thuận tiện hơn, vì không phải ai cũng muốn vào 1 trang web mà nhạc tự động bật và tìm không thấy chỗ tắt, nếu đang trong phòng họp thì càng bất tiện hơn.

Dưới đây, DNKSoft.net xin giới thiệu 1 số cách đơn giản nhất để chèn thẻ video hoặc audio trong html5 vào trang web của bạn

Nhúng video

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

Định dạng video được sử dụng phổ biến nhất là:

  • Ogg: Ogg file với Thedora video và Vorbis video.

  • mpeg4: MPEG4 file với H.264 video và AAC audio.

Bạn có thể sử dụng thẻ <source> để xác định video cùng với kiểu video 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:

 <!DOCTYPE HTML> <html> <body> <video  width="300" height="200" controls autoplay> <source src="http://www.vietjack.com/html5/foo.mp4" type="video/ogg" /> <source src="http://www.vietjack.com/html5/foo.mp4" type="video/mp4" /> Your browser does not support the <video> element. </video> </body> </html>

Thuộc tính của thẻ video

Thẻ HTML5 video có thể có một số thuộc tính giúp người dùng có thể điều khiển 1 cách thuận tiện như sau:

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.

Tuy vậy, trong những phiên bản thiết kế web theo yêu cầu tại DNKSoft.net đã được tích hợp sẵn phần nhúng video từ youtube vào trang web, bạn có thể xem chi tiết tại đây

Nhúng Audio

HTML5 hỗ trợ thẻ <audio> mà được sử dụng để nhúng nội dung âm thanh trong một tài liệu HTML hoặc XHTML như sau:

 <audio src="foo.wav" controls autoplay> Your browser does not support the <audio> element. </audio>

Các định dạng audio được sử dụng phổ biến nhất là ogg, mp3 và wav.

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

 <!DOCTYPE HTML> <html> <body> <audio controls autoplay> <source src="http://www.vietjack.com/html5/audio.ogg" type="audio/ogg" /> <source src="http://www.vietjack.com/html5/audio.wav" type="audio/wav" /> Your browser does not support the <audio> element. </audio> </body> </html>  

Các thuộc tính của Audio:

Thẻ HTML5 audio có thể có một số thuộc tính để cho người dùng có thể điều khiển trình play như sau:

Thuộc tính Miêu tả
autoplay Thuộc tính logic này nếu được xác định trước, audio sẽ tự động bắt đầu 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, audio 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 audio 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.
loop Thuộc tính logic này nếu được xác định, sẽ cho phép audio tự động chơi lại từ đầu sau khi kết thúc.
preload Thuộc tính này xác định audio 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.
src URL của audio đượ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.

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

Các thẻ HTML5 audio và video có thể có một số thuộc tính để điều khiển các tính năng đa dạng bơi sử dụng Javascript:

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

Trong các phiên bản web thiết kế tại DNKSoft.net bạn có thể chèn file nhạc vào bài viết dạng nhạc nền hoặc toàn web, để thao tác bạn làm như bên dưới:
- Upload file nhạc lên nhaccuatui hoặc zingmp3 hoặc tìm 1 bài nào đó bạn thích rồi copy mã nhúng:
chèn nhạc vào bài viết trên web do dnksoft.net thiết kế
chèn nhạc vào bài viết trên web do dnksoft.net thiết kế
Copy mã nguồn:
chèn nhạc vào bài viết trên web do dnksoft.net thiết kế
Sau đó quay lại trình soạn thảo bài viết và chọn như hình dưới:
chèn nhạc vào bài viết trên web do dnksoft.net thiết kế
Chèn vào bất cứ chỗ nào trong phần Source nhưng tốt nhất là soạn thảo xong bài viết rồi chèn vào vùng cuối cùng của phần Source này để phân biệt, vì sau này có muốn gỡ ra còn kiếm lại dễ hơn.
chèn audio vào web do dnksoft.net thiết kế

Sau đây là ví dụ cho phép play một video:

 <!DOCTYPE HTML> <head> <script type="text/javascript"> function PlayVideo(){ var v = document.getElementsByTagName("video")[0]; v.play(); } </script> </head> <html> <body> <form> <video  width="600" height="400" src="https://www.dnksoft.net/html5/foo.mp4"> Your browser does not support the <video> element. </video> <input type="button" onclick="PlayVideo();"  value="Play"/> </form> </body> </html>

Định cấu hình Server cho kiểu media

Theo mặc định thì hầu hết Server không phục vụ kiểu phương tiện Ogg hoặc mp4 với các kiểu MIME chính xác, vì thế bạn cần bổ sung định cấu hình chính xác cho chúng:

 AddType audio/ogg .oga AddType audio/wav .wav AddType video/ogg .ogv .ogg AddType video/mp4 .mp4 

Hướng dẫn tắt html5 youtube trên firefox hoặc chrome

Vô hiệu hóa html5 youtube trên trình duyệt Chrome, Coc Coc, và Opera
Với Chrome, Coc Coc, Opera. Bạn cần tải tiện ích Disable Youtube™ HTML5 Player tại đây
Với Firefox bạn cần tải tiện ích tại đây

Click chuột vào nút Add to Chrome để download và cài đặt tiện ích.

cach tat html5 tren youtube
 

Sau khi tắt HTML5 Youtube, bạn có thể bắt link với IDM (internet download manager) như thông thường.

vo hieu hoa html5 tren youtube

Tối ưu hóa phân phối css trong màn hình đầu tiên của PageSpeed Insights giúp trang web của bạn tải nhanh hơn và tốt cho SEO

Tối ưu hóa phân phối CSS (Optimize CSS Delivery)

Đối với các tập tin CSS nhỏ, các bạn có thể đặt nội dung CSS vào thẻ <style></style> và nhúng vào <head></head>.

Ví dụ bạn có 1 tập tin CSS verysmall.css rất nhỏ như sau:

.yellow {background-color: yellow;}
.blue {color: blue;}
.big { font-size: 8em; }
.bold { font-weight: bold; }

Thay vì nhúng tập tin CSS đó như sau:

<html>
<head>
<link rel=”stylesheet” href=”verysmall.css”>
</head>
<body>
<div class=”blue”>
Hello, world!
</div>
</body>
</html>

Thì bạn có thể inline nội dung CSS vào <style></style> và nhúng vào <head></head> như sau:

<html>
<head>
<style>
.blue{color:blue;}
</style>
</head>
<body>
<div class=”blue”>
Hello, world!
</div>
</body>
</html>

Như bạn thấy ở trên, chúng ta chỉ cần inline class “blue” thay vì tải nguyên một tập tin CSS không cần thiết. Tuy nhiên, bạn không nên sử dụng phương pháp trên cho một tập tin CSS quá lớn.

Các bạn cũng có thể sử dụng Javascript để tải các tập tin CSS sau khi trang web được tải xong. Như sau:

<html>
<head>
<style>
.blue{color:blue;}
</style>
</head>
<body>
<div class=”blue”>
Hello, world!
</div>
<script>
var cb = function() {
var l = document.createElement(‘link’); l.rel = ‘stylesheet’;
l.href = ‘verysmall.css’;
var h = document.getElementsByTagName(‘head’)[0]; h.parentNode.insertBefore(l, h);
};
var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(cb);
else window.addEventListener(‘load’, cb);
</script>
</body>
</html>

Mình nghĩ rằng bạn không nên sử dụng phương pháp Javascript. Nó không được hỗ trợ trên nhiều trình duyệt, điều đó có thể phá vỡ giao diện của bạn.

Kết luận: Bạn hoàn toàn có thể tối ưu hóa phân phối cho CSS. Nhưng điều đó không an toàn. Vì vậy chúng ta có thể vui lòng chấp nhận cảnh báo trên.

Xóa JavaScript chặn hiển thị (Remove Render-Blocking JavaScript)

Không giống như CSS, Javascript là dễ dàng hơn để loại bỏ chặn hiển thị.

Cũng như CSS, các bạn có thể chèn trực tiếp nội dung Javascript vào thẻ <script></script> và nhúng vào <head></head>. Phương pháp này cũng chỉ nên áp dụng đối với các tập tin Javascript nhỏ.

Đối với các tập tin Javascript nhỏ, các bạn sử dụng:

<html>
<head>
<script type=”text/javascript”>
/* contents of a very small JavaScript file */
</script>
</head>
<body>
<div>
Hello, world!
</div>
</body>
</html>

Thay vì:

<html>
<head>
<script type=”text/javascript” src=”verysmall.js”></script>
</head>
<body>
<div>
Hello, world!
</div>
</body>
</html>

Tải không đồng bộ các tài nguyên JavaScript

Thuộc tính async của JavaScript cho phép bạn tải không đồng bộ các tài nguyên JavaScript. Nội dung HTML sẽ được tiếp tục tải mà không cần chờ đợi các tài nguyên CSS.

Sử dụng thuộc tính async như sau:

<script async type=”text/javascript” src=”myjs.js”></script>

Thuộc tinh defer của JavaScript cho phép bạn trì hoàn tải các tài nguyên JavaScript cho đến khi nội dung HTML được tải xong. Tài nguyên JavaScript sẽ được tải sau khi toàn bộ HTML được tải xong.

Sử dụng thuộc tính defer như sau:

<script defer type=”text/javascript” src=”myjs.js”></script>

Mặc dù phương pháp này giúp nội dung trên trang web được hiển thị nhanh nhất. Nhưng nếu bạn không có một chút kiến thức về cách mà JavaScript làm việc, phương pháp trên cũng không an toàn. Vì đây là phương pháp tải không đồng bộ, nó có thể dẫn đến việc trang web hoạt động không đúng cách.

Đưa các tập tin JavaScript xuống dưới footer của trang web

Đây là cách tốt nhất để giải quyết vấn đề “Xóa JavaScript chặn hiển thị“, các bạn có thể đưa các thẻ <script></script> xuống trước thẻ </body>.

Đối với WordPress, bạn có thể sử dụng function “wp_enqueue_script” với biến $in_footer = true.

Và cuối cùng, nếu có bất kỳ thắc mắc về kỹ thuật hay cần hỗ trợ, xin vui lòng liên hệ hotline: 0936.806.111 (Zalo,Viber) - 0986.184.211 - DNKSoft.net
Chúc bạn thành công !!!

Bình luận

Đang tải bình luận,....

Liên hệ với chúng tôi