Tüm Ürünler
Search
Belge Merkezi

ApsaraVideo VOD:Integrate ApsaraVideo Player SDK for Web

Son Güncelleme:Oct 18, 2026

ApsaraVideo Player SDK for Web'i web uygulamanıza entegre edin ve temel video oynatmayı yapılandırın.

Kullanım notları

  • Bu konuda ApsaraVideo Player SDK for Web V2.25.1 sürümü örnek olarak kullanılmıştır. En son sürümü kullanmanızı öneririz. İndirmek için ApsaraVideo Player SDK'yı indirin konusuna bakın.

  • ApsaraVideo Player SDK for Web V2.14.0 ve sonraki sürümler H.265 video oynatmayı destekler; V2.20.2 ve sonraki sürümler ise H.266 desteği sunar. Bu konuda H.264 ele alınmaktadır. H.265 ve H.266 hakkında bilgi için H.265 ve H.266 videolarını oynatın konusuna bakın.

Hazırlıklar

AI Skill kullanarak hızlı erişim

Agent Skills özelliğini destekleyen AI programlama araçları (Qoder ve Claude Code gibi) kullanıyorsanız oynatıcının resmi Skill'ini yükleyebilirsiniz. AI, doğrudan çalıştırılabilen entegrasyon kodunu oluşturur.

  1. Yükleme.

    Yöntem 1: Projenin kök dizininde otomatik olarak yüklemek için komutu çalıştırın.

    npx skills add https://player.alicdn.com/file/aliplayer-web-setup.tar.gz

    Yöntem 2: Sıkıştırılmamış paketi manuel olarak indirin ve AI programlama aracının skills dizinine yerleştirin.

    aliplayer-web-setup dizinini ilgili aracın skills dizinine kopyalayın. Örnek:

    • GLOBAL ETKİLİ: ~/.qoder/skills/aliplayer-web-setup/

    • Yalnızca mevcut proje için etkili: <Proje Kök Dizini>/.qoder/skills/aliplayer-web-setup/

    Diğer AI programlama araçlarının skills dizini yolu için lütfen resmi belgelere bakın.

    Not

    Her iki yöntemin yüklemesi tamamlandıktan sonra Skill'in etkinleşmesi için AI programlama aracını yeniden başlatmanız gerekir.

  2. Kullanım.

    Gereksinimi doğal bir dille açıklayın. Örneğin: React projesinde Aliyun oynatıcıya bağlanmama yardımcı ol, isteğe bağlı videoyu oynat, özel şifreleme gerekli.

    AI önce ön uç çerçevesini, isteğe bağlı/canlı yayın durumunu, şifreleme gerekip gerekmediğini, video kaynağı modunu ve diğer bilgileri onaylar; ardından eksiksiz oynatıcı entegrasyon kodunu çıktılar.

Not

Oluşturulan kod varsayılan olarak test Lisansı kullanır ve yalnızca yerel hata ayıklama ile sınırlıdır. Resmi yayına çıkarken konsoldan başvurduğunuz resmi Lisans ile değiştirmeniz gerekir. Ayrıntılar için Lisansı yönetin konusuna bakın.

Manuel Hızlı Erişim

Bu adımlar, ApsaraVideo Player SDK for Web'i temel bir web projesine entegre eder. React veya Vue için demo dosyasını Çevrimiçi deneme ve demo kaynak kodu bağlantısından indirin.

1. Web SDK'yı içe aktarma

NPM paketi kullanarak içe aktarma

  1. Projenize aliyun-aliplayer bağımlılığını ekleyin.

    npm install aliyun-aliplayer --save
  2. Kod paketini ve stil dosyasını kodunuzda içe aktarın.

    import Aliplayer from 'aliyun-aliplayer';
    import 'aliyun-aliplayer/build/skins/default/aliplayer-min.css';

Script etiketi kullanarak içe aktarma

Not

JavaScript ve CSS dosyalarının depolandığı yollar V2.16.3 ve sonraki sürümler için değişmiştir.

Eski:

CSS: https://g.alicdn.com/de/prismplayer/version/skins/default/aliplayer-min.css

JS: https://g.alicdn.com/de/prismplayer/version/aliplayer-min.js

Yeni:

CSS: https://g.alicdn.com/apsara-media-box/imp-web-player/version/skins/default/aliplayer-min.css

JS: https://g.alicdn.com/apsara-media-box/imp-web-player/version/aliplayer-min.js

<!--In this topic, Web SDK V2.25.1 is used as an example. If you want to use other versions, obtain the version number and replace 2.25.1 in the sample code.-->
<head>
  <link rel="stylesheet" href="https://g.alicdn.com/apsara-media-box/imp-web-player/2.25.1/skins/default/aliplayer-min.css" />  // Required. You must add this CSS file.
  <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/apsara-media-box/imp-web-player/2.25.1/aliplayer-min.js"></script>  // Required. You must add the .js file.
</head>

2. Montaj öğesi sağlama

Oynatıcı kullanıcı arayüzünü monte etmek için bir <body> etiketi ve bir <div> düğümü ekleyin. Örnek kod:

<body>
  <div id="J_prismPlayer"></div>
</body>

3. SDK'yı başlatma

SDK, id="J_prismPlayer" kimliğine sahip DOM düğümünü bulur ve oynatıcı kullanıcı arayüzünü oluşturur.

var player = new Aliplayer({
  id: 'J_prismPlayer',
  license: {
    // Use the domain name and license key prepared
    domain: "example.com", // The domain name that you specified when you applied for a license
    key: "example-key" // The license key displayed in the ApsaraVideo VOD console after you have applied for a license
  }
});

Video oynatma

Oynatıcıyı farklı senaryolar için yapılandırın.

İsteğe bağlı videoları oynatma

URL'lere dayalı oynatma

source parametresini üçüncü taraf bir hizmetten veya ApsaraVideo VOD'dan alınan medya dosyasının oynatma URL'sine ayarlayın.

ApsaraVideo VOD'daki bir medya dosyasının oynatma URL'sini almak için GetPlayInfo işlemini çağırın. Karmaşık imzalama hesaplamalarından kaçınmak için ApsaraVideo VOD SDK'sını entegre etmenizi öneririz. API'yi OpenAPI Explorer üzerinde deneyin.

var player = new Aliplayer(
  {
    id: "J_prismPlayer",
    source: "<your play URL>", // The playback URL of a media file stored in a third-party VOD service or in ApsaraVideo VOD.
  },
  function (player) {
    console.log("The player is created.");
  }
);

VID ve PlayAuth'a dayalı oynatma

vid parametresini medya kimliğine, playauth parametresini ise oynatma kimlik bilgisine ayarlayın.

  1. Bir medya dosyası yükledikten sonra ApsaraVideo VOD konsolunda Medya Dosyaları > Ses/Video altında kimliğini bulun. Alternatif olarak, SearchMedia işlemini çağırın.

  2. Oynatma kimlik bilgisini almak için GetVideoPlayAuth işlemini çağırın. Karmaşık imzalama hesaplamalarından kaçınmak için ApsaraVideo VOD SDK'sını entegre etmenizi öneririz. API'yi OpenAPI Explorer üzerinde deneyin.

Basitlik ve güvenlik açısından VidAuth tabanlı oynatma, STS yöntemine göre önerilir. Karşılaştırma için Kimlik bilgisi yöntemi ile STS yöntemi konusuna bakın.

var player = new Aliplayer(
  {
    id: "J_prismPlayer",
    width: "100%",
    vid: "<your video ID>", // Required. The ID of the media file. Example: 1e067a2831b641db90d570b6480f****.
    playauth: "<your PlayAuth>", // Required. The playback credential.
    // authTimeout: 7200, // The validity period of the playback URL. Unit: seconds. This setting overwrites the validity period that you configured in the ApsaraVideo VOD console. If you leave this parameter empty, the default value 7200 is used. The validity period must be longer than the actual duration of the video. Otherwise, the playback URL expires before the playback is complete.
  },
  function (player) {
    console.log("The player is created.");
  }
);

VID ve STS tabanlı oynatma

STS tabanlı oynatma, oynatma kimlik bilgisi yerine geçici bir STS belirteci kullanır. Bir STS belirteci almak için AssumeRole işlemini çağırın. Daha fazla bilgi için STS belirteci alma konusuna bakın.

var player = new Aliplayer(
  {
    id: "J_prismPlayer",
    width: "100%",
    vid: "<your video ID>", // Required. After you upload an audio or video file, you can log on to the ApsaraVideo VOD console and choose Media Files > Audio/Video to view the ID of the audio or video file. Alternatively, you can call the SearchMedia operation provided by the ApsaraVideo VOD SDK to obtain the ID. Example: 1e067a2831b641db90d570b6480f****.
    accessKeyId: "<your AccessKey ID>", // Required. The AccessKey ID is returned when the temporary STS token is generated.
    securityToken: "<your STS token>", // Required. The STS token. To obtain an STS token, call the AssumeRole operation.
    accessKeySecret: "<your AccessKey Secret>", // Required. The AccessKey secret is returned when the temporary STS token is generated.
    region: "<region of your video>", // Required. The ID of the region in which the media asset resides, such as cn-shanghai, eu-central-1, or ap-southeast-1.
    // authTimeout: 7200, // The validity period of the playback URL. Unit: seconds. This setting overwrites the validity period that you configured in the ApsaraVideo VOD console. If you leave this parameter empty, the default value 7200 is used. The validity period must be longer than the actual duration of the video. Otherwise, the playback URL expires before the playback is complete.
  },
  function (player) {
    console.log("The player is created.");
  }
);

Şifreli oynatma

ApsaraVideo VOD, Alibaba Cloud'a özgü şifrelemeyi ve DRM şifrelemeyi destekler. Web tarayıcısında şifreli video oynatma konusuna bakın.

Oynatıcı VID oynatma modu kullanılarak başlatıldığında Aliplayer SDK, oynatma adresini almak için vod.{region}.aliyuncs.com (vod-product.{region}aliyuncs.com) adresine bir GetPlayInfo isteği gönderir. Ağ bu alan adına erişemiyorsa (örneğin intranet ortamında) istek zaman aşımına uğrar veya başarısız olur. vod.{region}.aliyuncs.com (vod-product.{region}aliyuncs.com) ve CDN alan adının ağdan erişilebilir olduğundan emin olun.

Not

Tüm başlatma seçenekleri için Parametreler konusuna bakın.

Canlı yayınları oynatma

URL tabanlı canlı yayın

source parametresini akış URL'sine, isLive parametresini ise true değerine ayarlayın.

Akış URL'si üçüncü taraf bir hizmetten veya ApsaraVideo Live hizmetinden gelebilir. ApsaraVideo Live konsolundaki URL oluşturucu ile URL'ler oluşturun.

var player = new Aliplayer(
  {
    id: "J_prismPlayer",
    source: "<your play URL>", // The streaming URL can be a third-party streaming URL or a streaming URL that is generated in ApsaraVideo Live.
    isLive: true, // Specifies whether to play live streams.
  },
  function (player) {
    console.log("The player is created.");
  }
);

DRM şifreli canlı yayın

DRM şifreli canlı yayın için: Şifreli video oynatma konusuna bakın.

Gerçek Zamanlı Akış (RTS)

RTS ek parametre olmadan URL'lerden videoları oynatır.

  1. ApsaraVideo Live konsolundaki URL oluşturucu ile bir RTS URL'si oluşturun.

  2. Oynatıcı, RTS oynatma için RTS SDK'yı entegre eder. Varsayılan olarak en son sürüm kullanılır. rtsVersion parametresiyle geçersiz kılınabilir.

  3. RTS kullanılamadığında oynatıcı HLS veya HTTP-FLV protokolüne geri döner. Desteklendiğinde FLV önceliklidir.

var player = new Aliplayer(
  {
    id: "J_prismPlayer",
    source: "<your play URL>", // The RTS playback URL. The artc:// protocol is used.
    isLive: true, // Specifies whether to play live streams.
    // rtsFallback: false, //Optional. Specifies whether to enable the RTS playback degradation feature. Default value: true.
    // rtsFallbackType: 'HLS', //Optional. The degraded protocol that you want to use. You can specify HLS or FLV. By default, this parameter is left empty. In this case, the default policy is used and the system tries to play the stream over FLV first. If your browser does not support FLV, the system plays the stream over HLS.
    // rtsFallbackSource: '<your play URL>', // Optional. The degraded protocol that you want to use.
    // rtsVersion: 'x.x.x', // Optional. The version of the RTS SDK.
  },
  function (player) {
    console.log("The player is created.");
  }
);
// The event that is triggered when a stream is pulled over RTS. Listen for this event to obtain the TraceId. In the event callback, traceId indicates the TraceId that is used for stream pulling and source indicates the playback URL of the RTS stream.
player.on("rtsTraceId", function (event) {
  console.log("EVENT rtsTraceId", event.paramData);
});
// The event that is triggered when a degraded protocol is used for playback. reason indicates the degradation cause and fallbackUrl indicates the alternative URL.
player.on("rtsFallback", function (event) {
  console.log(" EVENT rtsFallback", event.paramData);
});

Referans