Onlarca sebepten ötürü tasarımcılar web sayfalarında Video Player (oynatıcı) kullanmakta. Hazırlanmış onlarca Flash, HTML ve JavaScript ile hazırlanmış onlarca video oynatıcı kullanılmak için beklemekte.

Liste bu kadar genişken Adobewordpress olarak detaylı bir liste hazırlamaya karar verdik. Hangi oynatıcı web sayfanız için daha uygun? Seçimi size bırakıyoruz.

Video Player (Oynatıcılar)

jPlayer

JavaScript – HTML5 ile tasarlanmış Müzik ve Video oynatıcısıdır. Oynatıcı jQuery eklentisiyle güçlendirilmiş, çoklu oynatımlarda geçiş hızları arttırılmıştır. Yapımcılar jQuery kullanımı ile birlikte oynatıcının çok daha kaliteli bir hale geldiğini belirtiyor.

Adrese git »
Flowplayer

Açık kaynak kodlu, hazırladığımız listenin en popüler Video Playerlarından birisi. Videolar için istatistik,alt yazı, slow motion, cuepoint, tam ekran ve retina ready desteği sağlıyor.

Adrese git »

JW Player

Kullanışlı ve esnek bir flash video player. Adobe Flash Player’ın üstesinden gelebileceği tüm formatları desteklemekte. Başlıca formatlar : FLV, H.264, MP4, MP3, AAC, JPG, PNG ve GIF. Ayrıca RMTP ve HTTP streaming ve çalma listesi formatlarını da desteklemekte.

Adrese git »

SublimeVideo – HTML5 Video Player

Yapımcılar, HTML5 teknolojisiyle hazırladıkları oynatıcıları hakkında fazlasıyla iddialılar. Bütün tarayıcı ve mobil cihazlarda çalışan video player güzel bir tercih olabilir.

Adrese git »

GDD FLVPlayer

GDD FLVPlayer, web tabanlı ve ücretsiz kullanılabilen FLV/Mp4 oynatıcısıdır. Basit bir arayüze sahip uygulama kanal logonuzu gösterebiliyor.

Adrese git »

MC Media Player

Flash tabanlı medya oynatıcısı embedding video, müzik ve fotoğraf desteği sağlıyor. Altair ve Classic (artık geliştirilmiyor) isimli iki arayüzü bulunan oynatıcı gayet iyi bir seçenek gibi. Setup tool sayesinde kullanım kolaylığı sağlıyor.

Adrese git »

VISCOM Web Player

Web sayfanızda ücretsiz video yayını yapmanızı sağlayan bir diğer uygulama. Tekli ve çoklu yayın desteği sunuyor. Ayrıca klasik video paylaşım sitesi dışarısında uzaktan eğitim gibi hizmetleri de sağlayabiliyor.

FLV streaming, XML çalma listesi, video thumbnail aracı için aç/kapa ayarı, full screen imkanı, kod bilgisi bilmeden düzenlenebilecek basitlikte arayüz ve onlarca skin (tema) desteğiyle birlikte geliyor.

Adrese git »

Anarchy Media Player

Anarchy, gücünü basitliğinden alan bir oynatıcı. Mp3, flv ve Quicktime Movie destekliyor. Ayrıca direkt link üzerinden yayın yapabiliyor.

Adrese git »

SS4UPlayer

Esnek bir tasarıma sahip video player streaming desteğiyle çalışıyor. Windows ve Linux platformlarının (sunucu tipi) hepsinde çalışıyor. FLV, 264, MP4, MP3 formatlarını destekliyor. Ayrıca XML tabanlı arayüzlerden tema düzenlenebiliyor. (Yazı rengi, boyutu, tipi, transparanlık seviyesi, scrubber rengi ve boyutu ve diğerleri..)

Ayrıca kanal logosu kullanmanızı ve XML destekli çalma listesi hazırlamanızı destekliyor.

Adrese git »

Video JS

Listedeki en popüler HTML5 Video oynatıcılardan birisi olan Video JS güncel tarayıcıların çoğunda sorunsuz olarak çalışmaktadır. CSS ile düzenlebilen arayüzü Video JS’yi tüm Flash oynatıcılardan üstün kılıyor. Deneyin deriz.

Adrese git »

Video for Everybody

Listenin en basit arayüzüne sahip HTML5 video playerı. Üzerine uzun uzun konuşmaya gerek yok. HTML5 ile gelen <video> elemanı ile (klasik yoldan) eklenebilen bu uygulama WordPress kullanıcıları için basit ama güzel bir tercih olabilir.

Adrese git »

OSM Player

HTML5 ve jQuery desteği ile hazırlanmış oynatıcının en büyük özelliği Vimeo ve YouTube videolarını tanıyabiliyor.

Adrese git »

Acorn Media Player

Listemizin en gelişmiş ve kullanışlı Video Playerlarından olan Acorn, jQuery ve HTML5 ile geliştirilmiş. Video canvas tekniği kullanan oynatıcı CSS ile özgün bir tasarıma bürünebilmekte.

Adrese git »

Projekktor Video Player

Projekktor açık kaynak kodlu video (aynı zamanda müzik) oynatıcısıdır. JavaScript ile hazırlanmış ve GPLv3 ile korunmaktadır. Full screen, çalma listesi ve kanal , kalite seçimi , kolay kurulum ve tasarım desteği sağlamakta.

Adrese git »

WP Media Player

WordPress için eklenti şeklinde hazırlanan oynatıcı, kendi sunucunuzdaki videoları oynatmanızı sağlıyor. Ayrıca gayet detaylı bir eklenti yönetim paneline sahip. Kurulum detaylarına aşağıdaki adrese git linkini izleyerek erişebilirsiniz.

Adrese git »

Kaynak:Adobewordpress.com

Devamını Oku...

Bu işlem için CSS koduna ihtiyacımız olmayacak. Çünkü bütün tasarım ve renklendirme araçları JavaScript kodlarının içerisinde barınmakta.

İlk olarak <head></head> tagleri arasına aşağıdaki kodu ekleyerek jQuery dosyamızı çağıralım.

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

Şimdi oyunu yayınlayacak div koduyla başlayacağız. Buradan sonraki tüm kodlar <body></body> içerisine eklenecek. İşte ihtiyacımız olan tek satırlık HTML kod :

<div id="snake-oyunu"></div>

Şimdi divimizin altına JavaScript kodlarımızı ekleyelim.

<script>

window.onload = function() {

var canvas = document.createElement('canvas');

var ctx = canvas.getContext('2d');

var score = 0; // Başlangıç Skoru

var level = 0; // Başlangıç Seviyesi

var direction = 0; // Giriş Yönü

var snake = new Array(3);

var active = true;

var speed = 500; // Başlangıç Hızı

var arena = new Array(20);

for (var i = 0; i < arena.length; i++) {

arena[i] = new Array(20);

}

// Boyutlandırmalar

canvas.width = 204;

canvas.height = 224;

$('#snake-oyunu').append(canvas);

arena = generateSnake(arena);

arena = generateFood(arena);

getGame();

window.addEventListener('keydown', function(e) {

if (e.keyCode === 38 && direction !== 3) {

direction = 2; // Yukarı

} else if (e.keyCode === 40 && direction !== 2) {

direction = 3; // Aşağı

} else if (e.keyCode === 37 && direction !== 0) {

direction = 1; // Sol

} else if (e.keyCode === 39 && direction !== 1) {

direction = 0; // Sağ

}

});

function getGame() {

ctx.clearRect(0, 0, canvas.width, canvas.height);

for (var i = snake.length - 1; i >= 0; i--) {

if (i === 0) {

switch(direction) {

case 0: // Sağ

snake[0] = { x: snake[0].x + 1, y: snake[0].y }

break;

case 1: // Sol

snake[0] = { x: snake[0].x - 1, y: snake[0].y }

break;

case 2: // Yukarı

snake[0] = { x: snake[0].x, y: snake[0].y - 1 }

break;

case 3: // Aşağı

snake[0] = { x: snake[0].x, y: snake[0].y + 1 }

break;

}

if (snake[0].x < 0 ||

snake[0].x >= 20 ||

snake[0].y < 0 ||

snake[0].y >= 20) {

showGameOver();

return;

}

if (arena[snake[0].x][snake[0].y] === 1) {

score += 10; // Bir yemek kaç puan?

arena = generateFood(arena);

snake.push({ x: snake[snake.length - 1].x, y: snake[snake.length - 1].y });

arena[snake[snake.length - 1].x][snake[snake.length - 1].y] = 2;

if ((score % 100) == 0) {

level += 1;

}

} else if (arena[snake[0].x][snake[0].y] === 2) {

showGameOver();

return;

}

arena[snake[0].x][snake[0].y] = 2;

} else {

if (i === (snake.length - 1)) {

arena[snake[i].x][snake[i].y] = null;

}

snake[i] = { x: snake[i - 1].x, y: snake[i - 1].y };

arena[snake[i].x][snake[i].y] = 2;

}

}

getArena();

for (var x = 0; x < arena.length; x++) {

for (var y = 0; y < arena[0].length; y++) {

if (arena[x][y] === 1) {

ctx.fillStyle = '#20abbc';

ctx.fillRect(x * 10, y * 10 + 20, 10, 10);

} else if (arena[x][y] === 2) {

ctx.fillStyle = '#bc202d';

ctx.fillRect(x * 10, y * 10 + 20, 10, 10);

}

}

}

if (active) {

setTimeout(getGame, speed - (level * 50));

}

}

function getArena() {

ctx.lineWidth = 2;

ctx.strokeStyle = '#000';

ctx.strokeRect(2, 20, canvas.width - 4, canvas.height - 24);

ctx.rect(3,21,canvas.width - 6,canvas.height - 26);

ctx.fillStyle = '#fff';

ctx.fill();

ctx.fillStyle = '#bc202d';

ctx.font = '12px Helvetica';

ctx.fillText('Puan : ' + score + ' - Seviye : ' + level, 2, 12);

}

function generateFood(arena) {

var rndX = Math.round(Math.random() * 19);

var rndY = Math.round(Math.random() * 19);

while (arena[rndX][rndY] === 2) {

rndX = Math.round(Math.random() * 19);

rndY = Math.round(Math.random() * 19);

}

arena[rndX][rndY] = 1;

return arena;

}

function generateSnake(arena) {

var rndX = Math.round(Math.random() * 19);

var rndY = Math.round(Math.random() * 19);

while ((rndX - snake.length) < 0) {

rndX = Math.round(Math.random() * 19);

}

for (var i = 0; i < snake.length; i++) {

snake[i] = { x: rndX - i, y: rndY };

arena[rndX - i][rndY] = 2;

}

return arena;

}

function showGameOver() {

ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = '#bc202d';

ctx.font = '16px Helvetica';

ctx.fillText('Oyun bitti!', ((canvas.width / 2) - (ctx.measureText('Oyun bitti!').width / 2)), 50);

ctx.font = '12px Helvetica';

ctx.fillText('Puanın : ' + score, ((canvas.width / 2) - (ctx.measureText('Puanın : ' + score).width / 2)), 70);

}

};

</script>

Ve yılan oyunumuz hazır.

 Kapanış

Bu makalenin bizler için önemi jQuery kategorimizin ilk yayını olması. CSS3 ve HTML5 içerisine sıkıştıramayacağımız jQuery kodları artık daha kolay erişilebilir olacak.

Oyuna gelirsek; Nokia serisindeki klasik yılan oyununa fazlasıyla benziyor. İşin güzel kısmı JS kodlarıyla oynarak oyunu hızlandırabiliyoruz. Çünkü 200 piksellik kutu içerisinde yılanın bir uçtan diğer uça gitmesini beklemek bazen can sıkabiliyor.

Hepinize iyi oyunlar.

Devamını Oku...