Tạo trình duyệt xem Clip cho Web/Blog

Lê An    10/14/2013    CSS , Thủ thuật blog    Comments   

HTML 5 ra đời bổ xung thêm nhiều tiện ích mới tính năng mới trong đó có tính năng chèn nhạc mp3 và Clip vào Web/blog một cách thể dàng bằng thẻ <video>........</video>.

Dựa theo nền tảng HTML 5 nay mình xin giới thiệu cách bạn một trình duyệt Media với chức năng xem Clip trên Web/blog. Rất thích hợp cho Web/blog chuyên về Clip hay giải trí. Sử dụng Link Mp4, webm,Ogg.

DEMO

Các bước thực hiện:

• Đăng Nhập vào Blogspot
• Chọn Mẫu -> Chỉnh sửa HTML.
• Bạn tìm đến thẻ </head> (Bạn nhấn tổ hợp phím Ctrl + F để tìm cho nhanh)
• Sau đó coppy đoạn code phía dưới dán trước thẻ </head>.

<link href='https://googledrive.com/host/0B4DGSbbFJaMuaDJ1MjVFMi1uNlE' rel='stylesheet'/>
<script src='https://googledrive.com/host/0B4DGSbbFJaMuRVZpdUdHaTRVcXM' type='text/javascript'/>
<script>
videojs.options.flash.swf = &quot;http://example.com/path/to/video-js.swf&quot;;
</script>

Xong rồi bạn Lưu lại.

HTML

Khi bạn muốn hiển thị Clip bạn dùng code như sau:

<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="570" height="400"
      poster="https://lh6.googleusercontent.com/-kjMl00SrJ0M/UlOdTGtO1KI/AAAAAAAAB_Q/pYRW-Yt7aUM/s570/Untitled-1.png"
      data-setup="{}">
    <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
    <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
    <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
    <track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
  </video>

Tùy chọn:

Bạn chọn 1 trong 3 định dạng Clip để chèn thích hợp vào Web/blog
Màu đỏ: xem clip định dạng MP4
Màu xanh: xem clip định dạng webm
Màu cam: xem clip định dạng ogg
Màu tím:  Nếu bạn sử dụng cho Web/blog Phim thì sử dụng Code để chèn Sub phụ đề