RSSCSS

Hướng dẫn tạo Video bằng HTML5 và CSS3

Ngày nay, hầu hết các video được thể hiện thông qua flash. Tuy nhiên, HTML5 ra đời tạo một cuộc cách mạng trong thế giới công nghệ. Hôm nay, Y2Graphic sẽ hướng dẫn cách đưa một đoạn video vào website hay blog.

MediaElement.js

Đầu tiên, chúng ta sẽ tải thư viện "MediaElement.js" tại trang chủ.

Giải nén, vào thư mục build, copy những file sau:

  • flashmediaelement.swf
  • mediaelement-and-player.min.js
  • silverlightmediaelement.xap

 

Tạo một thư mục là js để chứa những file này.

HTML5 Video File Formats

Nhược điểm của Video HTML5 là nó không hỗ trợ nhiều định dạng và không tương thích với nhiều trình duyệt khác. Bạn chỉ có thể sử dụng MP4, OGGWebM.

Hướng dẫn tạo Video bằng HTML5 và CSS3

HTML

Load thư viện javascript và css. Tất cả đặt trong thẻ <head>

 
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script src="/js/mediaelement-and-player.min.js"></script>
        <link rel="stylesheet" href="/css/style.css" media="screen">
    </head>

Nhúng video

 
    <video width="640" height="267" poster="media/cars.png">
        <source src="/media/cars.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    </video>

Đối với file OGV thì cũng thực hiện tương tự

 
    <video width="640" height="267" poster="media/cars.png">
         <source src="/path/to/myvideo.ogv" type='video/ogg; codecs="theora, vorbis"'>
    </video>

Đặt đoạn script này nằm trong thẻ <body>

 
 <script>
        $(document).ready(function() {
            $('video').mediaelementplayer({
                alwaysShowControls: false,
                videoVolume: 'horizontal',
                features: ['playpause','progress','volume','fullscreen']
            });
        });
 </script>

CSS cơ bản

    .mejs-inner,
    .mejs-inner div,
    .mejs-inner a,
    .mejs-inner span,
    .mejs-inner button {
        margin: 0;
        padding: 0;
        border: none;
        outline: none;}

    .mejs-container {
        position: relative;
        background: #000000;
        margin:0 auto;}

    .mejs-inner {
        position: relative;
        width: inherit;
        height: inherit;}

    .me-plugin {
        position: absolute;}

    .mejs-container-fullscreen .mejs-mediaelement,
    .mejs-container-fullscreen video,
    .mejs-embed,.mejs-embed body,.mejs-mediaelement {
        width: 100%;
        height: 100%;}

    .mejs-embed,.mejs-embed body {
        margin: 0;
        padding: 0;
        overflow: hidden;}

    .mejs-container-fullscreen {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
        z-index: 1000;}

    .mejs-poster img { 
        display: block;}

    .mejs-background,.mejs-mediaelement,.mejs-poster,.mejs-overlay {
        position: absolute;
        top: 0;
        left: 0;}

Tạo nút Play

	.mejs-overlay-play { 
    	cursor: pointer;}

    .mejs-inner .mejs-overlay-button {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 50px;
        height: 50px;
        margin: -25px 0 0 -25px;
        background: url(../img/play.png) no-repeat;}

	.mejs-container .mejs-controls {
        position: absolute;
        width: 100%;
        height: 34px;
        left: 0;
        bottom: 0;
        background: rgba(0,0,0, .7);}

	.mejs-controls .mejs-button button {
        display: block;
        cursor: pointer;
        width: 16px;
        height: 16px;
        background: transparent url(../img/controls.png);}


Hướng dẫn tạo Video bằng HTML5 và CSS3

Play Pause, Fullscreen

    .mejs-controls div.mejs-playpause-button {
        position: absolute;
        top: 12px;
        left: 15px;}

    .mejs-controls .mejs-play button,
    .mejs-controls .mejs-pause button {
        width: 12px;
        height: 12px;
        background-position: 0 0;}

    .mejs-controls .mejs-pause button { 
        background-position: 0 -12px;}

    .mejs-controls div.mejs-volume-button {
        position: absolute;
        top: 12px;
        left: 45px;}

    .mejs-controls .mejs-mute button,
    .mejs-controls .mejs-unmute button {
        width: 14px;
        height: 12px;
        background-position: -12px 0;}

    .mejs-controls .mejs-unmute button { 
        background-position: -12px -12px;}

    .mejs-controls div.mejs-fullscreen-button {
        position: absolute;
        top: 7px;
        right: 7px;}

    .mejs-controls .mejs-fullscreen-button button,
    .mejs-controls .mejs-unfullscreen button {
        width: 27px;
        height: 22px;
        background-position: -26px 0;}

	.mejs-controls .mejs-unfullscreen button { 
    	background-position: -26px -22px;}


Hướng dẫn tạo Video bằng HTML5 và CSS3

Volume Slider

    .mejs-controls div.mejs-horizontal-volume-slider {
        position: absolute;
        cursor: pointer;
        top: 15px;
        left: 65px;}
 
    .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
        width: 60px;
        background: #d6d6d6;}
 
    .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
        position: absolute;
        width: 0;
        top: 0;
        left: 0;}
 
    .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
    .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
        height: 4px; 
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;}


Hướng dẫn tạo Video bằng HTML5 và CSS3

Progress Bar

    .mejs-controls div.mejs-time-rail {
        position: absolute;
        width: 100%;
        left: 0;
        top: -10px;}
 
    .mejs-controls .mejs-time-rail span {
        position: absolute;
        display: block;
        cursor: pointer;
        width: 100%;
        height: 10px;
        top: 0;
        left: 0;}
 
    .mejs-controls .mejs-time-rail .mejs-time-total {
        background: rgb(152,152,152);
        background: rgba(152,152,152, .5);}
 
    .mejs-controls .mejs-time-rail .mejs-time-loaded {
        background: rgb(0,0,0);
        background: rgba(0,0,0, .3);}
 
	.mejs-controls .mejs-time-rail .mejs-time-current { 
    	width: 0;}


Hướng dẫn tạo Video bằng HTML5 và CSS3

Tooltip & Volume Handle

    .mejs-controls .mejs-time-rail .mejs-time-handle {
        position: absolute;
        cursor: pointer;
        width: 16px;
        height: 18px;
        top: -3px;
        background: url(../img/handle.png);}
 
    .mejs-controls .mejs-time-rail .mejs-time-float {
        position: absolute;
        display: none;
        width: 33px;
        height: 23px;
        top: -26px;
        margin-left: -17px;
        background: url('/../img/tooltip.png');}
 
    .mejs-controls .mejs-time-rail .mejs-time-float-current {
        position: absolute;
        display: block;
        left: 0;
        top: 4px;
        font-family: Helvetica, Arial, sans-serif;
        font-size: 10px;
        font-weight: bold;
        color: #666666;
        text-align: center;}
 
    .mejs-controls .mejs-time-rail .mejs-time-float-corner { 
        display: none;}

Cuối cùng, ta thêm một số hiệu ứng Gradient cho progress bar và volume slider.

    .mejs-controls .mejs-time-rail .mejs-time-current,
    .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
        background: #82d344;
        background: -webkit-linear-gradient(top, #82d344 0%, #51af34 100%);
        background: -moz-linear-gradient(top, #82d344 0%, #51af34 100%);
        background: -o-linear-gradient(top, #82d344 0%, #51af34 100%);
        background: -ms-linear-gradient(top, #82d344 0%, #51af34 100%);
        background: linear-gradient(top, #82d344 0%, #51af34 100%);}


Hướng dẫn tạo Video bằng HTML5 và CSS3

 

 

Nguồn: designmodo

 

 

Tags:

Nếu bạn thấy bài viết hữu ích, hãy nhấn +1 và các liên kết chia sẻ để website ngày càng phát triển hơn. Xin cám ơn bạn!

Nếu là khách, bạn phải đăng ký tài khoản và kích hoạt tài khoản để bình luận được hiển thị ở đây.
Thông tin kích hoạt gửi đến mail của bạn.

Tin mới hơn

Tin cũ hơn

Lên trên đầu