docHelp
download 
Şikayet Transkript
Help
Quark Player
Döküman Versiyonu
Versiyon
Tarih
Açıklama
Düzenleyen
2.0
22.04.2013
İlk versiyon
Ertuğrul Yıldırım
2.1
30.05.2013
Autobitrate ve
Overlay açıklamaları
eklendi
Ertuğrul Yıldırım
3.0
07.10.2013
Iframe Kullanımı
Ertuğrul Yıldırım
İçindekiler
Quark Player
Döküman Versiyonu
İçindekiler
Hakkında
Kullanım
Konfigürasyon
Hakkında
Quark Player’in başlıca özellikleri,
1. Medya Desteği: Player hem Widevine hem de OSMF medya türlerini destekler. Bu türlere
HLS dahildir.
2. Görünüm desteği: Player görünümü isteğe bağlı değiştirilebilir.
3. Esnek tasarım: Player onu kapsayan html elemanının ölçülerine bağlı olarak gerçek
zamanlı boyut değiştirebilir. Kısaca responsive’dir.
4. VAST desteği: Player VAST 2.0 standartlarında reklam gösterebilir.
5. Anket desteği: Medyanet’in sağladığı alt yapı üzerinden player, video önünde anket
gösterebilir.
6. Auto Bitrate: Player istemci bant genişliğine bağlı olarak, destekleyen formatlarda farklı
bitrate’ler arasında otomatik geçiş yapabilir.
7. Dil desteği: Player aynı medyaya ait birden fazla dili tek bir arayüzde toplayabilir.
8. Altyazı desteği: Player TTML formatındaki altyazıları destekler.
9. HeartBeat: Player istenilen aralıklarda video durumunu loglayabilir.
Kullanım
Örnek bir kullanımı aşağıda görebilirsiniz,
http://quark.dogannet.tv/player/sample.htm
<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="tr">
<head>
<title>Quark Player v3.0</title>
<meta httpequiv="contenttype" content="text/html; charset=utf8"/>
<meta httpequiv="pragma" content="nocache"/>
<meta httpequiv="expires" content="1"/>
<meta httpequiv="cachecontrol" content="nocache"/>
<! Quark Player v3.0 >
<script type="text/javascript"
src="http://quark.dogannet.tv/scripts/api.js"></script>
</head>
<body class="index">
<! Player Container >
<div id="playercontainer" style="width:640px; height:360px"></div>
<! Player Initialize >
<script type="text/javascript">
window.onload = function(){
var player = new quark.player();
player.setup({
media: {
preview:
'http://quark.dogannet.tv/player/samples/preview.jpg',
controller: 'osmf',
live: false,
path: 'http://quark.dogannet.tv/player/samples/video.mp4'
},
watermark: {
path:
'http://quark.dogannet.tv/player/samples/watermark.png',
position: 'bottomright'
}
});
}
</script>
</body>
</html>
öncelikle http://quark.dogannet.tv/scripts/api.js adresindeki scripti sayfanın head’ine
yerleştiriyoruz. Ardından id’si playercontainer olan (yada sizin tarafınızdan belirlenmiş bir başka
id’li) bir div yaratıyoruz..
Son olarak sayfa yüklendiğinde yani window.onload olduğunda quark.player’dan yeni player
türetip, bu player’i konfigüre ediyoruz.
Konfigürasyon parametrelerine ilişkin açıklamalar aşağıda yer verilmiştir:
Konfigürasyon
Değişken
Öntanımlı
Açıklama
player{ … }
Tip
object
prefix
player
playercontainer, playerembed ve
string
playererror container’larına ait prefix.
sayfadaki olası çakışmaları engellemek için
değiştirilebilir.
express
source/expr
essInstall.s
wf
expressInstall.swf'in yolu
string
source
source/play
er.swf
player.swf’in yolu
string
skin
source/skin.
swf
skin.swf’in yolu
string
width
640
player genişliği
int
height
360
player yüksekliği
int
panel
false
test amaçlı player parametrelerinin
değiştirilebildiği panelin görünürlüğü.
bool
debug
false
debug loglarının görünürlüğü. öncesinde
panelin görünür yapılması gerekiyor.
bool
autoplay
true
video başlangıçta oynatılsın mı?
bool
autobitrate
true
video bitrate’ler arasında otomatik geçiş
yapsın mı?
bool
smoothing
true
video görüntüsü iyileştirilsin mi? düşük
işlemcili client’lar için kapatılabilir.
bool
controls
true
video kontrollerinin yer aldığı bar
görüntülensin mi?
bool
volume
50
video için ön tanımlı ses seviyesi. 0 ila 100 int
arasında bir değer alır.
scale
letterbox
video nasıl boyutlandırılsın? alabildiği
değerler;
string
letterbox: görüntü en boy oranı korunarak
çevçeveye sığdırılır.
stretch: görüntü çevçeveye sığması için
çekiştirilir.
exactfit: görüntü boyutları değiştirilmez,
yalnızca ortalanır.
bufferTime
8
medyanın kaç saniye süresince buffer
edileceğini belirtir.
media{ … }
int
object
controller
osmf
video kontrolörü. alabildiği değerler:
widevine ve osmf. widevine medya
tipindeki videolar için widevine, HLS dahil
diğer formatlar için osmf verilmeli.
string
proxy
null
DRM sorgularının yapıldığı servisin URL'i.
widevine ile ilişkili.
string
live
false
medya canlı yayın tipinde mi?
bool
path
null
medya yolu. yalnızca path verilebileceği
gibi, path ve domain birlikte kullanılabilir.
örneğin;
string
media/sample.flv ya da
http://www.domain.com/media/sample.flv
gibi
yalnızca path veriliyorsa domain
defaultServiceUrl’de belirtilmeli.
defaultServiceUrl
null
medya yolu yalnızca path olarak verildiyse, string
domain bu parametrede verilir.
serviceUrl
null
player init olmadan önce bu parametrede string
belirtilen domaine istekte bulunur. eğer aynı
domain’nin kök dizininde bulunan
status.json’a ulaşabilirse defaultServiceUrl’i
serviceUrl ile değiştirir.
bu özellik dış sunucunun sağlığını kontrol
etmek için kullanılır. erişim mümkün
olmadığında defaultServiceUrl geçerli
olacaktır.
languages
null
dil seçenekleri. örnek kullanım;
object
{
‘Türkçe’: ‘http://domain.com/tr.flv,
‘İngilizce’: ‘http://domain.com/en.flv
}
eğer tanımlı bir dil dizisi varsa, path
tanımlanmak zorunda değil. başlangıçta ilk
sıradaki seçenek oynatılacaktır.
subtitles
null
altyazı seçenekleri. örnek kullanım;
object
{
‘Türkçe’: ‘http://domain.com/tr.xml’,
‘İngilizce’: ‘http://domain.com/en.xml’
}
not: player yalnızca TTML formatındaki alt
yazıları destekler.
preview
null
video başlamadan önce görünen preview
imaj’ın yolu. absolute yada relative olarak
verilebilir.
watermark{ ... }
path
string
object
null
Watermark yolu. Watermark JPG, GIF ya
da PNG tipinde olabilir. Transparan
kullanılabilir.
string
position
topleft
Watermark pozisyonu. topleft, topright,
bottomleft, bottomright değerlerini alabilir.
overlay{ ... }
string
object
path
null
Kayan yazı ve diğer işler için kullanılacak
harici overlay.swf’sinin yolu.
position
bottom
Overlay pozisyonu. top, bottom değerlerini string
alabilir.
advert{ … }
string
object
display
false
reklam görüntülensin mi?
bool
overlayDuration
15
overlay tipindeki reklamların ekrana çıkış
için bekleme süresi. saniye cinsinden.
int
overlayShowDuration
overlay tipindeki reklamların ekranda kalış int
süresi. saniye cinsinden.
skipShowDuration
0
reklamı geç butonunun ekrana çıkış için
bekleme süresi. saniye cinsinden.
int
skipDisplay
true
reklamı geç butonu görüntülensin mi?
bool
countdownDisplay
true
gerisayım görüntülensin mi?
bool
marks
{
0: 2,
15: 4,
45: 5,
90: 6,
120: 8
}
midroll tipindeki reklamlar için video
süresine bağlı olarak kaç adet reklam
gösterileceğini tanımlayan dizi.
object
preroll
null
video başlamadan önce görüntülenecek
reklamın yolu. VAST tipinde.
string
midroll
null
video aralarında görüntülenecek reklamın
yolu. VAST tipinde.
string
postroll
null
video bittikten sonra görüntülenecek
reklamın yolu. VAST tipinde.
string
pauseroll
null
video durdurulduğunda, videonun üstünde string
banner olarak görüntülenecek reklamın
yolu. VAST tipinde.
ön tanımlı olarak 015 arası 2, 1545 arası
4, 4590 arası 5, 90120 arası 6, 120 ve
üstü dakikalardaki videolar için 8 adet
midroll reklam gösterilecektir.
overlay
null
video devam ederken, videonun üstünde
banner olarak görüntülenecek reklamın
yolu. VAST tipinde.
survey{ … }
string
object
display
false
bool
path
null
anket swf'sinin yolu. örneğin;
http://ad.ekolay.net/survey/survey.swf
string
domain
null
anket domaini. örneğin;
netd.com
string
heartbeat{ ... }
object
interval
0
video durumunu gösterir heartbeat logu
kaç milisaniye bir basılsın? değer 0 ise
heartbeat logu basılmaz.
int
callback
null
heartbeat logonu karşılayacak fonksiyon. function
player fonksiyona aşağıdaki bilgileri içeren
bir nesne geçirir;
mediaController: medya kontrolörü
mediaPath: medya yolu
playTime: toplam oynatım süresi
totalTime: toplam süre
currentTime: geçerli süre
currentBitrate: geçerli bitrate
playPct: oynatma yüzdesi
örnek kullanım;
function(info){
console.log(info);
}
gemius{ … }
null
object
identifier
null
yayıncı id’si. gemius tarafından verilir.
int
materialIdentifier
null
medya id’si. her medya için benzersiz
olmalıdır.
int
comscore{ … }
c2
object
null
yayıncı id’si. comscore tarafından verilir.
int
