HTML5 ve CSS3 Video Oynatıcı Oluşturma

HTML5 ve CSS3 Video Oynatıcı Oluşturma


 

1. Adım - MediaElement.js'yi İndirme

 
Öncelikle " MediaElement.js " komut dosyasını indirip çıkarmamız gerekir. Sonra "yapı" klasöründen üç dosyaya ihtiyacımız var:
 
  • flashmediaelement.swf
  • MediaElement-ve-player.min.js
  • silverlightmediaelement.xap
 
Sonra tüm bu üç dosyayı aynı dizine kopyalayın, "js" klasörüm için kopyalayacağız.
 

2.Adım - HTML İşaretleme

Şimdi, jQuery Kütüphanesine bağlanmamız gerekiyor, yerel olarak barındırabilir veya Google tarafından barındırılan kütüphaneyi kullanabiliriz. Sonra "mediaelement-and-player.min.js" komut dosyasına ve CSS dosyasına bağlanmamız gerekir. Bu üç dosyanın tümü,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<head>
 
    <meta charset="utf-8">
 
    <title>Video Player Tutorial - by Valeriu Timbuc for DesignModotitle>
 
    <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">
 
    <style type="text/css">
        html, body { margin: 0; padding: 0; }
        body { background: #f2f2f2 url(img/bg.png) no-repeat top center; padding-top: 265px; }
        .mejs-container { margin: 0 auto; }
    style>
<meta name="robots" content="noindex,follow" />
head>

Video oynatıcıyı yaratmak için yalnızca yeni HTML5 video etiketini eklememiz gerekiyor . Ardından video etiketine bazı özellikler ekleyeceğiz. Videonun genişliği, yüksekliği ve poster. Poster, kullanıcı oynat düğmesine basana kadar videonun üst kısmında gösterilmek üzere ekleyebileceğiniz bir resimdir.

1
2
3
<video width="640" height="267" poster="media/cars.png">
    <source src="media/cars.mp4" type="video/mp4">
video>

Şimdi sadece video denetimlerini yüklemek ve bazı ayarları yapmak için aşağıdaki kodu eklememiz gerekiyor. Ekleyeceğimiz ayarlar şunlardır:

  • AlwaysShowControls - video denetimlerini her zaman göstermek için true ve fare çıkışında gizlemek için false olur. 
  • VideoVolume - ses kaydırma çubuğunu yatay yapmak için.
  • ['playpause', 'progress', 'volume', 'fullscreen'] - burada videoda hangi kontrolleri eklemek istediğimizi belirleyeceğiz.
1
2
3
4
5
6
7
8
9

3. Adım - Video Temel Stilleri

Kullanacağımız öğelere sıfırlama stilleri ekleyerek başlayalım.

1
2
3
4
5
6
7
8
9
10
11
.mejs-inner,
.mejs-inner div,
.mejs-inner a,
.mejs-inner span,
.mejs-inner button,
.mejs-inner img {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}

Ardından, genel stilleri video kapsayıcısına ekleyeceğiz. Bu adımda kullandığımız tüm CSS mülkleri , video kapsayıcısı düzenini oluşturmak için gereklidir. Bu, videoda herhangi bir stil oluşturmaz, yalnızca tüm video öğelerini doğru yerde konumlandırır.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
.mejs-container {
    position: relative;
    background: #000000;
}
 
.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-background,
.mejs-mediaelement,
.mejs-poster,
.mejs-overlay {
    position: absolute;
    top: 0;
    left: 0;
}
 
.mejs-poster img { display: block; }

 

 

Adım 4 - Konteynerleri kontrol eder

Video kapının ortasına büyük bir oynat düğmesi eklemeye başlayacağız .

1
2
3
4
5
6
7
8
9
10
11
.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;
}

Ardından video kontrolleri konteynerini stil edip konumlandırırız. Alt kısımda konumlandırıp 34 piksellik bir yükseklik verecek ve arka plan rengi ekleyeceğiz. Arka planı şeffaf yapmak için RGBA'yı kullanacağız, ancak RGBA eski tarayıcılarda desteklenmiyor.  Bu nedenle RGB'yi kullanarak da geri düşüş yapacağız. Sonra bazı düğmeler genel stiller ekleyecek ve sprite resimlerini ekleyeceğiz. CSS sprite'lerin ne olduğunu veya temayla nasıl çalışılacağını bilmiyorsanız, bu makaleye göz atın .

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.mejs-container .mejs-controls {
    position: absolute;
    width: 100%;
    height: 34px;
    left: 0;
    bottom: 0;
    background: rgb(0,0,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);
}

 

 

Adım 5 - Video Kontrol Düğmeleri

Bu adımda düğmeleri doğru yerde konumlandırdık. Temel olarak burada yapacağımız şey: kontrol düğmesindeki her düğmeyi konumlandırın, sağ düğmeyi görüntülemek için her düğmenin genişliğini ve yüksekliğini ayarlayın ve arka plan resmini yerleştirin.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
.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; }

 

6. Adım - Ses Kaydırıcısı

Için hacim, kapaklı bunu konumlandırırsınız, daha sonra genişlik ve yükseklik değerlerinin, yuvarlak köşeler ekleyin.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.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;
}