ApsaraVideo VOD:Gelişmiş özellikler

Oynatma kontrolü

Otomatik oynatma

• autoplay: true değerini yapılandırdıktan sonra otomatik oynatma etkinleşmeyebilir. Bunun nedeni, çoğu modern tarayıcının kullanıcı deneyimini bozmamak amacıyla sesli otomatik oynatmayı devre dışı bırakmasıdır.

  Örneğin, Chrome için Otomatik Oynatma ilkesi aşağıdaki gibidir:

  • Otomatik oynatmaya her zaman izin verilir ve ses kapatılır.

  • Aşağıdaki senaryolarda sesli otomatik oynatmaya izin verilir:

    • Kullanıcı web sayfasıyla tıklama veya dokunma gibi bir etkileşimde bulunmuştur.

    • Kullanıcının bir web sitesindeki video izleme davranışı belirli bir eşiği aşmıştır. Örneğin, kullanıcı sık sık bir web sitesinde video izliyorsa Chrome bu sitede sesli otomatik oynatmaya izin verir. Bu, Chrome'un dahili bir ilkesidir ve programlar tarafından müdahale edilemez.

    • Kullanıcı bir web sitesini mobil cihazında ana ekrana eklemiş veya masaüstü cihazında İlerici Web Uygulaması (PWA) yüklemiştir.

  Bu durumlarda şunları yapabilirsiniz:

  • Sesli otomatik oynatmayı sessize almak için mute:true değerini yapılandırın. Daha fazla bilgi için bkz. API işlemleri.

  • Önce sesli otomatik oynatmayı denemek ve başarısız olursa sessiz otomatik oynatmaya geçmek için autoplayPolicy: { fallbackToMute: true } değerini yapılandırın. Daha fazla bilgi için bkz. API işlemleri.

  WeChat tarayıcısı gibi bazı tarayıcıların sessiz otomatik oynatmayı da devre dışı bırakabileceğini unutmayın; bu nedenle otomatik oynatmanın her koşulda başarılı olacağını garanti edemeyiz.

  Tarayıcıların otomatik oynatma ilkeleri hakkında daha fazla bilgi için Chrome ve Safari belgelerine bakın.

Sürekli oynatma

Oynatıcının görünümünü ve bileşenlerini özelleştirme

ApsaraVideo Player SDK for Web, oynatıcı görünümünü (oynatıcı teması dahil) özelleştirmenize ve kontrol çubuğu ile hata kullanıcı arayüzü gibi bileşenlerin görüntülenip görüntülenmeyeceğini ve her bileşenin görüntüleme alanını belirtmenize olanak tanır.

• Kontrol çubuğunun kullanıcı arayüzü bileşenleri

  skinLayout özniteliğini ayarlayarak kullanıcı arayüzü bileşenlerinin görüntülenip görüntülenmeyeceğini ve her bileşenin görüntüleme alanını belirtebilirsiniz. Daha fazla bilgi için bkz. skinLayout yapılandırma.

  • ApsaraVideo Player SDK'nin varsayılan yapılandırmaları

    skinLayout:[
       {name: "bigPlayButton", align: "blabs", x: 30, y: 80},
        {name: "H5Loading", align: "cc"},
        {name: "errorDisplay", align: "tlabs", x: 0, y: 0},
        {name: "infoDisplay"},
        {name:"tooltip", align:"blabs",x: 0, y: 56},
        {name: "thumbnail"},
        {
          name: "controlBar", align: "blabs", x: 0, y: 0,
          children: [
            {name: "progress", align: "blabs", x: 0, y: 44},
            {name: "playButton", align: "tl", x: 15, y: 12},
            {name: "timeDisplay", align: "tl", x: 10, y: 7},
            {name: "fullScreenButton", align: "tr", x: 10, y: 12},
            {name:"subtitle", align:"tr",x:15, y:12},
            {name:"setting", align:"tr",x:15, y:12},
            {name: "volume", align: "tr", x: 5, y: 10}
          ]
        }
      ]

• Hata kullanıcı arayüzü

  ApsaraVideo Player SDK for Web varsayılan bir hata kullanıcı arayüzü sağlar. Aşağıdaki yöntemlerden birini kullanarak hata kullanıcı arayüzünü de özelleştirebilirsiniz. Daha fazla bilgi için bkz. HTML5 oynatıcı için hata kullanıcı arayüzünü özelleştirme.

  • Varsayılan hata kullanıcı arayüzünün CSS dosyasını değiştirme

    Varsayılan hata kullanıcı arayüzünü temel alarak hata kullanıcı arayüzünü özelleştirebilirsiniz. Arka plan rengini, yazı tipini ve konumu değiştirmek ve hata iletisinin görüntülenip görüntülenmeyeceğini belirtmek için CSS dosyasını değiştirebilirsiniz.

  • Yeni bir hata kullanıcı arayüzü tanımlama

    Yeni bir hata kullanıcı arayüzü tanımlamak için hata olaylarına abone olmanız gerekir.

• Oynatıcı temasını yapılandırma

  ApsaraVideo Player SDK for Web tarafından sağlanan kullanıcı arayüzü iş gereksinimlerinizi karşılamıyorsa CSS dosyasını değiştirerek oynatıcı temasını özelleştirebilirsiniz.

  Not

  Yapılandırmalar hakkında daha fazla bilgi için oynatıcının aliplayer-min.css CSS dosyasına bakın. Aşağıdaki örnek kod, büyük oynat düğmesinin nasıl yapılandırılacağını gösterir. Daha fazla bilgi için bkz. Oynatıcı temasını yapılandırma.

  .prism-player .prism-big-play-btn {
    width: 90px;
    height: 90px;
    background: url("//gw.alicdn.com/tps/TB1YuE3KFXXXXaAXFXXXXXXXXXX-256-512.png") no-repeat -2px -2px;
  }

Video küçük resmini özelleştirme

ApsaraVideo VOD'a yüklediğiniz her videonun bir küçük resmi vardır. ApsaraVideo VOD, küçük resmi değiştirmeniz için size birden çok yöntem sunar. Bir video yüklemeden önce küçük resim olarak bir görsel veya video anlık görüntüsü belirtebilirsiniz. Video yüklendikten sonra küçük resmi değiştirebilirsiniz. Video küçük resmini aşağıdaki yöntemlerden birini kullanarak özelleştirebilirsiniz:

• ApsaraVideo VOD konsolunda video küçük resmini yapılandırın. Daha fazla bilgi için bkz. Video küçük resmini ayarlama.

• Oynatıcının cover özniteliğini ayarlayarak video küçük resmini yapılandırın.

  var player = new Aliplayer({
   "id": "player-con",
   "source":"//player.alicdn.com/video/aliyunm****.mp4",
    "cover":"Thumbnail URL",
  },
   function () { } 
  );

Video anlık görüntüleri

ApsaraVideo Player SDK for Web V2.1.0 ve sonraki sürümleri, video oynatma sırasında anlık görüntü yakalamayı destekler. Çıktı formatı image veya jpeg olabilir. Bu özelliği açıkça etkinleştirmeniz gerekir. Döndürülen anlık görüntü verileri oynatma zaman damgasını, Base64 dizesini ve görselin ikili verilerini içerir.

Anlık görüntü özelliğini etkinleştirme

• Web oynatıcıda anlık görüntü özelliğini etkinleştirme

  Önemli

  Safari'de oynatılan Flash Video (FLV) videolarından anlık görüntü yakalayamazsınız. Anlık görüntü özelliğini etkinleştirseler bile anlık görüntü düğmesi görünmez. Canvas, web oynatıcı için anlık görüntü özelliğini sağlayan öğedir. Oynatma etki alanı için çapraz kaynak kaynak paylaşımına (CORS) izin veren bir üst bilgi eklemeniz gerekir. Daha fazla bilgi için bkz. CORS yapılandırma.

  skinLayout özniteliğine anlık görüntü kullanıcı arayüzü ayarlarını ekleyin. Örnek kod:

      skinLayout:[
      {name: "bigPlayButton", align: "blabs", x: 30, y: 80},
      {
        name: "H5Loading", align: "cc"
      },
      {name: "errorDisplay", align: "tlabs", x: 0, y: 0},
      {name: "infoDisplay"},
      {name:"tooltip", align:"blabs",x: 0, y: 56},
      {name: "thumbnail"},
      {
        name: "controlBar", align: "blabs", x: 0, y: 0,
        children: [
          {name: "progress", align: "blabs", x: 0, y: 44},
          {name: "playButton", align: "tl", x: 15, y: 12},
          {name: "timeDisplay", align: "tl", x: 10, y: 7},
          {name: "fullScreenButton", align: "tr", x: 10, y: 12},
          {name:"subtitle", align:"tr",x:15, y:12},
          {name:"setting", align:"tr",x:15, y:12},
          {name: "volume", align: "tr", x: 15, y: 10},
          {name: "snapshot", align: "tr", x: 5, y: 12},
        ]
      }
    ]

  Web oynatıcı için anlık görüntü özelliğini etkinleştirmek adına, anonim çapraz kaynak isteklerine izin vermek için crossOrigin değerini anonymous olarak ayarlamanız gerekir. Örnek kod:

    extraInfo:{
      crossOrigin:"anonymous"
    }

Anlık görüntü boyutunu ve kalitesini ayarlama

// Set the snapshot width to 300, height to 200, and quality to 0.9.
// The snapshot height and width are displayed in pixels. You can set the snapshot quality to a value ranging from 0 to 1. The default value is 1.
player.setSanpshotProperties(300,200,0.9)

snapshoted olayına abone olma

player.on("snapshoted", function(data) {
     console.log(data.paramData.time);
     console.log(data.paramData.base64);
     console.log(data.paramData.binary);
 });

Anlık görüntü filigranı

snapshotWatermark:{
    left:"100",
    top:"100",
    text:"test",
    font:"italic bold 48px SimSun",
    strokeColor:"red",
    fillColor:'green'
  }

const player = new Aliplayer({
  id: "player-con",
  disableSeek: true,
  source: "https://player.alicdn.com/video/aliyunmedia.mp4",
}, function (player) {
    console.log("The player is created");
  }
);

Uzun videolar için özellikler

HLS akışları için uyarlanabilir bit hızı akışı

Çoklu bit hızı akışını etkinleştirmek için source parametresini ana oynatma listesi URL'sine ve isVBR parametresini true değerine ayarlayın. Bu özellik, oynatıcının ağ koşullarına göre video kalite seviyeleri arasında otomatik olarak geçiş yapmasına olanak tanır. Kullanıcılar ayrıca kaliteyi manuel olarak değiştirebilir.

Oynatma URL'sini alma

Birden çok bit hızında bir videonun oynatma URL'sini alın: player._hls.levels[player._hls.currentLevel].

varplayer = newAliplayer({
 "id":"player-con",
 "source":"Multi-bitrate playback URL",
 "isVBR":true,
 },
 function () { } 
);

Oynatıcının ayarlar menüsünde, kullanıcıların video kalitesini değiştirmek için tıklayabileceği Auto(360) gibi bir Quality seçeneği görüntülenir.

Harici altyazıları yapılandırma

// Switch the subtitle language.
var lang = 'zh-Hans/en-US';
player._ccService.switch(lang);
player._ccService.updateUI(lang); // The API does not update the UI by default. You must call this method manually if needed.
// Enable subtitles.
var result = player._ccService.open();
player._ccService.updateUI(result.language);
// Disable subtitles.
player._ccService.close();
player._ccService.updateUI();

  .prism-cue > div:first-child,
  video::cue {
    font-size: 14px !important;
    color: #000 !important;
    background-color: rgba(255, 255, 255, .8) !important; /* Native subtitle rendering in iOS does not support the background color. */
  }

Birden çok ses parçası

ApsaraVideo Player SDK for Web için manuel yapılandırma gerekmez. Aşağıdaki şekil ses parçası ayarını göstermektedir.

Birden çok dil

ApsaraVideo Player SDK for Web varsayılan olarak Çince ve İngilizceyi destekler ve tarayıcının dil ayarlarına göre Çince ile İngilizce arasında otomatik olarak geçiş yapar. ApsaraVideo Player SDK for Web özel diller belirtmenize olanak tanır. ApsaraVideo Player SDK for Web, ApsaraVideo VOD'un kullanılabildiği birden çok bölgede video oynatmanıza olanak tanır. Güneydoğu Asya ve Avrupa bölgelerinde depolanan videoları video kimliklerini ve oynatma kimlik bilgilerini kullanarak oynatabilirsiniz.

language özniteliği için kullanım notları

var player = new Aliplayer({
    id: "player-con",
    source: "",
    width: "100%",
    height: "500px",
    autoplay: true,
    language: "en-us",
  }, function (player) {
    console.log("The player is created.");
  });

Kullanıcı arayüzü öğeleri İngilizce olan bir oynatıcı oluşturun

var player = new Aliplayer({
 "id": "player-con",
 "source": "",
 "language": "en-us" // zh-cn indicates Chinese. en-us indicates English. 
 },
 function (player) {}
);

Oynatıcı için özel bir dil belirtin

Çince ve İngilizce dışındaki dilleri desteklemeniz gerektiğinde özel dil özelliğini kullanabilirsiniz. Bunu yapmak için languageTexts özniteliğini kullanarak dil kaynaklarını belirtebilirsiniz. languageTexts özniteliği, language özniteliğinin değerinin anahtar olduğu ve JSON değerinin belirtilen dil için çevrilmiş kaynak içeriği olduğu bir nesne değişmez değeridir. Aşağıdaki kod bir örnek sağlar:

var player = new Aliplayer({
 "id": "player-con",
 "source": "",
 "language": "CustomLanguage",// Specify a language in the STRING type.
"languageTexts":{
    "CustomLanguage":{
        "Pause":"Pause"
        // Other parameters. For more information, visit https://player.alicdn.com/lang.json? spm=a2c4g.11186623.0.0.5a746515vnwUSi&file=lang.json
            }
        }
    },
    function (player) {} 
);

Birden çok bölgede depolanan video kaynaklarını oynatın

ApsaraVideo Player SDK for Web, Çin (Şanghay), Almanya (Frankfurt) ve Singapur bölgelerinde depolanan videoları oynatmanıza olanak tanır. Videoları video kimliklerini ve oynatma kimlik bilgilerini kullanarak veya Güvenlik Token Hizmeti'ni (STS) kullanarak oynatabilirsiniz. Oynatıcı bölge bilgilerini ayrıştırır ve ilgili bölgedeki videonun oynatma URL'sini alır.

• Video kimliklerine ve oynatma kimlik bilgilerine dayalı oynatma: Oynatıcı, videonun oynatma URL'sini almak için oynatma kimlik bilgisinden bölge bilgilerini ayrıştırır. Bu durumda yapılandırmalarda bölge belirtmeniz gerekmez.

• STS tabanlı oynatma: Videonun bölgesini belirtmek için region özelliğini kullanın. Varsayılan değer 'cn-shanghai''dir. Diğer geçerli değerler eu-central-1 ve ap-southeast-1 içerir. Örnek:

  var player = new Aliplayer({
      id: "player-con",
      width: "100%",
      height: "500px",
      autoplay: true,
      language: "en-us",
      vid : '1e067a2831b641db90d570b6480f****',
      accessKeyId: '',// The AccessKey ID that is generated when the temporary STS token is issued. 
      securityToken: '',// The temporary STS token. To generate an STS token, call the AssumeRole operation. 
      accessKeySecret: ''// The AccessKey ID that is generated when the temporary STS token is issued. 
      region:'eu-central-1',// The Germany (Frankfurt) region.
    }, function (player) {
      console.log("The player is created.");
    });

H.265 ve H.266 videolarını oynatma

Kullanım notları

• ApsaraVideo Player SDK for Web V2.14.0 veya sonraki sürümleri H.265 videolarının oynatılmasını destekler ve ApsaraVideo Player SDK for Web V2.20.2 veya sonraki sürümleri H.266 videolarının oynatılmasını destekler. H.265 videolarını oynatmak için lisans başvurusunda bulunmanız ve Web'de H.265 Videolarının Oynatılması katma değerli hizmetini satın almanız gerekir. Daha fazla bilgi için bkz. Lisansları yönetme.

• ApsaraVideo Player SDK for Web kullanarak oynatabileceğiniz H.265 ve H.266 ses ve video dosyalarının biçimleri hakkında daha fazla bilgi için bkz. Desteklenen protokoller.

• H.265 ve H.266 videolarını oynatmadan önce aşağıdaki tabloda açıklanan gereksinimleri dikkate alın.

  Öğe	Açıklama
  Ortam gereksinimleri	Oynatıcı, video kaynaklarına erişmek için AJAX aralık istekleri gönderir. Tarayıcınız aşağıdaki gereksinimleri karşılamalıdır: HTTP aralık isteklerini destekler. Daha fazla bilgi için bkz. HTTP aralık istekleri. OPTIONS yöntemini destekler. Firefox gibi bir tarayıcı, aralık üst bilgisi içeren bir AJAX isteği göndermeden önce ilk olarak bir HTTP OPTIONS isteği gönderir.
  Uyumluluk	H.265 iOS 11 veya sonraki sürümleri çalıştıran cihazlar H.265 videolarının oynatılmasını destekler. Android cihazlardaki yerleşik tarayıcı, WeChat tarayıcısı, UC Browser ve QQ Browser gibi belirli tarayıcılar H.265 videolarının donanım kod çözümlemesini destekler. Chrome, Microsoft Edge ve Firefox gibi tarayıcılarda H.265 videolarının yazılım kod çözümlemesi desteği, tarayıcıların WebAssembly API'sini destekleyip desteklemediğine bağlıdır. Daha fazla bilgi için WebAssembly adresini ziyaret edin. Cihazınızda Chrome veya Chromium kullanıyorsanız Chrome veya Chromium'u V74 veya sonraki bir sürüme güncelleyin. WebAssembly, V74'ten önceki Chrome ve Chromium sürümlerinde beklendiği gibi çalışmaz. H.266 Hiçbir tarayıcı yerel olarak H.266 videolarının oynatılmasını desteklemez. Bu durumda tarayıcılarda H.266 videolarını oynatmak için yazılım kod çözümü gerekir. Tarayıcılarda H.266 videolarının yazılım kod çözümü desteği, tarayıcıların WebAssembly API'sini destekleyip desteklemediğine bağlıdır. Daha fazla bilgi için WebAssembly adresini ziyaret edin. Cihazınızda Chrome veya Chromium kullanıyorsanız Chrome veya Chromium'u V74 veya sonraki bir sürüme güncelleyin. WebAssembly, V74'ten önceki Chrome ve Chromium sürümlerinde beklendiği gibi çalışmaz. iOS 16.4 veya önceki sürümleri çalıştıran cihazlar ve çoğu orta ve düşük segment Android cihaz H.266 videolarının yazılım kod çözümlemesini desteklemez.
  Yazılım kod çözümü performansı	H.265 PC'lerdeki tarayıcıları kullanarak çok iş parçacıklı süreçlerde 2K veya daha düşük çözünürlükteki videoları ve tek iş parçacıklı süreçlerde 1080p veya daha düşük tanımlı videoları oynatabilirsiniz. Videoların kare hızı saniyede 30 kareyi (FPS) aşmamalıdır. Mobil cihazlardaki tarayıcıları kullanarak tek iş parçacıklı süreçlerde 720p veya daha düşük çözünürlükteki videoları oynatabilirsiniz. Videoların kare hızı saniyede 30 FPS'yi aşmamalıdır. Mobil bir cihazın yazılım kod çözümü performansı cihazın çip performansına göre değişir. Aşağıdaki öğeler, tek iş parçacıklı süreçlerde videoların yazılım kod çözümlemesini destekleyen çipleri açıklar. Videolar 720p çözünürlüğündedir ve videoların FPS değeri 30'dur. Snapdragon 855 veya sonraki sürümler Kirin 820 veya sonraki sürümler Tianjic 800 veya sonraki sürümler H.266 PC'lerdeki tarayıcıları kullanarak çok iş parçacıklı süreçlerde 1080p veya daha düşük çözünürlükteki videoları ve tek iş parçacıklı süreçlerde 720p veya daha düşük tanımlı videoları oynatabilirsiniz. Videoların kare hızı saniyede 30 FPS'yi aşmamalıdır. Mobil cihazlardaki tarayıcıları kullanarak tek iş parçacıklı süreçlerde 720p veya daha düşük çözünürlükteki videoları oynatabilirsiniz. Videoların kare hızı saniyede 30 FPS'yi aşmamalıdır. Mobil bir cihazın yazılım kod çözümü performansı cihazın çip performansına göre değişir. Aşağıdaki öğeler, tek iş parçacıklı süreçlerde videoların yazılım kod çözümlemesini destekleyen çipleri açıklar. Videolar 720p çözünürlüğündedir ve videoların FPS değeri 30'dur. Snapdragon 855 veya sonraki sürümler Kirin 820 veya sonraki sürümler

ApsaraVideo Player SDK for Web'i entegre etme

<div class="prism-player" id="player-con"></div>
<script>
var options = {
  id: "player-con",
  source: "//demo.example.com/video/test/h265/test_480p_mp4_h265.mp4",
  enableH265: true,
  license: {
    domain: "example.com",
    key: "example-key"
  }
}
var player = new Aliplayer(options);
</script>

<div class="prism-player" id="player-con"></div>
<script>
var options = {
  id: "player-con",
  source: "//demo.example.com/video/test/h266/test_480p_mp4_h266.mp4",
  enableH266: true,
  license: {
    domain: "example.com",
    key: "example-key"
  }
}
var player = new Aliplayer(options);
</script>

{
  //... Configure other parameters.
  source: JSON.stringify({
      FD: '//h265_fd.mp4',
      HD: '//h265_hd.mp4'
    }),
}

Kod çözme yöntemi seçme

Oynatma için düşürülmüş protokol kullanma

player.on('error', (e) => {
        var code = String(e.paramData.error_code);
    if (['4300', '4301', '4302', '4303', '4304'].indexOf(code) > -1) {
      // If the API is not supported or a decoding error occurs, display a message or implement a fallback.
    }
});
player.on('h265DecoderOverload', (e) => {
    var data = e.paramData;
    // data.decodedFps - The current number of frames decoded per second by the software decoder.
    // data.fps - The current frame rate of the video.
    // data.playbackRate - The current playback speed.
    // This event is triggered if decodedFps < (fps * playbackRate) persists for more than 5 seconds.
    // At this point, playback may stutter, and you should consider notifying the user or implementing a fallback.
});
                            

  var player;
  // Create a player
  function createPlayer(_options) {
    player && player.dispose();
    player = new Aliplayer(_options);
    player.on('error', (e) => {
      var code = String(e.paramData.error_code);
      if (['4300', '4301', '4302', '4303', '4304'].indexOf(code) > -1) {
        fallbackTo264(_options)
      }
    });
    player.on('h265DecoderOverload', () => {
      // We recommend implementing the fallback after this event is triggered twice, as a single trigger may be due to a temporary decoding fluctuation.
      fallbackTo264(_options)
    })
    return player;
  }
  // Fallback function
  function fallbackTo264(_options) {
      // Set the source to the H.264 fallback video URL.
      _options.source = '//h264.mp4';
      // Disable enableH265 to skip codec detection.
      _options.enableH265 = false;
      createPlayer(_options);
  }
  // Initialize the player
  var options = {
    id: "player-con",
    source: "//h265.mp4",
    enableH265: true
  }
  createPlayer(options)

player.on('error', (e) => {
        var code = String(e.paramData.error_code);
    if (['4300', '4301', '4302', '4303', '4304'].indexOf(code) > -1) {
      // Notify the user or use a degraded protocol for playback if the API operation is not supported in your browser or video decoding failed.
    }
});          

  var player;
  // Create a player
  function createPlayer(_options) {
    player && player.dispose();
    player = new Aliplayer(_options);
    player.on('error', (e) => {
      var code = String(e.paramData.error_code);
      if (['4300', '4301', '4302', '4303', '4304'].indexOf(code) > -1) {
        fallbackTo264(_options)
      }
    });
    return player;
  }
  // Fallback function
  function fallbackTo264(_options) {
      // Set the source to the H.264 fallback video URL.
      _options.source = '//h264.mp4';
      // Disable enableH266 to skip codec detection.
      _options.enableH266 = false;
      createPlayer(_options);
  }
  // Initialize the player
  var options = {
    id: "player-con",
    source: "//h266.mp4",
    enableH266: true
  }
  createPlayer(options)

API

ApsaraVideo Player SDK for Web'de desteklenen nitelikler, yöntemler ve olaylar ile ilgili açıklamalar ve örnekler hakkında daha fazla bilgi için bkz. API işlemleri. Aşağıdaki bölümde H.265 ve H.266 videoları için desteklenen nitelikler, yöntemler ve olaylar açıklanmaktadır:

• Desteklenen nitelikler

  source, autoplay, rePlay, preload, cover, width, height, skinLayout, waitingTimeout, vodRetry, keyShortCuts ve keyFastForwardStep

• Desteklenen yöntemler

  play, pause, replay, seek, dispose, getCurrentTime, getDuration, getVolume, setVolume, loadByUrl, setPlayerSize, setSpeed, setSanpshotProperties, fullscreenService, getStatus, setRotate, getRotate, setImage, setCover, setProgressMarkers, setPreviewTime, getPreviewTime ve isPreview

• Desteklenen olaylar

  ready, play, pause, canplay, playing, ended, hideBar, showBar, waiting, timeupdate, snapshoted, requestFullScreen, cancelFullScreen, error, startSeek, completeSeek, h265PlayInfo ve h266PlayInfo

  Not

  h265PlayInfo ve h266PlayInfo geri çağırmaları, H.265 veya H.266 videosu için kullanılan oynatma yöntemini döndürür. renderType oynatma yöntemini, simd SIMD işlemeyi ve wasmThreads çok iş parçacıklı işlemeyi gösterir.

Hata kodları

Aşağıdaki tabloda H.265 ve H.266 oynatma hataları için döndürülebilecek hata kodları açıklanmaktadır. Diğer hata kodları hakkında daha fazla bilgi için bkz. API işlemleri.

Çok iş parçacıklı işlemeyi etkinleştirme

Örnek

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

> self.crossOriginIsolated
< true
> SharedArrayBuffer
< ƒ SharedArrayBuffer() { [native code] }

[TEST LOG] [H265PlayInfo]
{
  codecTag: "hvc1",
  renderType: "wasm",
  simd: true,
  simdOption: true,
  wasmThreads: true,
  wasmThreadsOption: true
}

Zaman kaydırma

• Zaman kaydırmayı etkinleştirme

  • ApsaraVideo Live'da zaman kaydırma özelliğini etkinleştirmeniz gerekir. Daha fazla bilgi için bkz. Zaman kaydırma.

  • Aşağıdaki tabloda, bir oynatıcı için zaman kaydırmayı etkinleştirmek üzere ayarlamanız gereken nitelikler açıklanmaktadır.

    Nitelik	Açıklama
    isLive	Değeri true olarak ayarlayın.
    liveTimeShiftUrl	Zaman kaydırma bilgilerini sorgulamak için kullanılan URL.
    liveStartTime	Canlı yayının başlangıç zamanı.
    liveOverTime	Canlı yayının bitiş zamanı.
    liveShiftSource	Zaman kaydırma için kullanılan HLS URL'si. Not Bu nitelik yalnızca FLV canlı yayınları için gereklidir.
    liveShiftMinOffset	Zaman kaydırma sırasında TS segmentleri oluşturmak için belirli bir süre gerekir. Mevcut canlı yayın zamanına son derece yakın bir konuma arama yaparsanız TS segmentleri oluşturulamaz ve 404 hatası bildirilir. Arama konumu ile mevcut canlı yayın zamanı arasında minimum bir süre belirtilmelidir. Bu parametreyi saniye cinsinden bir süre belirtmek için ayarlayabilirsiniz. Varsayılan değer: 30. Her 10 saniyede bir segment oluşturulur. Bu, en az üç segmentin var olmasını sağlar.

• Zaman kaydırma kullanıcı arayüzü

  Zaman kaydırma kullanıcı arayüzü esas olarak zaman kaydırmayı destekleyen alanda zamanı görüntüleyen bir ilerleme çubuğudur.

  Not

  Zaman alanı soldan sağa doğru mevcut oynatma zamanını, canlı yayının bitiş zamanını ve mevcut canlı yayın zamanını görüntüler.

• Canlı yayının bitiş zamanını değiştirme

  Oynatma sırasında liveShiftService.setLiveTimeRange yöntemini çağırarak canlı yayının başlangıç ve bitiş zamanlarını ayarlayabilirsiniz. Kullanıcı arayüzü buna göre güncellenir. Örnek:

  player.liveShiftSerivce.setLiveTimeRange(""'2018/01/04 20:00:00')

• Canlı yayın için FLV ve zaman kaydırma için HLS

  Gecikmeyi azaltmak için canlı yayın için FLV ve zaman kaydırma için HLS kullanmanızı öneririz.

  ApsaraVideo Player SDK for Web yapılandırmaları:

  • source: FLV formatındaki canlı yayın URL'si.

  • liveShiftSource: HLS formatındaki zaman kaydırma akışı URL'si.

  Örnek kod:

  {
   source:'http://localhost/live****/example.flv',
   liveShiftSource:'http://localhost/live****/example.m3u8',
  }

Özel dağıtım

Varsayılan olarak JavaScript ve CSS dosyaları gibi ApsaraVideo VOD kaynakları Alibaba Cloud CDN'de depolanır. Bu kaynakları kendi sunucunuza dağıtmak için aşağıdaki adımları uygulayın:

1. ApsaraVideo Player SDK kaynaklarını indirin.

   aliplayer-min.js ve aliplayer-min.css olmak üzere iki ana dosyaya ek olarak ApsaraVideo Player SDK for Web diğer kaynak dosyalarını da dinamik olarak referans alır. Bu nedenle öncelikle tam kaynak klasörünü almanız gerekir.

   İndirme bağlantısı: apsara-media-box-imp-web-player-dist.tar.gz

2. Paketi açın ve dosyaları dağıtın.

   Kaynak paketini açın ve klasördeki tüm dosyaları sunucunuza dağıtın. Dosyaların dizin düzeylerinin değişmediğinden emin olun.

3. Özel bir yolda oynatıcıyı başlatın.

   Aşağıdaki örnek kod, özel dağıtım için CSS ve JavaScript dosyalarının URL'lerini gösterir:

   https://player.alicdn.com/assets/skins/default/aliplayer-min.css
   https://player.alicdn.com/assets/aliplayer-min.js

   Oynatıcıyı başlatmak için aşağıdaki adımları uygulayın:

   1. Sayfanın üst kısmında CSS ve JavaScript dosyalarının URL'lerine başvurun.

      <head>
        <link rel="stylesheet" href="https://player.alicdn.com/assets/skins/default/aliplayer-min.css" />
        <script charset="utf-8" type="text/javascript" src="https://player.alicdn.com/assets/aliplayer-min.js"></script>
      </head>

   2. Oynatıcıyı başlatın ve assetPrefix parametresini belirtin.

      assetPrefix parametresi özel dağıtım adresiniz için öneki belirtir. Oynatıcı bir HLS videosu oynatmak için kullanılırsa https://player.alicdn.com/assets/hls/aliplayer-hls2-min.js dosyasını dinamik olarak referans alır. Dosyanın doğru adreste bulunduğundan emin olun.

      new Aliplayer({
        assetPrefix: 'https://player.alicdn.com/assets'
        // Specify other parameters.
      })

Başvurular

• Bileşenler

• API işlemleri

• ApsaraVideo Player SDK for Web SSS

• Bileşenleri özelleştirme

• HTML5 oynatıcı için hata kullanıcı arayüzünü özelleştirme

• Hataları işleme ve canlı yayını sürdürme