Önemli MB110 / MB120 istemci aygıtlarının yapılandırması

Merhabalar aşağıda anlatım vestel smart tvlerin hotel modunda kendi portal ve ip tv özelliklerinin açılmasını anlatmaktadır.


Bu belgede MB110 / MB120 istemci aygıtlarının yapılandırması açıklanmaktadır. Aşağıdaki bölümlerde; başlangıç MB110 / MB120 Uygulama geliştirme için IPTV cihazları açıklanacaktır.

• Otel TV Menüsü: Otel Modu ve OSD Devre Dışı Bırakma parametrelerinin amacı ve operasyonel kullanımı açıklanacaktır.
• Başlangıç Parametrelerini Ayarlama: Bu bölümde yapılandırma parametrelerini ayarlama ayrıntılı olarak verilecektir.
• Kanal Listesi Hazırlama: Bu bölümde kanal listesi oluşturma ve istemcileri kanal listesi ile güncelleme açıklanmaktadır.

Otel TV Menüsü
Şekil 1, “ Menu + 7935 ” tuş kombinasyonu ile açılabilen “ HotelTV Menüsünü ” göstermektedir . Daha fazla bilgi için lütfen sayfasını ziyaret edin . Bu menü altında “ Otel Modu ” ve “ OSD Devre Dışı Bırakma ” parametrelerine dikkat edilmelidir.

Otel Modu: Son kullanıcı için Görsel Çözüm özelliklerini etkinleştirir / devre dışı bırakır. Otel Modu AÇIK olduğunda, istemcinin tarayıcısı uygulamalarınızı açar ve çalıştırır. Aksi takdirde, tarayıcı kapatılırsa ve HTML Uygulamaları çalıştırılmazsa. Uygulama geliştirmeyle ilgili ayrıntılara geçmeden önce “ Otel Modu ” nun “ AÇIK ” olduğundan emin olun .

OSD Devre Dışı: TV'nizin Menü ekranını görüntülemeyi etkinleştirir / devre dışı bırakır, değişkenler aşağıda açıklanmıştır.

• • Kurulum Menülerini Devre Dışı Bırakma: Son kullanıcı uzaktan kumandadaki “ Menü ” düğmesine basarsa , ekran TV menüsünün sınırlı bir sürümünü görüntüler.
  • Tüm Menüleri Devre Dışı Bırak: Son kullanıcı uzaktan kumanda üzerindeki “ Menü ” düğmesine basarsa menü öğesi görüntülenmez . (Bu ayarla ekran yalnızca HotelTV menüsünü görüntüleyebilir.)
  • Kapalı: Son kullanıcı uzaktan kumandada “ Menü ” düğmesine basarsa , tüm menü öğeleri görünecektir.
    

    Not: Ayrıca, USB bellenim güncellemesinden sonra, OSD Menüleri varsayılan olarak gösterilmez, etkinleştirmek için lütfen Şekil 1'de gösterildiği gibi “OSD Devre Dışı Bırak” ı “Kurulum Menülerini Devre Dışı Bırak” olarak değiştirin.

    Genişletmek için tıkla ...

Şekil 1: HotelTV Menü Ayarları
Başlangıç Parametrelerini Ayarlama VS istemcileri, başlangıçta belirli bir “starturl” den bir HTML Uygulaması almak üzere tasarlanmıştır. “Starturl, kanal listesi URL'si, NTP sunucusu, saat dilimi ve FTP parametreleri” gibi gerekli yapılandırma öğeleri, istemci cihazlarda bulunan belirli yapılandırma dosyalarıyla ayarlanabilir.

• Starturl: Starturl, istemci açıldığında açılacak olan web sayfasıdır.
• Kanal listesi URL'si: Kanal listesi URL'si, kanal listesine sahip XML yapılandırma dosyasıdır.
• NTP Sunucusu: İstemci, tarih-saat bilgilerini bu sunucudan alır.
• Saat Dilimi: Saat dilimini tanımlayan değer.
• FTP Parametreleri: İstemciye yapılan FTP yapılandırmalarınızı açıklar.

Aşağıdaki bölümlerde tüm yapılandırma yöntemleri açıklanmaktadır.

• Telnet üzerinden yapılandırma: Telnet kullanarak başlangıç parametrelerini yapılandırın
• ALC ile yapılandırma : ALC kullanarak başlangıç parametrelerini yapılandırın
• USB ile yapılandırma : USB kullanarak başlangıç parametrelerini yapılandırın
• Bootcaster ile yapılandırma : Bootcaster kullanarak başlangıç parametrelerini yapılandırın
• DHCP ile yapılandırma: DHCP kullanarak başlangıç parametrelerini yapılandırın

Telnet üzerinden yapılandırma
MB110 ve MB120 istemcilerinin Linux komutlarını çalıştırmak için kullanılabilecek telnet arabirimi vardır. Telnet giriş bilgileri:

Tablo 1: Telnet Giriş Kimlik Bilgileri

Aşağıdaki parametreler için yapılandırma dosyaları aşağıda Tablo 2'de listelenmiştir ve “ vi ” düzenleyicisi bu amaçla kullanılabilir.

Tablo 2: Başlangıç Parametreleri

ALC üzerinden yapılandırma
MB110 ve MB120 VS istemcileri, Gelişmiş LAN Komutları olarak adlandırılan ve çeşitli komutları uzaktan bağlayıp gönderebileceğimiz kullanışlı bir arayüze sahiptir. ALC arabirimine TCP 1986 soketini açarak erişilebilir ve onu bağlamak için Putty veya benzeri programları kullanabilirsiniz. Şekil 2, VS istemcisini ALC üzerinden bağlamak için örnek bir Macun yapılandırmasını göstermektedir. Komutların tamamı belgesinde listelenmiştir.

Şekil 2: TV'yi ALC üzerinden bağlamak için örnek Macun Yapılandırması

Not: SETSTARTURL komutunun burada farklı davranışları vardır, bu komut bir "zorunlu_starturl.txt" oluşturur. İlk yeniden başlatmadan sonra, bu zorunlu starturl otomatik olarak “starturl.txt” dosyasını oluşturacaktır.

Genişletmek için tıkla ...

Tablo 3: Başlangıç Parametreleri Komutları

USB üzerinden yapılandırma
MB110 ve MB120 model VS istemcileri genellikle alan kullanımı için başka bir seçeneğe sahiptir. USB Flash Sürücüde bulunan yapılandırma dosyalarını içe aktararak gerekli parametreleri ayarlamak mümkündür. Aşağıda listelenen bu dosyaları içerebilir.




Şekil 3: USB ile Manuel Yapılandırma
USB Flash Sürücüyü taktıktan sonra, “ Servis Menüsü ” nü açmak için “ Menü + 4725 ” e basın (çalışmıyorsa, “ OSD Devre Dışı Bırakma ” “ Kurulum Menülerini Devre Dışı Bırak ” veya “ KAPALI ” olarak değiştirilir ve ardından “ USB Yapılandırmaları ” nı seçin . Bu işlem, yapılandırma dosyalarını istemci cihaza içe aktaracaktır. İstemcinin efektleri alması için yeniden başlatma gerekir.

Bootcaster ile yapılandırma
Bootcaster, UDP Çok Noktaya Yayın akışı ile önemli yapılandırmaları ayarlamak için VS istemcileri için yararlı bir uygulamadır. Bootcaster uygulaması “udp: //239.254.0.241: 22222” çok noktaya yayın adresi üzerinden çalışıyor. Bu özelliği kullanabilmek için ağ anahtarlarında UDP Çok Noktaya Yayın ve IGMP gözetleme etkinleştirilmelidir. Bootcaster etkinleştirildiğinde, aynı LAN'daki tüm VS istemcileri önyüklemede bu UDP adresini dinleyecektir. yazılımına destek web sitesinden erişilebilir. Örnek Bootcaster yapılandırması aşağıdadır:

# Bootcaster configuration file
VERSION=3
START_URL=
CHANNEL_LIST_URL=
NTP_SERVER=192.168.0.15
TIMEZONE=3600

DHCP üzerinden yapılandırma
Bazı durumlarda hedef ağ, IGMP gözetlemenin mümkün olmadığı (Kablosuz kurulumlar gibi) veya DHCP'nin Bootcaster'a göre tercihen bir çözüm olduğu sınırlamalara sahiptir. “ Nis Alan Adı ” ve “ NTP Sunucuları ” DHCP seçeneklerini kullanarak VS istemcilerine bu temel parametreleri öğretebiliriz. Aşağıdaki metinler arasında yalnızca bir boşluk olmalıdır: Nis Alan Adı => STARTURL CHANNELLISTURL TIMEZONE
Ntp Sunucuları => NTP

Şekil 4: DHCP aracılığıyla Otomatik YapılandırmaKanal Listesi Hazırlama
VS istemcileri DVB-IP, DVB-S, DVB-T, DVB-C ve Analog kanalları gösterebilir. Her farklı giriş için kanal konfigürasyonu ve ayrıca uydu konfigürasyonları ve sıraları kanal listesi dosyasında ayarlanabilir. Dosya uzantısı XML olmalıdır. Aşağıda her modülasyon için örnek kanal listesi öğeleri. DVB-IP:



<dvb: ServiceDiscovery Sürüm = "0" xmlns: dvb = "urn: dvb: ipisdns: 2006" xmlns: mpeg7 = "urn: tva: mpeg7: 2005" xmlns: tva = "urn: tva: meta veri: 2005" >
< dvb: BroadcastDiscovery ChannelListVersion = "1" DomainName = "ard.de" Sürüm = "1" >
<dvb: SatelliteSettings AntennaType = "antenna_diseqc" >
<dvb: Uydu Kimliği = "1" Adı = "Türksat (42.0E)" / >
<dvb: Uydu Kimliği = "2" Ad = "Yok " />
<dvb: Uydu Kimliği = " 3 " Ad ="Yok" />
<dvb: Uydu Kimliği = "4" Ad = "Yok" />
</ dvb: SatelliteSettings
>
<dvb: ServiceList>
<dvb: SingleService> <dvb: ServiceLocation Network = "DVB-IP" >
< dvb: IPMulticastAddress Adresi = "239.0.0.1" Bağlantı Noktası = "1234" />
</
dvb: ServiceLocation > <dvb: TextualIdentifier ServiceName = "Yol TV" />
<dvb: LogicalChannelNumber ChannelNumber = "4" />
<dvb: DVBTriplet OrigNetId = "0 " ServiceId = " 1 " TSId = " 0 " />
<dvb: SI ServiceVMX = "0" ServiceType = "1" ServiceLocked = "0" ServiceUniqueId = "DYd4J6Zjwp" >
</ dvb: SI>
</ dvb: SingleService>
</ dvb:
ServiceList > </ dvb: BroadcastDiscovery>
< / dVB: ServiceDiscovery>

DVB-S:

<dvb: ServiceDiscovery Sürüm = "0" xmlns: dvb = "urn: dvb: ipisdns: 2006" xmlns: mpeg7 = "urn: tva: mpeg7: 2005" xmlns: tva = "urn: tva: meta veri: 2005" >
< dvb: BroadcastDiscovery ChannelListVersion = "1" DomainName = "ard.de" Sürüm = "1" >
<dvb: SatelliteSettings AntennaType = "antenna_diseqc" >
<dvb: Uydu Kimliği = "1" Adı = "Türksat (42.0E)" / >
<dvb: Uydu Kimliği = "2" Ad = "Yok " />
<dvb: Uydu Kimliği = " 3 " Ad ="Yok" />
<dvb: Uydu Kimliği = "4" Ad = "Yok" />
</ dvb: SatelliteSettings
>
<dvb: ServiceList>
<dvb: SingleService> <dvb: ServiceLocation Network = "DVB-S" >
< dvb: TunerConfiguration DiSEqC = "1" Frekans = "11054000" Polarizasyon = "V" SymbolRate = "30000" />
</
dvb: ServiceLocation > <dvb: TextualIdentifier ServiceName = "TRT1" />
<dvb:LogicalChannelNumber ChannelNumber = "27" />
<dvb: DVBTriplet OrigNetId = "1070" ServiceID = "10600" tsid = "31001" />
<DVB: SI ServiceEncrypted = "0" ServiceLocked = "0" HizmetTürü = "1" ServiceVMX = "0" >
<DVB: ContentGenre> 124,8
</ DVB: SI >
</ dvb: SingleService
> </ dvb: ServiceList >
</ dvb: BroadcastDiscovery>
<

DVB-T

<dvb: ServiceDiscovery Sürüm = "0" xmlns: dvb = "urn: dvb: ipisdns: 2006" xmlns: mpeg7 = "urn: tva: mpeg7: 2005" xmlns: tva = "urn: tva: meta veri: 2005" >
< dvb: BroadcastDiscovery ChannelListVersion = "1" DomainName = "ard.de" Sürüm = "1" >
<dvb: SatelliteSettings AntennaType = "antenna_diseqc" >
<dvb: Uydu Kimliği = "1" Adı = "Türksat (42.0E)" / >
<dvb: Uydu Kimliği = "2" Ad = "Yok " />
<dvb: Uydu Kimliği = " 3 " Ad ="Yok" />
<dvb: Uydu Kimliği = "4" Ad = "Yok" />
</ dvb: SatelliteSettings
>
<dvb: ServiceList>
<dvb: SingleService> <dvb: ServiceLocation Network = "DVB-T2" >
< dVB: TunerConfiguration Frekansı = "810000" />
</ dVB: ServiceLocation>
<dVB: TextualIdentifier ServiceName = "TRT1" />
<dVB: LogicalChannelNumber CHANNELNUMBER = "25" />
<dVB: DVBTriplet OrigNetId = "0" ServiceID = "1 " TSId = " 2 " />
<dvb: SI ServiceEncrypted ="0" ServiceLocked = "0" ServiceType = "1" ServiceVMX = "0" >
<dvb: ContentGenre> 124,8
</ dvb: SI>
</ dvb: SingleService>
</ dvb:
ServiceList > </ dvb: BroadcastDiscovery >
</ dvb: ServiceDiscovery>

DVB-Cı

<! - hilite.me kullanılarak oluşturulan HTML -> <div style = "background: #ffffff; taşma: otomatik; genişlik: otomatik; sınır: düz gri; sınır genişliği: .1em .1em .1em .8em; dolgu : .2em .6em; " > <ön stil = "kenar boşluğu: 0; satır yüksekliği:% 125" > <açıklık stili = "renk: # 007700" > & lt; dvb: ServiceDiscovery </span> <span style = "color: # 0000CC" > Sürüm = </span> <span style = "background-color: # fff0f0" > & quot; 0 & quot; </span> <span style = "color: style = "arka plan rengi: # fff0f0" > & quot; urn: dvb: ipisdns: 2006 & quot; </span> <span style = "color: # 0000CC" > xmlns: mpeg7 = </span> <span style = "background-color: # fff0f0" > & quot; urn: tva: mpeg7: 2005 & quot; </span> <span style = "color: # 0000CC" > xmlns: tva = </span> <span style = "background-color: # fff0f0" > & quot; urn: tva: meta veri: 2005 & quot; </ span> < span style = "color: # 007700" > & gt; </ span>
<span style = "color: # 007700" > & lt; dvb: BroadcastDiscovery </span> <span style = "color: # 0000CC" > ChannelListVersion = </span> <span style = "background-color: # fff0f0" > & quot; 1 & quot; </span> <span style = "color: # 0000CC" > DomainName = </span> <span style = "background-color: # fff0f0" > & quot; ard.de & quot; </span> <span style = "color: "arka plan rengi: # fff0f0" > & quot; 1 & quot; </span> <span style = "color: # 007700" > & gt; </span>
<span style = "color: # 007700" > & lt; dvb: SatelliteSettings </span> <span style = "color: # 0000CC" > AntennaType = </span> <span style = "background-color: # fff0f0" > & quot; antenna_diseqc & quot; </span> <span style = "color: # 007700" > & gt;
ve lt; dvb: Uydu </span> <span style = "color: # 0000CC" > ID = </span> <span style = "background-color: # fff0f0" > & quot; 1 & quot; </span> <span style = "color: # 0000CC" > Name = </span> <span style = "background-color: # fff0f0" > & quot; Türksat (42.0E) & quot; </span> <span style = "color: # 007700" > / & gt; </span>
< dvb: Uydu </span> <span style = "color: # 0000CC" > ID = </span> <span style = "background-color: # fff0f0" > & quot; 2 & quot; </span> <span style = "color: # 0000CC" > Name = </span> <span style = "background-color: # fff0f0" > & quot; Yok & quot; </span> <span style = "color: # 007700" > / & gt; </span>
<span style = " <span style = "color: # 0000CC" > ID = </span> <span style = "arka plan rengi: # fff0f0" > & quot; 3 & quot; </span> <span style = "color: # 0000CC" > Name = </span> <span style = "background-color: # fff0f0" > & quot; Yok & quot; </span> <span style = "color: # 007700" > / & gt; </span>
<span style = "color: # 007700" > & lt; dvb: Uydu </span> <span style ="color: # 0000CC" > ID = </span> <span style = "background-color: # fff0f0" > & quot; 4 & quot; </span> <span style = "color: # 0000CC" > Name = </span> <span style = "background-color: # fff0f0" > & quot; Yok & quot; </span> <span style = "color: # 007700" > / & gt; </span>
<span style = "color: # 007700" > & lt; / DVB: SatelliteSettings & gt; </span>
<span style ="renk: # 007700" > & lt; dvb: Hizmet Listesi & gt; </span>
<span style = "color: # 007700" > & lt; dvb: SingleService & gt; </span>
<span style = "color: # 007700" > & lt; dvb: ServiceLocation </span> <span style = "color: # 0000CC" > Ağ = </span> <span style = "arka plan rengi: # fff0f0" > & quot; Analog & quot; </span> <span style = "color:
"renk: # 007700" > & lt; dvb: TunerConfiguration </span> <span style = "color: # 0000CC" > Sıklık = </span> <span style = "background-color: # fff0f0" > & quot; 818000 & quot; </span> <span style = "color: # 0000CC" > TVSystem = </span> <span style = "background-color: # fff0f0" > & quot; BG & quot; </span> <span style = "color: # 007700" > / & gt; </span>
<span style ="renk: # 007700" > & lt; / dvb: ServiceLocation & gt; </span>
<span style = "color: # 007700" > & lt; dvb: TextualIdentifier </span> <span style = "color: # 0000CC" > ServiceName = </span> <span style = "background-color: # fff0f0" > & quot; TRT1 & quot; </span> <span style = "color: # 007700" > / & gt; </span>
<span style = "color: # 007700" > & lt; dvb: LogicalChannelNumber </span> <span style = "color: # 0000CC" > ChannelNumber = </span> <span style = "background-color: # fff0f0" > & quot; 26 & quot; </span> <span style = "color: # 007700" > / & gt; </span>
<span style = "color: # 007700" > & lt; dvb: SI </span> <span style = "color: # 0000CC" > ServiceEncrypted = </span> <span style = "background-color: # fff0f0" > ve quot; 0 & quot; </span> <span style = "color: # 0000CC" > ServiceLocked = </span> <span style = "background-color: # fff0f0" > & quot; 0 & quot; </span> <span style = "color: # 0000CC" > ServiceType = </span> <span style = "background-color: # fff0f0" > & quot; 1 & quot; </span> <span style = "color: # 0000CC" > ServiceVMX = </span> <span style = "background-color: # fff0f0" > & quot; 0 & quot; </span> <span style ="renk: # 007700" > & gt; </span>
<span style = "color: # 007700" > & lt; dvb: ContentGenre & gt; </span> 124,8
<span style = "color: # 007700" > & lt; / dvb: SI & gt; </span>
<span style = "color: # 007700" > & lt; / dvb: SingleService & gt; </span>
<span style = "color: # 007700" > & lt; / dvb: Hizmet Listesi & gt; </ span>
/ dvb: BroadcastDiscovery & gt; </span>
<span style = "color: # 007700" > & lt; / dvb: ServiceDiscovery & gt; </span>
</pre> </div>

Analog

<dvb: ServiceDiscovery Sürüm = "0" xmlns: dvb = "urn: dvb: ipisdns: 2006" xmlns: mpeg7 = "urn: tva: mpeg7: 2005" xmlns: tva = "urn: tva: meta veri: 2005" >
< dvb: BroadcastDiscovery ChannelListVersion = "1" DomainName = "ard.de" Sürüm = "1" >
<dvb: SatelliteSettings AntennaType = "antenna_diseqc" >
<dvb: Uydu Kimliği = "1" Adı = "Türksat (42.0E)" / >
<dvb: Uydu Kimliği = "2" Ad = "Yok " />
<dvb: Uydu Kimliği = " 3 " Ad ="None" />
<dvb: Satellite ID = "4" Name = "None" />
</ dvb: SatelliteSettings
>
<dvb: ServiceList>
<dvb: SingleService> <dvb: ServiceLocation Network = "Analog" >
<dvb: TunerConfiguration Frequency = "818000" TVSystem = "BG" />
</ dvb:
ServiceLocation > <dvb: TextualIdentifier ServiceName = "TRT1" />
<dvb: LogicalChannelNumber ChannelNumber = "26" />
<dvb: SI ServiceEncrypted = "0 " ServiceLocked = " 0 " ServiceType = " 1 " ServiceVMX = "0" >
<dvb: ContentGenre> 124,8
</ dvb: SI>
</ dvb: SingleService>
</ dvb:
ServiceList > </ dvb: BroadcastDiscovery>
</ dvb: ServiceDiscovery>

için lütfen tıklayınız .

Kanal Listesini USB ile İçe Aktarma
MB110 ve MB120 istemcileri “ithal etmek tercih edilebilir bir yöntem var channelTable.xml ” bir URL tanımlayan olmadan doğrudan müşteriye “ hoteltv_config.xml ”. Bu, bir kanal listesini başka bir istemciden dışa aktarıp yeni istemciye kopyaladığınızda faydalı olabilir. Kanal tablolarını içe ve dışa aktarmak da mümkündür. Her ikisi de “ HotelTV Menu ” de bulunmaktadır. Kanal tablosu USB'ye dışa aktarıldığında adı farklı olabilir, bu yüzden tekrar içe aktaramayabilirsiniz. Kanal tablosu XML'nin tam adı olmalıdır: “ channelTable.xml ”. USB flash sürücü kök klasöründe bulunmalıdır.

Şekil 5: Kanal Listesi İşlemleri

Ziyaretçiler için gizlenmiş link,görmek için Giriş yap veya üye ol.

|
Bu belge, İstemci Cihaz yapılandırmasına temel bir giriş sağlar ve HTML, CSS ve JavaScript kullanarak ;

• Temel Menü Uygulaması: Uzak tuşların nasıl kullanılacağını ve sayfalarda ve kanallarda nasıl gezinileceğini gösteren bir menü uygulaması.
• Temel Video Oynatıcı: Video akışı için kullanılan video oynatıcı.
• Temel Kanal Listesi Uygulaması: Kanal listesinin nasıl yükleneceğini ve kanalların istemci cihazlara nasıl aktarılacağını gösteren bir uygulamadır.

İstemci cihazlarının “Otel Modu” adlı özel bir modu vardır ve etkinleştirildiğinde, istemci cihazlar uyandıktan sonra belirli bir URL'yi alır ve o sayfada gezinir. Bu özel sayfaya “starturl” denir ve herhangi bir web uygulamasını çalıştırmak için istemcide bir “starturl” yapılandırılmalıdır. Her bir müşteri için yıldız URL'sini ve “Otel Modu” nu yapılandırmak için gerekli ayrıntıları belgesinde bulabilirsiniz.
URL'yi bir sunucu (IIS, Apache vb.) Üzerinden sunmanız gerekir. Sunucu tarafında “conntest” adlı bir klasör bulunmalı ve bu klasörde “ 2kb.txt ” adlı bir dosya bulunmalıdır (Şekil 1). Bu dosya, istemci cihazın verilen URL'nin geçerli olup olmadığını kontrol etmesine yardımcı olur. İçeriğinden bağımsız olarak, dosya 2 KB boyutunda olmalıdır .

Şekil 1: 2kb.txt Dosyası
Yukarıda belirtildiği gibi, “starturl” yapılandırıldıktan sonra herhangi bir web uygulaması istemci cihazda çalışabilir. İstemci cihazlarda çalıştırabileceğiniz çok temel bir uygulama vardır ve bu belge bunları kapsayacaktır. İlk örnek uygulama Temel Menü Uygulaması olacaktır .
Temel Menü Uygulaması
Bu bölüm, hem CSS hem de JavaScript kullanarak temel menü uygulamasının nasıl oluşturulacağını açıklamaya çalışır. Bu menü uygulamasını oluşturarak uzaktan kumanda tuşlarını işleyebilir ve bu uygulama aracılığıyla gönderebilirsiniz. Bu, sayfaları ve kanalları kontrol etme ve üzerinde gezinme fırsatı verebilir.
Saf CSS Tabanlı Menü
TV'nin tarayıcısı, ok tuşlarıyla bağlantı etiketleri arasında gezinebilir. Takip edebileceğiniz yaklaşımlardan biridir. Bu örnekte dört bağlantı yazıp ok tuşlarını kullanarak dolaşıyoruz. CSS dosyasındaki “focus” sözde sınıfını kullanarak odaklanmış bağlantı stilini belirtmelisiniz. Odaklanmış bağlantı etiketlerini tanımlamanıza yardımcı olur. İşte basit örnek.
< Bir href = " # " > Bağlantı 1 </ a >
< a href =" # " > Bağlantı 2 </ a >
< a href =" # " > Bağlantı 3 </ a >
< a href =" # " > Bağlantı 4 </ a >

a
{
text-decoration : none ;
yazı tipi boyutu : 20 piksel ;
renk :;
}
a : odak
{
metin-dekorasyonu : yok ;
renk : Beyaz ;
yazı tipi boyutu : 30 piksel ;
}

Saf Javascript Tabanlı Menü
Aynı örneği JavaScript ile de yazabilirsiniz. DOM bağımlılıklarını azaltmak olabilir ve kendi anahtar işleyici yöntemlerinizi yazarak navigasyonu da özelleştirebilirsiniz. İşte JavaScript ile aynı sayfa.
< ! DOCTYPE html >
< html >
< head >
< meta http - equiv = " content-Type " content = " text / html; charset = utf-8 " / >
< script type = " text / javascript " src = " main.js " > < / script >
< link href = " main.css "stil sayfası " type = " text / css " / >
< title > Vestek Eğitimi < / title >
< / head >
< gövde >
< div id = " menü " > < / div >
< script >
vestek . boot ( ) ;
< / script >
< / body >
</ html>

vücut
{
arka plan : gri ;
}
#Menü
{
text - dekorasyon : yok ;
yazı tipi - boyut : 20 piksel ;
renk : Siyah ;
}
#menu . seçilmiş
{
metin - dekorasyon : yok ;
renk : Beyaz ;
yazı tipi - boyut : 30 piksel ;
}

var vestek = { } ;
vestek . menuContent = [ { " title " : " Bağlantı 1 " , " url " : " # " } , { " title " :
" Bağlantı 2 " , " url " : " # " } , { " title " : " Bağlantı 3 " url " : " # " } , { " title " :
" Bağlantı 4 " " url " : " # " } ] ;
Vestek . menuIndex = 0 ;
Vestek . önyükleme = fonksiyon ( ) { için ( endeks içinde Manisa'da . menuContent ) {
vestek . menuContent [ dizin
] . eleman = belge . createElement ( " div " ) ;
vestek . menuContent [ dizin ] . öğesi . innerHTML = vestek . menuContent [ dizin ] [ ' başlık ' ] ;
belge . getElementById ( " menü " ) . appendChild (
vestek . menuContent [dizin ] . eleman ) ;
}
vestek . menuContent [ bu . menuIndex ] . öğesi . className = " seçildi " ;
belge . onkeydown = işlev ( evt ) {
vestek . keyHandler ( evt . keyCode ) ;
} ;
} ;
vestek . keyHandler = işlev (code ) {
switch ( kod ) {
durum böyle . keyEnum . Tamam :
belge . konum . href =
vestek . menuContent [ bu . menuIndex ] [ ' url ' ] ;
kırmak ;
durum böyle . keyEnum . YUKARI :
eğer ( bu . MenuIndex ! = 0 ) {
vestek . menuContent [ bu . menuIndex ] . öğesi . className =
" " ;
bu . menuIndex - ;
vestek . menuContent [ bu . menuIndex ] . öğesi . className =
" seçildi " ;
}
ara ;
durum böyle . keyEnum . AŞAĞI :
eğer ( bu .menuIndex ! = bu . menuContent . uzunluk - 1 ) {
vestek . menuContent [ bu . menuIndex ] . öğesi . className =
" " ;
bu . menuIndex ++ ;
vestek . menuContent [ bu . menuIndex ] . öğesi . className =
" seçildi " ;
}
ara;
varsayılan:
sonu ;
}
} ;
vestek . keyEnum = {
OK : 13 ,
UP : 38 ,
AŞAĞI : 40 ,
SAĞ : 39 ,
SOL : 37 ,
YEŞİL : 404 ,
KIRMIZI : 403 ,
SARI : 405 ,
MAVİ : 406 ,
ARKA PLAN : 461 ,
Tamam : 13 ,
OYNAT : 415 ,
DURAKLAT : 19 ,
FW : 417 ,
BW : 412 ,
DUR : 413 ,
DİL : 312 ,
EV : 407 ,
YARDIM : 156 ,
GERİ : 461 ,
ALARM : 309 ,
SIFIR : 48 ,
TEK : 49 ,
İKİ : 50 ,
ÜÇ : 51 ,
DÖRT : 52 ,
BEŞ : 53 ,
ALTI : 54 ,
YEDİ : 55 ,
SEKİZ : 56 ,
DOKUZ : 57 ,
PROGUP : 310 ,
PROGDOWN : 311 ,
FRONTPROGUP : 314 ,
FRONTPROGDOWN : 313 ,
} ;

Menü içeriği sadece bir JSON. Ayrıca Ajax tabanlı uygulamalar yazma esnekliği sağlar. Tüm varsayılan anahtar değerleri enum olarak yazılır. Uygulama kodunuzdaki anahtar değerleri soyutlayabilirsiniz. Anahtar haritayı daha sonra bahsedilecek olan nesne API'sı ile de değiştirebilirsiniz. Anahtar eşleme hakkında daha fazla bilgiyi .
Menü uygulamasını oluşturduktan sonra, istemci cihazda video veya kanal akışı yapmak için kullanılan özel nesnelere bakacağız. Aşağıdaki uygulamalar bu nesnelerin her birini kullanacak ve bir uygulama oluşturmak için yöntemlerini kapsayacaktır. Önce “video / mp4” nesnesini kullanacağız ve bir Temel Video Oynatıcı oluşturacağız .
Temel Video Oynatıcı
Bu uygulamada “video / mp4” tipi bir nesne oluşturacağız ve nesneyi seçerek beyan edilen yöntemlerini kullanacağız . En yaygın yöntemleri kapsadıktan sonra, uygulamayı oluşturacağız ve bu uygulama ile video dosyalarını istemci cihazda oynatmak mümkün olacak.
Video nesnesini oluşturma
Yukarıda belirtildiği gibi, ilk önce uygulamayı oluşturmak için bir “video / mp4” nesnesi yaratmamız gerekir . Aşağıdaki örnek kodla nesneyi oluşturabiliriz ve yöntemlerini kullanmaya hazırız. Başvuru için ihtiyacımız olan yöntemler tek tek açıklanacak ve sonunda başvuru sonuçlandırılacaktır.
< object id = ' video ' type = ' video / mp4 ' > < / object >
var video = belgeleme . getElemenById ( " video " ) ;

Play () yöntemi
Aşağıda play () yönteminin örnek bir kullanımını görebilirsiniz. Öncelikle oynatmak istediğimiz verileri belirtiyoruz ve sadece yöntemi çağırıyoruz, veriler çalınıyor.
video . veri = " " ;
video . play ( ) ;

Bu örnekte, HTTP kaynağından bir MP4 dosyası oynatılmaktadır. Yöntem ayrıca birçok ağ protokolünü ve medya biçimini de destekler. Tam liste için lütfen teknik özellikler belgesini okuyun. İşte RTSP'den TS formatı için başka bir örnek.
video . veri = " rtsp: //192.168.1.2: 121 / aVideo.ts " ;
video . play ( ) ;

Stop () yöntemi
Aşağıda stop () yönteminin örnek bir kullanımını görebilirsiniz.
video . stop ( ) ;

Videoyu Duraklatma / Sürdürme
Videoyu duraklatmak ve devam ettirmek için örnek bir kullanım görebilirsiniz.
video . oyun ( 0 ) ; // video
videosunu duraklatma . oyun ( 1 ) ; // videoya devam et

Hızlı Yönlendirme
Hızlı yönlendirmenin örnek bir kullanımını görebilirsiniz.
video . oyun ( 2 ) ; // x2 kez ileri
video oynatır . oyun ( 4 ) ; // x4 kez ileri oynar

Hızlı Geri Sarma
Hızlı yönlendirmenin örnek bir kullanımını görebilirsiniz.
video . oyun ( - 2 ) ; //
videoyu x2 kez geri sarar . oyun ( - 4 ) ; // x4 kez geri sarar

onPlayStateChange () olayı
Oyuncu ayrıca durumunu korur. Nesneye olay işleyicileri belirtebilir ve oynatıcının durumunu görebilirsiniz.
video . onPlayStateChange = onPlayStateChangeHandler ;
var eventnames = [ ' durdu ' , ' çalıyor ' , ' duraklatıldı ' , ' bağlanıyor ' , ' arabellekleme ' , ' bitmiş ' , ' hata ' ] ;

// olay işleyicileri
işlevi onPlayStateChangeHandler ( )
{
var video = document . getElementById ( ' video ' ) ;
var durum = video . playState ;
var ename = ' Bilinmeyen olay durumu ' + durumu ;
if ( durum > = 0 || durum < etkinlik adları . uzunluk )
{
ename =etkinlik adları [ durum ] + ' ( ' + durum + ' ) ' ;
}

printEvent ( " Oynatma durumu değişti: " + ename ) ;
}

“PlayState” özelliği bize yeni bir durum verecektir. Artık oyuncu durumu değişiklikleri için herhangi bir işleyici yöntemi belirleyebilirsiniz. Oynatma durumu değerleri ve açıklamaları listelenmiştir .
Ayrıca onPlayStateChange olayına bir ilerleme çubuğu eklemek de mümkündür. İlerleme çubuğu bir bölüm ve bir zaman etiketinden oluşur. Video nesnesi 'oynatma' durumuna geçtiğinde, ilerleme çubuğu güncellenmelidir. Oynatılmadığında (arabelleğe alma, durdurma, tamamlanma vb.) İlerleme çubuğu artık güncellenmemelidir. İşte bir örnek.
// olay işleyicileri
işlev onPlayStateChangeHandler ( )
{
. . .
// Video durdurma güncelleme süresini oynuyor eğer
varsa ( durum =! 1 ) {
clearTimeout ( progressBarTimer ) ;
} else {
updateProgressBar ( ) ;
}
. . .
}

function updateProgressBar ( )
{
var total = new Süre ( video . playTime ) ;
var current = yeni Süre ( video . playPosition ) ;
if ( toplam . süre <= 0 ) { getiri ; } // bölme genişliğini ayarla // etiket metnini biçimlendir (buraya koymak için çok uzun) (current.duration + 1000> = total.duration) {
return ;
}

progressBarTimer = setTimeout ( updateProgressBar , 1000 ) ;
}

Anahtar Kullanımı
Bazı uygulamalar, belirli durumlarda belirli tuşların kısıtlanmasını gerektirebilir. Bu nedenle, zaman zaman anahtar kullanımı gerekebilir. Aşağıdaki örnek kod, bir tuş kullanım işlevini gösterir. Ek olarak tuş işlemesi ile herhangi bir tuşun çalışma durumunu değiştirebilirsiniz. Örnek Javascript kodu aşağıdadır.
function registerKeyEventListener ( ) {
belge . addEventListener ( " keydown " , işlev ( e ) {
if ( handleKeyCode ( e . keyCode ) ) {
e . preventDefault ( ) ;
}
} , yanlış ) ;
}
function handleKeyCode ( keycode ) {
if (isInFullscreenMode )
{
if ( keycode == 461 ) // uzaktan 5110 için geri tuşu
{
// pencereli moda
geçin switchToFullScreen ( false ) ;
}
gerçek dön ; // anahtar işlendi } return false ; // anahtar işlenmiyor }




Her yöntemin kullanımı yukarıda açıklanmıştır. Şimdi bunları birleştirip temel video uygulamamızı oluşturabiliriz. Anahtar yönetim olayının kullanıldığını ve her durum için (anahtar kodları olarak belirtilir) başka bir olay tetiklendiğini görebilirsiniz.
/ **
* Belgeye kısa sorgulama işlevi . getElementById rutini. * / var $ = işlev ( id ) { iade belgesi . getElementById ( id ) ; } ;



penceresi . onload = function ( )
{
belge . onkeydown = function ( evt ) { handleKeys ( evt ) ; }
$ ( " video " ) . onPlayStateChange = function ( ) {
var state = $ ( " video " ) . playState ;
log ( " onPlayStateChange ()" ) ;
log ( " durum: " + durum ) ;
}
initMp4 ( ) ;
log ( navigator . userAgent ) ;
}

/ **
* Video Nesnesi başlatma. Bu işlevi çağırmak için video nesnesi türünü type = 'video / mp4' olarak tanımlayın !!! * / function initMp4 ( url ) { try {
url = typeof url ! == ' tanımsız ' ? url : ' ' ; /*'rtsp://192.168.0.98/vod/music/01_1709_Bach.ts';*/ / * ' '; * / log ( " initMp4 ( "





+ url + " ); " , " yeşil " ) ;
$ ( " video " ) . stop ( ) ;
$ ( " video " ) . veri = url ;
$ ( " video " ) . oyun ( 1 ) ;
}
catch ( ex )
{
log ( " İstisna:" + Ex . Mesajı , " kırmızı " ) ;
}
}

/ **
* Değişkenler ve nesneler için genel bir günlük işlevi kullanılabilir. * maxDepth : Çocukların nesne derinliği için tanımlanmıştır. * dökümü : özyinelemeli nesne dökümü işlevi. Derinlik verirken dikkatli olun. Tarayıcıların işlev çağırma sınırı vardır. * Tuşlarını kullanarak günlük bölümü için yukarı ve aşağı kaydırabilirsiniz. * / işlev günlüğü ( mesaj , renk ) { var maxDepth = 0 ; var dökümü = işlev ( obj , ad , derinlik







, sekme ) {
if ( derinlik > maxDepth ) {
dönüş adı + ' - Maksimum derinlik
' ;
}

if ( typeof ( obj ) == ' nesne ' ) {
var child = null ;
var output = sekme + ad + '
' ;
sekme + = ' __ ' ;
for ( obj içindeki var öğesi ) {
child = obj [ item ] ; eğer ( typeof ( çocuk )
== ' nesne ' ) {
çıkış + = dökümü ( çocuk , et , derinlik + 1 , sekme ) ;
} else {
output + = sekme + madde + ' : ' + alt + '
' ;
}
}
}
Geri çıkışı ;
}

color = typeof color ! == ' tanımsız ' ? renk : ' gri ' ;
$ ( " günlükler " ) . tarzı . top = " 0px "
if ( typeof ( message ) == ' nesne ' )
{
$ ( " günlükler " ) . innerHTML = " " + döküm (iletisi , " Nesne: " , 0 , ' ' ) + "
" + $ ( " günlükler " ) . innerHTML ;
}
else
{
$ ( " günlükler " ) . innerHTML = " " + mesaj + "
" + $ ( " günlükler " ) . innerHTML ;
}
}

function handleKeys ( evt ) {
var evtobj = pencere . olay ? olay : evt ;
var unicode = evtobj . charCode ? evtobj . charCode : evtobj . keyCode ;
switch ( unicode ) {

case 13 : // ok: yeni içerik
günlüğünü test etmek için sayfa yenileme ( " Videoyu durdur! " , " yeşil " ) ;
$ ( " video " ) . stop ( ) ;
log ( " Sayfa yenilenecek !! " , " kırmızı " ) ;
setTimeout ( function ( ) { belge . konum . href = " ./" ; } , 300 ) ;
break ;
case 38 : // yukarı
// günlükleri yukarı kaydır div
var top = ( $ ( " logs " ) . Stil . Top . Replace ( / px / , ' ' ) * 1 ) ;
eğer ( üst ! = 0 ) $ ( " günlükleri " ) . stili. üst = ( üst + 60 ) + " px " ;
kırmak ;
case 40 : // down
// logları
aşağı kaydır div var top = ( $ ( " loglar " ) . stil . top . replace ( / px / , ' ' ) * 1 ) ;
$ ( " günlükler " ) . stil. üst = ( üst - 60 ) + " px " ;
kırmak ;
case 461 : // arka
günlük ( " Videoyu durdur! " , " yeşil " ) ;
$ ( " video " ) . stop ( ) ;
setTimeout ( function ( ) { belge . konum . href = " ../" ; } , 300 ) ;
break ;
case 49 :
log ( " geri sarma " , " green " ) ;
$ ( " video " ) . Play ( - 4 ) ;
break ;
case 50 :
log ( " duraklatma " , " yeşil " ) ;
$ ( " video ") . oyun ( 0 ) ;
kırmak ;
case 51 :
log ( " ileri " , " yeşil " ) ;
$ ( " video " ) . oyun ( 4 ) ;
kırmak ;
durum 52 :
log ( " durdur " , " yeşil " ) ;
$ ( " video " ). stop ( ) ;
kırmak ;
vaka 53 :
log ( " oynat " , " yeşil " ) ;
$ ( " video " ) . oyun ( 1 ) ;
kırmak ;
durum 54 :
log ( " atlama " , " yeşil " ) ;
$ ( " video " ) .seekVideo ( 1 * 60 ) ;
kırmak ;
vaka 55 :
var vid = belge . getElementById ( ' video ' ) ;
var total = yeni Süre ( vid . playTime ) ;
log ( " süre: " + toplam . süre , " yeşil " ) ;
kırmak ;

default:
log ( " Anahtar ' " + unicode + " ' basılı. " , " yeşil " ) ;
kırmak ;
}
}

İlk video nesnesi oluşturuldu ve video dosyalarını oynatmak için kullanıldı. Kanalları istemci cihaza yükleyebilir ve “video / yayın” adı verilen farklı bir nesneyle Temel Kanal Listesi Uygulaması oluşturabiliriz .
Temel Kanal Listesi Uygulaması
Önceki bölümde “video / mp4” nesnesini kullandık ve temel bir video oynatıcı oluşturduk. Bu bölümde, “video / yayın” nesnesini kullanacağız ve temel bir kanal listesi uygulaması oluşturacağız. “Video / yayın” nesnesini kullanarak DVB-IP, DVB-S, DVB-T, DVB-C ve Analog kanalları yayınlanacak şekilde yapılandırabilirsiniz.
“Starturl.txt” yapılandırmasına benzer şekilde, kanal listesi için bir URL yapılandırmak da mümkündür. URL geçerliyse, istemci cihaz kanal listesine ulaşabilir ve indirebilir. Her istemci için kanal listesi yapılandırma prosedürü belgesinde bulunabilir.
Kanal listesinin uygun bir biçime sahip olması gerektiğini lütfen unutmayın. Aşağıda bir örnek “ channellist.xml ” görebilirsiniz. Ayrıca kanal listesi oluşturma hakkında ayrıntılı bilgi belgesinde bulunabilir.
<dvb: ServiceDiscovery xmlns: dvb = "urn: dvb: ipisdns: 2006" xmlns: tva = "urn: tva: meta veri: 2005" xmlns: mpeg7 = "urn: tva: mpeg7: 2005" >
<dvb: BroadcastDiscovery EtkiAlanıAdı = "ard.de" Sürüm = "1" ChannelListVersion = "10381" >


<dvb: ServiceLocation Network = "DVB-S" >
<dvb: TunerConfiguration Frequency = "11778000" Polarizasyon = "V" SymbolRate = "27500" Uydu = "Astra 1 (19.2E)" DiSEqC = "4" />

<dvb: TextualIdentifier ServiceName = "CNN INTERNATIONAL" />
<dvb: LogicalChannelNumber ChannelNumber = "1" />
<dvb: DVBTriplet OrigNetId = "1" ServiceId = "28522" TSId = "1068" />
<dvb: SI ServiceVMX = "0" HizmetTürü = "1" ServiceLocked = "0" ServiceUniqueId = "hqfn5NNMZF" />


<dvb: ServiceLocation Network = "DVB-C" >
<dvb: TunerConfiguration Frequency = "474000" Modülasyon = "256QAM" SymbolRate = "6900" />

<dvb: TextualIdentifier ServiceName = "TRT1 HD" />
<dvb: LogicalChannelNumber ChannelNumber = "2" />
<dvb: DVBTriplet OrigNetId = "1070" ServiceId = "10601" TSId = "31001" />
<dvb: SI ServiceEncrypted = "0" HizmetTürü = "1" ServiceLocked = "0" ServiceVMX = "0" />


<dvb: ServiceLocation Network = "DVB-IP" >
<dvb: IPMulticastAddress Adresi = "239.0.0.1" Bağlantı Noktası = "1234" />

<dvb: TextualIdentifier ServiceName = "Yol TV" />
<dvb: LogicalChannelNumber ChannelNumber = "3" />
<dvb: DVBTriplet OrigNetId = "0" ServiceId = "1" TSId = "0" />
<dvb: SI ServiceVMX = "0" HizmetTürü = "1" ServiceLocked = "0" ServiceUniqueId = "DYd4J6Zjwp" />


<dvb: ServiceLocation Network = "DVB-IP" >
<dvb: IPMulticastAddress Adresi = "239.0.0.2" Bağlantı Noktası = "1234" />

<dvb: TextualIdentifier ServiceName = "IMC TV" />
<dvb: LogicalChannelNumber ChannelNumber = "4" />
<dvb: DVBTriplet OrigNetId = "0" ServiceId = "1" TSId = "0" />
<dvb: SI ServiceVMX = "0" HizmetTürü = "1" ServiceLocked = "0" ServiceUniqueId = "ummHgSwvuE" />





DVB-S ve DVB-IP kanallarıyla uygun biçimlendirilmiş bir kanal listesi görebilirsiniz. Kanal listesinin biçimi çok önemlidir, çünkü biçim geçerli değilse istemci cihaz kanal listesini indiremez.
Yayın nesnesi oluşturma
Kanal listesini uygun biçimde yapılandırıp geçerli URL'yi TV'ye verdikten sonra, “yayın nesnesini” çağırarak kanallara ulaşabilirsiniz. Şimdi nesne yaratıldı ve kullanıma hazır.
< object id = ' video ' type = ' video / yayın ' stil = ' konum: mutlak; sol: 0 piksel; üst: 0px; genişlik: 1280 piksel; yükseklik: 720px; ' > < / object >
var myChannel = belge . getElementById ( " video " )

Kanal Listesini Alma
Broasdcast nesnesini oluşturduktan sonra, artık yayın nesnesini kullanarak kanal listesini alabilirsiniz. Örnek kod aşağıdadır.
var myChannelList = belge . getElementById ( " video " ) . getChannelConfig ( ) . kanalListesi ;

Yukarıdaki kodu kullanarak kanalları bir dizi olarak alırsınız. Bu dizi, TV'nin sunulan kanal listesi URL'sinden aldığı kanalları içerir. Bir kanal nesnesi bir IP kanalı veya analog kanal olabilir.
Aşağıdaki bölümlerde, örnek kanal listesi uygulamasını oluşturmak için yayın nesnesi için en yaygın yöntemleri ele alacağız. Yayın nesnesi için tüm yöntemler hakkında daha fazla bilgi .
Belirli bir kanal ayarlama
Diziden bir kanal ayarlamak için setChannel () yöntemi kullanılmalıdır. Örnek kullanım aşağıdadır.
hükümsüz setChannel ( Kanal kanal , Boole özel oynatım , dize
contentAccessDescriptorURL , Integer ofset )

TV'nin kanal dizinizin ilk kanalını yayınlamasını istiyorsanız bir örnek aşağıdadır.
belge . getElementById ( " video " ) . setChannel ( myChannelList [ 0 ] , yanlış ) ;

Bir Kanala Bağlama
Yukarıdaki örnekte, kanal varlığını doğrudan API'ye verdiniz. Bunun yerine, bindToCurrentChannel () yöntemini kullanarak geçerli kanala doğrudan bağlanabilirsiniz. Örnek kullanım aşağıdadır.
belge . getElementById ( " video " ) . bindToCurrentChannel ( ) ;

Kanal yukarı / aşağı değiştirme
Bu bölümde kanal değiştirme yöntemlerini ele alacağız. Örnek kullanım aşağıdadır.
belge . getElementById ( " video " ) . nextChannel ( ) ; // kanal dizini
belgesini artır . getElementById ( " video " ) . prevChannel ( ) ; // kanal dizinini azalt

Tam Ekrana Geçme
Bu bölümde, tam ekranı ayarlamak için setFullScreen () yöntemini ele alacağız. Örnek kullanım aşağıdadır.
işlev switchToFullScreen ( full )
{
isInFullscreenMode = dolu ;
var video = belge . getElementById ( ' video ' ) ;

if ( full == true )
{
video . setFullScreen ( true ) ;
video . setAttribute ( " stil " , " konum: mutlak; sol: 0 piksel; üst: 0 piksel; genişlik: 1280 piksel; yükseklik: 720 piksel; " ) ;
}
Else
{
Video . setAttribute ( " stil " , " konum: mutlak ;? sol: 370 piksel; üst: 75 piksel; genişlik: 850 piksel; yükseklik: 478 piksel; " ) ;
videoElement. setFullScreen ( yanlış ) ;
}

Kanal listesi uygulamasını oluşturmak için gerekli yöntemler yukarıda açıklanmıştır. Artık bir kanal listesi uygulaması yapabilir ve istemci cihazında farklı türde kanallar çalıştırabiliriz.
< html >
< head >
< meta http - equiv = " content-Type " content = " text / html; charset = utf-8 " / >
< title > Vestek Simple Player < / title >
< / head >
< script dili = " javascript " >
/ *
Üyeler
* /
var channelList ;
var kanalIndex ;

/ *
Document.getElementById yordamını kısaltmak için bir sorgu işlevi.
* /
var $ = işlev ( id ) { iade belgesi . getElementById ( id ) ; } ;

penceresi . onload = function ( )
{
belge . onkeydown = function ( evt ) { handleKeys ( evt ) ; }
initBroadcast ( ) ;
}

/ *
Yayın başlatma: api ve play video nesnesinden
channelList alınıyor * /
function initBroadcast ( )
{
try
{
channelIndex = 0 ;

$ ( " video " ) . bindToCurrentChannel ( ) ;
$ ( " video " ) . setFullScreen ( yanlış ) ;

//log($('oipfcfg').configuration);
channelList = $ ( " video " ) . getChannelConfig ( ) . kanalListesi ;

log ( " --- kanal listesi --- " , " yeşil " ) ;
için ( var i = 0 ; i < Channellisti . uzunluğu ; i ++ )
günlük ( " kanal [ " + i + " ]: " + Channellisti [ i ] . isim ) ;
log ( " --- son kanal listesi --- " , "yeşil " ) ;

$ ( " video " ) . setChannel ( channelList [ channelIndex ] , yanlış ) ;
log ( channelList [ channelIndex ] ) ;
// log (Channellisti);
// $ ( "video") durağı ().;

}
catch ( e )
{
log ( " İstisna: " + e . mesaj , " kırmızı " ) ;
}
}

/ *
Değişkenler ve nesneler için genel bir günlük işlevi kullanılabilir.
maxDepth: Çocukların nesne derinliği için tanımlanmıştır.
dökümü: özyinelemeli nesne dökümü işlevi. Derinlik verirken dikkatli olun. Tarayıcıların işlev çağırma sınırı vardır.
Bölme tuşlarını kullanarak günlüğe kaydetmek için yukarı ve aşağı kaydırabilirsiniz.
* /
işlev günlüğü ( mesaj , renk )
{
var maxDepth = 0 ;
var dump = işlev ( obj , ad , derinlik , sekme ) {
if (derinlik > maxDepth ) {
dönüş adı + ' - Maksimum derinlik
' ;
}

if ( typeof ( obj ) == ' nesne ' ) {
var child = null ;
var output = sekme + ad + '
' ;
sekme + = ' __ ' ;
for ( obj içindeki var öğesi ) {
child = obj [ item ] ; eğer ( typeof (
Çocuk ) == ' nesne ' ) {
çıkış + = dökümü ( çocuk , et , derinlik + 1 , sekme ) ;
} else {
output + = sekme + madde + ' : ' + alt + '
' ;
}
}
}
Geri çıkışı ;
}

color = typeof color ! == ' tanımsız ' ? renk : ' gri ' ;
$ ( " günlükler " ) . tarzı . top = " 0px "
if ( typeof ( message ) == ' nesne ' )
{
$ ( " günlükler " ) . innerHTML = " " +döküm ( ileti , " Nesne: " , 0 , ' ' ) + "
" + $ ( " günlükler " ) . innerHTML ;
}
else
{
$ ( " günlükler " ) . innerHTML = " " + mesaj + "
" + $ ( " günlükler " ) . innerHTML ;
}
}

function handleKeys ( evt ) {
var evtobj = pencere . olay ? olay : evt ;
var unicode = evtobj . charCode ? evtobj . charCode : evtobj . keyCode ;

switch ( unicode ) {
case 13 : // ok: yeni içeriği test etmek için sayfa yenilemesi
deneyin
{
log ( " Videoyu durdur! " , " yeşil " ) ;
$ ( " video " ) . stop ( ) ;
log ( " Sayfa yenilenecek !! " , " kırmızı " ) ;
setTimeout ( function ( ) {belge . konum . href = " ./playBroadcast.html " ; } , 300 ) ;
}
Catch ( ex )
{
log ( " İstisna: " + ex . Mesajı , " kırmızı " ) ;
}
ara ;
case 37 : // left: önceki kanal
try
{
if ( channelIndex == 0 ) channelIndex= kanalListesi . uzunluk - 1 ;
başka kanalIndex - ;
log ( " channelList [ " + channelIndex + " ] = " + channelList [ channelIndex ] . ad , " yeşil " ) ;
$ ( " video " ) . setChannel ( channelList [ channelIndex ] ) ;

// veya sadece bu işlevi kullanabilirsiniz
// $ ("video"). prevChannel ();
}
Catch ( ex )
{
log ( " İstisna: " + ex . Mesajı , " kırmızı " ) ;
}
ara ;
case 39 : // right: sonraki kanal
try
{
if ( channelIndex == channelList . uzunluk - 1 ) channelIndex = 0 ;
else channelIndex++ ;
log ( " channelList [ " + channelIndex + " ] = " + channelList [ channelIndex ] . ad , " yeşil " ) ;
$ ( " video " ) . setChannel ( channelList [ channelIndex ] ) ;

// veya sadece bu işlevi kullanabilirsiniz
// $ ("video"). nextChannel ();
}
Catch ( ex )
{
log ( " İstisna: " + ex . Mesajı , " kırmızı " ) ;
}
ara ;
vaka 38 : // yukarı
// günlükleri yukarı kaydır div
var top = ( $ ( " günlükler " ) . stil . top . replace ( / px/ , ' ' ) * 1 ) ;
if ( üst ! = 0 ) $ ( " günlükler " ) . tarzı . üst = üst + 60 ;
kırmak ;
case 40 : // aşağı
// kaydırma aşağı günlükleri div
var üst = ( $ ( " günlükleri " ) . stili . Üst . değiştirin ( /px / , ' ' ) * 1 ) ;
$ ( " günlükler " ) . tarzı . üst = üst - 60 ;
kırmak ;
default:
log ( " Anahtar ' " + unicode + " ' basılı. " , " yeşil " ) ;
kırmak ;
}
}
< / script >

< gövde stili = " arka plan: gri; " >
< h2 stil = " konum: mutlak; sol: 15 piksel; üst: 0 piksel; kenar boşluğu üst: 15 piksel; yazı tipi boyutu: 1.6em; " >
< img src = " vestek. jpg " alt = " Vestek logosu " style = " dikey hizalama: orta " / > Basit Oynatıcı
< / h2 >
< div id = " logs_container "style = "konum: mutlak; left: 0px; En: x 55 piksel; Arka plan: siyah; taşma: hidden; Yükseklik: 540px; en: 310px; " >
< div id = " günlükler " stil = " konum: mutlak; En: 0px; Beyaz renk; " >
< / div >
< / div >
< tablo stili = " konum: mutlak; sol: 15 piksel; üst: 610 piksel; Z-endeksi: 100; en: 930px; " >
< tr >
< td stili = " genişlik: 30 piksel " >
<" ud_.png " >
< / td >
< td > Günlükleri kaydırmak için
yukarı ve aşağı ok tuşlarını kullanın .
< / td >
< / tr >
< tr >
< td stili = " genişlik: 30px " >
< img src = " rl_.png " >
< / td >
< td >.
< / td >
< / tr >
< tr >
< td style = " width: 30px " >
< img src = " ok_.png " >
< / td >
< td > Sayfayı yenilemek için " Tamam "
düğmesine basın .
< / td >
< / tr >
< / tablo >
<video_container " style = ' konum: mutlak; sol: 320px; üst: 55px; genişlik: 960px; yükseklik: 540px; ' >
< nesne kimliği = ' video ' type = ' video / yayın ' style = ' genişlik: 960px; yükseklik: 540px; ' > < / object >
< / div >
< object id = ' appmgr ' type = ' application / oipfApplicationManager 'stil =' konumu: mutlak; sol: 0 piksel; üst: 0px; genişlik: 0 piksel; yükseklik: 0px; ' > < / object >
< object id = ' oipfcfg ' type = ' application / oipfConfiguration ' style = ' konum: mutlak; sol: 0px; üst: 0px; genişlik: 0 piksel; yükseklik: 0px; ' > < / object >
< object id = ' NetRangeDevice ' type = ' application / debug-plugin ' > <>
< / gövde >
< / html >

Ziyaretçiler için gizlenmiş link,görmek için Giriş yap veya üye ol.

Bu bölümde, Bootcaster Server, Test Sayfaları, Visual Basic Komut Dosyaları ve Temel Zamanlama Örneği gibi yazılım ve test sayfalarını bulabilirsiniz. Öte yandan, MB230 Platformu için Örnek Kullanıcı Arayüzü kütüphanesi indirilebilir. Paketleri indirmek için lütfen aşağıdaki linklere tıklayın.