Ücretsiz HTML5 Player SSPLAYER

ibrahim kulekçi kardeşim bu güzel kaynak kaybolmasın diye komple senin siteden kopyaladım hakkını helal et amacım bu makaleden hit almak falan değil SSPLAYER ile ilgili kaynak siteler kapanmaya başladı bir kaynakta ben olayım istedim hem kendim için hem ihtiyaç sahipleri için.

Şu iki gündür ne çektim bir ben birde Allah biliyor. Yazın açmayı düşündüğüm ve baya uzun solukla sürmeyi düşündüğüm projem için video player arayışına girmiştim. Karşıma sürülerce video player çıktı ama benim için en önemli bir unsur yoktu bu playerlarda. Altyazı desteklemeyen playerı ben ne yapimim?

Arayışlarımın sonunda sağlam diyebileceğim JWPlayer ve VideoJS çıktı. Abi sistem yapıyorsun anladık da niye bu sistemin kullanımı kolaylaştırmıyorsun. Sırf iki üç kuruş kanalım diye büyük kolaylığı si.. (silip) atmışlar. Hele bir zamanların pop playerı olan JWPlayer işi iyice APİ sistemine dökmüş yok neymiş analytics koydum diyo. Abi sen video playersın sen ne giriyorsun o işlere.

Neyse uzun lafın kısası arayışlarımın sonuna gelmiştim ki karşıma bir melek çıktı. SSPlayer sen bir meleksin. Hiç beklemezdim aradığımı kendim ülkemin insanından bulacağımı. Bu ülkemi kötülemek için söylemiyorum. Hani Türk zekası ben uğraştım oda uğraşsın kafası çok vardır bu ülkede. Ama benim gibi bilgi paylaştıkça değerlenir felsefesini benimseyen hala bir avuç developer mevcut.

Emre Okay tarafından geliştirilen SSPlayer ile istenilen şeyleri yapabiliyoruz istediğiniz yoksa zaten açık kaynak yap bizde faydalanak. Neyse Emre’nin geliştirdiği bu nimeti hem size tanıtmak için hemde kendime arşiv için sizlerle paylaşıyorum.

Kurulumu oldukça kolay olmasıyla kullanımı ondanda kolay yapmış Emre abimiz. İlk olarak kodlarımı sunucumuza şuradan(3.0.0) indirin(isteyen siteden indirebilir ben ne olur ne olmaz diye kendimden veriyorum).

1-) Kurulum

SSPlayer Klasör Hiyerarşisi

ssplayer/
|----- assets/
    |----- css/
        |----- ssplayer.css
        |----- ssplayer.min.css
    |----- js/
        |----- ssplayer.js
        |----- ssplayer.min.js
    |----- img/
        |----- ssplayer.svg
        |----- error.svg
        |----- logo.jpg|png|gif|svg

Öncelikle klasör hiyerarşimiz yukarıdaki şekilde olmalı. ssplayer/ klaösrünü yukarıdaki hiyerarşiye uygun biçimde sistemimize yüklüyoruz. Ardından yapmanız gerekenler çok basit. Aşağıdaki adımları tek tek uygulamanız halinde ssplayer başarılı bir şekilde çalışacaktır.

CSS ve JAVASCRIPT Dosyalarını Yükleme

Sistemimize ssplayer/ klasörünü yükledik. Şimdi yapmamız gereken ssplayer içindeki ssplayer.min.css vessplayer.min.js dosyalarını sayfamıza dahil etmek. Bunun için aşağıdaki yolları izleyebilirsiniz. Bu arada ssplayer’ınjquery ile çalıştığını hatırlatmak isterim.

Eğer dosyalarımızı <head> içinde çağıracaksak

<head>
    <link href="/ssplayer/assets/css/ssplayer.min.css" rel="stylesheet">
    https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js
    /ssplayer/assets/js/ssplayer.min.js
    
        $(function(){
            $("#ssvideo").ssplayer();
        });
    
</head>

<body>
	<video id="ssvideo"></video>
</body>

Eğer dosyalarımızı <head> dışında çağıracaksak

<body>
    <video id="ssvideo"></video>
    <link href="/ssplayer/assets/css/ssplayer.min.css" rel="stylesheet">
    https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js
    /ssplayer/assets/js/ssplayer.min.js
    
        $("#ssvideo").ssplayer();
    
</body>

İşte hepsi bu kadar. Artık sistemimize SSPlayer’ı başarılı biçimde kurduk.

2-) Kaynak Seçimi – Kaynak / Lisan

$("#ssvideo").ssplayer({
  source: {
    type: "source-language"
  }
});

Kaynak seçimini kullanabilmek için ilk girilmesi gereken ve zorunlu anahtarımız type‘dır. Kaynak seçiminde type anahtarımız iki farklı değer alabilir. Bunlardan ilki kaynak seçiminde lisan seçimininde aktif olmasını istediğimiz anahtar değerimizdir: source-language

$("#ssvideo").spplayer({
  source: {
    default: {
      default: {
        source: "youtube",
        language: "tr",
        quality: "1080p"
      },
    }
  }
});

Kaynak seçimini kullanabilmek için ikinci girilmesi gereken ve zorunlu anahtarımız default‘tur. Default anahtarımız kendi içinde iki farklı anahtar değeri alır. Bunlardan ilki default‘tur. SSPlayer ilk açıldığında varsayılan olarak atanan kaynağı, lisanı ve kaliteyi belirler. Kullanımı basittir ve yukarıdaki gibidir.

$("#ssvideo").spplayer({
  source: {
    default: {
      clicked: {
        youtube: {
          language: "tr",
          tr: "1080p",
          en: "720p"
        },
        vimeo: {
          language: "de",
          de: "720p",
          es: "480p"
        }
      }
    }
  }
});

Default anahtarımız içinde kullanılan ikincil zorunlu anahtarımız clicked‘dır. Kullanım mantığı şu şekildedir: Kaynak seçimi, lisan seçimi veya kalite seçimi yapıldığında varsayılan olarak atanan kaynağı, lisanı veya kaliteyi belirlemeyi sağlar. Kullanımı ise içerisindeki anahtarların ismi sizlerin belirlediği kaynakların anahtarlarıdır. Ben örnek olarak youtube ve vimeo anahtarlarını seçtim. Bunları dilediğinizde değiştirebilirsiniz. Ancak dikkat ediniz: Kaynaklarınızın anahtarları ile clicked anahtarı içindeki anahtarlar aynı olmalıdır.

$("#ssplayer").ssplayer({
  source: {
    youtube: {
      label: "Youtube",
      tr: {
        label: "Türkçe",
        quality: {
          "4320p": "//ssplayer/source/youtube/tr/4320p.mp4",
          "2160p": "//ssplayer/source/youtube/tr/2160p.mp4",
          "1080p": "//ssplayer/source/youtube/tr/1080p.mp4",
          "720p": "//ssplayer/source/youtube/tr/720p.mp4",
          "480p": "//ssplayer/source/youtube/tr/480p.mp4",
          "360p": "//ssplayer/source/youtube/tr/360p.mp4",
          "240p": "//ssplayer/source/youtube/tr/240p.mp4",
          "144p": "//ssplayer/source/youtube/tr/144p.mp4"
        }
      },
      en: {
        label: "English",
        quality: {
          "1080p": "//ssplayer/source/youtube/en/1080p.mp4",
          "720p": "//ssplayer/source/youtube/en/720p.mp4",
          "480p": "//ssplayer/source/youtube/en/480p.mp4",
          "360p": "//ssplayer/source/youtube/en/360p.mp4",
          "240p": "//ssplayer/source/youtube/en/240p.mp4",
          "144p": "//ssplayer/source/youtube/en/144p.mp4"
        }
      }
    },
    
    vimeo: {
      label: "Vimeo",
      de: {
        label: "Deutsch",
        quality: {
          "4320p": "//ssplayer/source/vimeo/de/4320p.mp4",
          "2160p": "//ssplayer/source/vimeo/de/2160p.mp4",
          "1080p": "//ssplayer/source/vimeo/de/1080p.mp4",
          "720p": "//ssplayer/source/vimeo/de/720p.mp4",
          "480p": "//ssplayer/source/vimeo/de/480p.mp4",
          "360p": "//ssplayer/source/vimeo/de/360p.mp4",
          "240p": "//ssplayer/source/vimeo/de/240p.mp4",
          "144p": "//ssplayer/source/vimeo/de/144p.mp4"
        }
      },
      es: {
        label: "Español",
        quality: {
          "1080p": "//ssplayer/source/vimeo/es/1080p.mp4",
          "720p": "//ssplayer/source/vimeo/es/720p.mp4",
          "480p": "//ssplayer/source/vimeo/es/480p.mp4",
          "360p": "//ssplayer/source/vimeo/es/360p.mp4",
          "240p": "//ssplayer/source/vimeo/es/240p.mp4"
        }
      }
    }
  }
});

Yukarıdaki kodlarda kaynaklar, lisanlar ve kaliteler görülmekte. Örnek kod kullanımı yukarıdaki gibidir. Burada bulunanyoutube ve vimeo anahtarları kaynaklarımızın ismini belirtir. Bunlara dilediğiniz isimleri verebilirsiniz. Fakat dilediğiniz isimleri verdiğiniz taktirde default anahtarı içerisindeki default ve clicked anahtarları içinde de kullanmayı unutmayınız.label anahtarımız ise kaynakları isimlendirmeye ve kullanıcıların ekranda bu kaynağı görmesini sağlar. Burada da dilediğiniz değeri vermekte serbestsiniz.

label anahtarları dışında kalan anahtarlar lisan anahtarları olarak adlandırılır. Lisanların evrensel kısaltmalarını kullanmanızı öneririm. Örneğin Türkçe için “tr”, İngilizce için “en” vb. Bu anahtarların içinde kullandığımız anahtarlar şu şekilde olmalırıdır: “4320p”, “2160p”, “1080p”, “720p”, “480p”, “360p”, “240p”, “144p”. Bunların dışında anahtar değerler kullanamazsınız. Çünkü bunlar videoların kalite seçenekleridir ve genel kalite ayarları baz alınarak hazırlanmıştır. Bu anahtarların içerik değeri olarak videoların linklerini girmelisiniz, yukarıda olduğu gibi.

3-) Kaynak Seçimi – Kaynak & Kalite

$("#ssvideo").ssplayer({
  source: {
    type: "source-quality"
  }
});

Kaynak seçimini kullanabilmek için ilk girilmesi gereken ve zorunlu anahtarımız type‘dır. Kaynak seçiminde type anahtarımız iki farklı değer alabilir. Bunlardan ilki kaynak seçiminde lisan seçimininde aktif olmasını istediğimiz anahtar değerimizdir: source-quality

$("#ssvideo").ssplayer({
  source: {
    default: {
      default: {
        source: "youtube",
        quality: "360p"
      },
      clicked: {
        youtube: "360p",
        vimeo: "360p"
      }
    }
  }
});

Kaynak seçimini kullanabilmek için ikinci girilmesi gereken ve zorunlu anahtarımız default‘tur. Default anahtarımız kendi içinde iki farklı anahtar değeri alır. Bunlardan ilki default‘tur. SSPlayer ilk açıldığında varsayılan olarak atanan kaynağı, kaliteyi belirler. Kullanımı basittir ve yukarıdaki gibidir.

Default anahtarımız içinde kullanılan ikincil zorunlu anahtarımız clicked‘dır. Kullanım mantığı şu şekildedir: Kaynak seçimi veya kalite seçimi yapıldığında varsayılan olarak atanan kaynağı veya kaliteyi belirlemeyi sağlar. Kullanımı ise içerisindeki anahtarların ismi sizlerin belirlediği kaynakların anahtarlarıdır. Ben örnek olarak youtube ve vimeo anahtarlarını seçtim. Bunları dilediğinizde değiştirebilirsiniz. Ancak dikkat ediniz: Kaynaklarınızın anahtarları ile clicked anahtarı içindeki anahtarlar aynı olmalıdır.

$("#ssvideo").ssplayer({
  source: {
    youtube: {
      label: "Youtube",
      quality: {
        "4320p": "//ssplayer/source/youtube/4320p.mp4",
        "2160p": "//ssplayer/source/youtube/2160p.mp4",
        "1080p": "//ssplayer/source/youtube/1080p.mp4",
        "720p": "//ssplayer/source/youtube/720p.mp4",
        "480p": "//ssplayer/source/youtube/480p.mp4",
        "360p": "//ssplayer/source/youtube/360p.mp4",
        "240p": "//ssplayer/source/youtube/240p.mp4",
        "144p": "//ssplayer/source/youtube/144p.mp4"
      }
    },
    vimeo: {
      label: "Vimeo",
      quality: {
        "1080p": "//ssplayer/source/vimeo/1080p.mp4",
        "720p": "//ssplayer/source/vimeo/720p.mp4",
        "480p": "//ssplayer/source/vimeo/480p.mp4",
        "360p": "//ssplayer/source/vimeo/360p.mp4",
        "240p": "//ssplayer/source/vimeo/240p.mp4"
      }
    }
  }
});

Yukarıdaki kodlarda kaynaklar, lisanlar ve kaliteler görülmekte. Örnek kod kullanımı yukarıdaki gibidir. Burada bulunan youtube ve vimeo anahtarları kaynaklarımızın ismini belirtir. Bunlara dilediğiniz isimleri verebilirsiniz. Fakat dilediğiniz isimleri verdiğiniz taktirde default anahtarı içerisindeki default ve clicked anahtarları içinde de kullanmayı unutmayınız. label anahtarımız ise kaynakları isimlendirmeye ve kullanıcıların ekranda bu kaynağı görmesini sağlar. Burada da dilediğiniz değeri vermekte serbestsiniz.

4-) Lisan Seçimi

$("#ssvideo").ssplayer({
  languages: {
    default: {
      default: {
        language: "tr",
        quality: "1080p"
      },
      clicked: {
        tr: "4320p",
        en: "1080p"
      }
    },
    tr: {
      label: "Türkçe",
      quality: {
        "4320p": "//ssplayer/languages/tr/4320p.mp4",
        "2160p": "//ssplayer/languages/tr/2160p.mp4",
        "1440p": "//ssplayer/languages/tr/1440p.mp4",
        "1080p": "//ssplayer/languages/tr/1080p.mp4",
        "720p": "//ssplayer/languages/tr/720p.mp4",
        "360p": "//ssplayer/languages/tr/360p.mp4",
        "240p": "//ssplayer/languages/tr/240p.mp4",
        "144p": "//ssplayer/languages/tr/144p.mp4",
      }
    },
    en: {
      label: "English",
      quality: {
        "4320p": "//ssplayer/languages/en/4320p.mp4",
        "2160p": "//ssplayer/languages/en/2160p.mp4",
        "1440p": "//ssplayer/languages/en/1440p.mp4",
        "1080p": "//ssplayer/languages/en/1080p.mp4",
        "720p": "//ssplayer/languages/en/720p.mp4",
        "360p": "//ssplayer/languages/en/360p.mp4",
        "240p": "//ssplayer/languages/en/240p.mp4",
        "144p": "//ssplayer/languages/en/144p.mp4",
      }
    }
  }
});

Örnek kodlama yukarıdaki şekildedir. Kaynak seçimine benzer özellikler taşır.

5-) Kalite Seçimi

$("#ssvideo").ssplayer({
  quality: {
    default: "720p",
    "4320p": "//ssplayer/source/quality/4320p.mp4",
    "2160p": "//ssplayer/source/quality/2160p.mp4",
    "1080p": "//ssplayer/source/quality/1080p.mp4",
    "720p": "//ssplayer/source/quality/720p.mp4",
    "480p": "//ssplayer/source/quality/480p.mp4",
    "360p": "//ssplayer/source/quality/360p.mp4",
    "240p": "//ssplayer/source/quality/240p.mp4",
    "144p": "//ssplayer/source/quality/144p.mp4"
  }
});

quality eklentimiz ile videolarınızın kalitelerine göre kullanıcılara sunabilirsiniz. Bu sayede kullanıcılarınız internet hızlarına göre en iyi kaliteyi videolarınızı donma sorunu olmadan rahatça izleyebilirler. Kullanımı basittir ve yukarıdaki gibidir.

default anahtarı ile SSPlayer ilk çalıştığında varsayılan kalite değerini seçebilirsiniz.

6-) Video Öncesi Reklam

$("#ssvideo").ssplayer({
  promo: {
	type: "pre",
	src: "//ssplayer/source/promo/promo.mp4",
	href: "http://ssplayer.emreokay.net/",
	after: "play",
	time: 5
  }
});

Video öncesi reklam sayesinde ortaklarınızın ürünlerini video biçiminde kullanıcılarınıza gösterebilirsiniz. İçindeki tüm değerler girilmesi zorunlu değerlerdir.

type: “pre” değerinin girilmesi zorunludur.

src: Reklam videonuzun adresini girmeniz gerekli.

href: Reklam videonuza tıklanıldığında gidilecek adresi yazmalısınız.

after: “play” veya “pause” değerini alır. Reklam video bittikten sonra asıl videonuzun oynamsını veya durmasını belirtir.

time: Reklam videonuzun kaç saniye sonra geçilebileceğini belirtir. Sayı değeri girmelisiniz.

7-) Video İçi Reklamlar

$("#ssvideo").ssplayer({
advertising: {
	sila: {
		type: "image",
		format: "728x90",
		src: "//ssplayer/advertising/sila.png",
		href: "http://silagencoglu.com/tr/event/",
		time: 10,
	},
	
	uzmancevap: {
		type: "image",
		format: "728x90",
		src: "//ssplayer/advertising/uzmancevap.png",
		href: "http://uzmancevap.org/",
		time: 30,
	},
	
	thy: {
		type: "image",
		format: "728x90",
		src: "//ssplayer/advertising/thy.png",
		href: "http://thy.com/",
		time: 50,
	},
	
	wmaraci: {
		type: "image",
		format: "728x90",
		src: "//ssplayer/advertising/wmaraci.png",
		href: "http://wmaraci.com/",
		time: 70,
	},
	
	turhost: {
		type: "image",
		format: "468x60",
		src: "//ssplayer/advertising/turhost.png",
		href: "http://turhost.com/",
		time: 90,
	},
	
	tamindir: {
		type: "image",
		format: "468x60",
		src: "//ssplayer/advertising/tamindir.png",
		href: "http://tamindir.com/",
		time: 110,
	},
	
	adsense: {
		type: "flash",
		format: "320x50",
		code: '<img src="//ssplayer/advertising/sila.png"/>',
		time: 130,
	}
}
});

advertising eklentisi sayesinde videolarınıza reklamlar ekleyebilirsiniz. İsterseniz resimli reklamlar isterseniz de flash içerikli(genellikle adsense) reklamlar ekleyebilirsiniz. Kullanımı yukarıdaki kodlardaki gibidir.

Eğer resimli reklamlar kullanacaksanız şu şekilde:

$("#ssvideo").ssplayer({
	advertising: {
		image_ads: { // Anahtar değeridir. İstediğiniz değeri verebilirsiniz.
			type: "image", // Reklam tipinin resim olduğu belirtir.
			format: "728x90", // Reklam formatını gösterir. 728x90, 468x60 ve 320x50 değerlerini alabilir.
			src: "//ssplayer/advertising/image.png|jpg|gif|svg", // Resim adresini buraya girmelisiniz.
			href: "http://ssplayer.emreokay.net/", // Reklama tıklanıldığında gidilecek adresi girmelisiniz.
			time: 10, // Reklamın kaçıncı saniyede çıkacağını girmelisiniz.
		}
});

Eğer flash reklamlar kullanacaksanız şu şekilde:

$("#ssvideo").ssplayer({
	advertising: {
		flash_ads: { // Anahtar değeridir. İstediğiniz değeri verebilirsiniz.
			type: "flash", // Reklam tipinin resim olduğu belirtir.
			format: "728x90", // Reklam formatını gösterir. 728x90, 468x60 ve 320x50 değerlerini alabilir.
			code: 'adsense kodunuz buraya yazabilirsiniz', // flash kodlarınızı buraya girmelisiniz.
			time: 10, // Reklamın kaçıncı saniyede çıkacağını girmelisiniz.
		}
});

kullanabilirsiniz.

😎 Altyazılar

$("#ssvideo").ssplayer({
	subtitle: {
		default: "off", // tr or en etc.
		tr: {
			label: "Türkçe",
			src: "//ssplayer/subtitle/tr/subtitle.srt"
		},
		en: {
			label: "English",
			src: "//ssplayer/subtitle/en/subtitle.srt"
		}
	}
});

subtitle eklentimiz default ve sizin belirlediğiniz lisan anahtarlarından oluşur. default anahtarı off ve sizin belirlediğiniz lisan anahtarlarından oluşur. Lisan anahtarları ise label ve src anahtarlarından oluşur. label ekrana altyazının ismini ismini yazdırır. src ise altyazı dosyanızın adresini belirtir. Ancak dikkat etmeniz gereken husus altyazı dosyalarınız başka sunucularda değil kendi sunucunuzda barındırılmalıdır. Ve link yapısı da yukarıdaki gibi olmalıdır.

9-) Logo

$("#ssvideo").ssplayer({
  logo: {
    title: "Emre OKAY",
    src: "//ssplayer/logo/logo.png|jpg|gif|svg",
    href: "http://ssplayer.emreokay.net",
    target: "blank", // blank or top
    position: "top-right", // top-right or top-left or bottom-left or bottom-right
    shape: "circle" // circle or square
  }
});

title Logonun üzerine gelindiğinde tooltip olarak açılan yazının içeriğidir.

src Logo resminin gerçek adresidir.

href Logoya tıklanıldığında gidilecek adresi belirler.

target Logoya tıklanıldığında gidilecek adresin aynı pencerede mi farklı pencerede mi açılacağını belirtir. Aynı bencere için “top” farklı pencere için “blank” değeri girilmelidir.

position Logonun ekranın nerede duracağını gösterir. Örnek kullanımı yukarıdaki gibidir.

shape Logonun kare olması için “square”, daire olması için “circle” değeri verilmelidir.

10-) Video Oynatma Hızı

$("#ssvideo").ssplayer({
  speed: true
});

Kullanıcının video oynatma hızını seçebilmesini sağlar. Kullanımı basittir ve yukarıdaki gibidir.

11-) Sürekli Tekrarlama

$("#ssvideo").ssplayer({
  infinite: "on" // Açık olması için on, kapalı olması için off
});

Bazen bazı videoları tekrar tekrar izlemek isteyebiliriz. Bu gibi durumlarda hiçbir işlem yapmadan videonun sürekli tekrarlamasını sağlamak SSPlayer’da çok basit. Kullanımı da yukarıdaki gibidir.

12-) Ek Açıklamalar

$("#ssvideo").ssplayer({
  annotations: "on" // Açık olması için on, kapalı olması için off değeri girilmelidir.
});

Video içi reklamların ve logo eklentilerinin ekranda gösterilip gösterilmeyeceğini belirtir. Kullanımı basittir ve yukarıdaki gibidir.

13-) Sosyal Medyada Paylaş

$("#ssvideo").ssplayer({
  share: true
});

Videonun bulunduğu sayfayı sosyal medyada paylaşılmasını sağlar. SSPlayer’da videoları Whatsapp’ta paylaşmakta mümkün.

14-) Ses Ayarı

$("#ssvideo").ssplayer({
  volume: 48 // 0 ile 100 arasında değer alır.
});

volume anahtarı sayesinde videonun başlangıçtaki ses ayarını oluşturabilirsiniz. 0 ile 100 arasında değer alır.

15-) Whatsapp

$("#ssvideo").ssplayer({
  share: true,
  whatsapp: "Whatsapp'ta görünmesini istediğiniz başlık"
});

whatsapp anahtarı sayesinde videolarınız Whatsapp’ta paylaşıldığında gösterilecek olan başlığı belirtir.

16-) Otomatik Başlatma

$("#ssvideo").ssplayer({
  autoplay: true
});

Videolarınızın sayfa yüklendiğinde otomatik olarak başlamasını sağlar. Kullanımı yukarıdaki gibidir.

17-) Iframe

$("#ssvideo").ssplayer({
  iframe: true
});

iframe anahtarı sayesinde videolarınızın embed kodlarının paylaşımında SSPlayer’ın sayfanın tüm genişliğini ve yüksekliğini kaplamasını sağlarsınız. Kullanımı yukarıdaki gibidir.

 

Şuan olarak sitede paylaşılan özellikler bunlar. Zaten bu özellikler oldukça fazla ve yeterli. Tekrardan Emre Okay abimize teşekkürlerimizi sunuyoruz. Bu nimeti bize Ücretsiz olarak sunan abimize bir KAHVE ISMARLAmak farzdır.

SSPlayer orjinal site: http://ssplayer.emreokay.net/