日本熟妇hd丰满老熟妇,中文字幕一区二区三区在线不卡 ,亚洲成片在线观看,免费女同在线一区二区

AI 助理
備案控制臺
文檔
輸入文檔關(guān)鍵字查找
首頁 視頻點播 開發(fā)參考 客戶端SDK 播放器SDK Web播放器 快速接入

快速接入

更新時間：
產(chǎn)品詳情
我的收藏

本文介紹如何快速接入Web播放器并完成基礎(chǔ)的視頻播放。

接入前須知

  • 本文以接入版本2.25.1的Web播放器SDK為例進(jìn)行說明，推薦您使用最新版本，最新版本W(wǎng)eb播放器SDK請參見播放器SDK。

  • 阿里云Web播放器SDK支持HTML5和Flash兩種播放模式，請您在集成前明確所需的播放器模式，并了解相關(guān)功能支持和瀏覽器適配情況，詳細(xì)內(nèi)容請參見Web播放器SDK簡介。

  • Web播放器SDK從2.14.0版本開始支持播放H.265編碼協(xié)議的視頻流，從2.20.2版本開始支持播放H.266編碼協(xié)議的視頻流。本文僅介紹播放H.264編碼視頻的相關(guān)配置，有關(guān)播放H.265/H.266編碼視頻的配置方法請參見播放H.265/H.266編碼協(xié)議視頻流。

快速接入

  1. 引入Web播放器SDK。

    通過 npm 方式引入。

    //先通過 npm install aliyun-aliplayer --save  安裝
import Aliplayer from 'aliyun-aliplayer';
import 'aliyun-aliplayer/build/skins/default/aliplayer-min.css';

    或者通過JS方式進(jìn)行引入。

    • 引入自適應(yīng)模式的js文件

      該js文件同時包含了Flash和H5跨終端自適應(yīng)的邏輯。引入該js文件后，播放器SDK會自行適配播放模式。在項目前端頁面文件中的<head>標(biāo)簽處引入Web播放器SDK的JS文件和CSS文件，示例如下：

      <!--本文以接入版本2.25.1的Web播放器SDK為例進(jìn)行說明，如需接入其他版本，請參考Web播放器SDK獲取對應(yīng)版本號，并在下述示例代碼中將2.25.1替換成目標(biāo)版本號-->
<head>
  <link rel="stylesheet"  />  //（可選）如果您的使用場景需要用到H5模式的播放器，則需引用此css文件。
  <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>  //（必須）引入js文件。
</head>
      說明

      引入自適應(yīng)模式的js文件后，如需自定義播放模式，設(shè)置useFlashPrism=true表示Flash模式，設(shè)置useH5Prism=true表示H5模式。

    • 引入單模式的js文件

      如果您只是想使用其中一種播放技術(shù)，也可以只引用對應(yīng)技術(shù)的js文件，從而獲得更小的文件體積。

      • H5模式，在項目前端頁面文件中的<head>標(biāo)簽處引入Web播放器SDK的JS文件和CSS文件，示例如下：

        <head>
  <link rel="stylesheet"  />  //（必須）H5模式播放器，需引用此css文件。
  <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/apsara-media-box/imp-web-player/2.25.1/aliplayer-h5-min.js"></script>  //（必須）引入H5模式的js文件。
</head>

      • Flash模式，在項目前端頁面文件中的<head>標(biāo)簽處引入Web播放器SDK的JS文件，示例如下：

        <head>
  <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/apsara-media-box/imp-web-player/2.25.1/aliplayer-flash-min.js"></script>  //（必須）引入Flash模式的js文件。
</head>

      在IE 8瀏覽器使用Flash模式的播放器時，需要在項目前端頁面文件中的<head>標(biāo)簽處添加json.min.js的引用，示例如下：

      https://g.alicdn.com/apsara-media-box/imp-web-player/2.25.1/json/json.min.js
      說明

      如需引入2.16.3及之后版本的Web播放器SDK，則引入路徑可參見上述示例；如需引入2.16.3之前版本的Web播放器SDK，則需將上述路徑中的/apsara-media-box/imp-web-player節(jié)點替換為/de/prismplayer，例如引入2.15.2版本自適應(yīng)模式的js文件示例為：

      <head>
  <link rel="stylesheet"  />  //（可選）如果您的使用場景需要用到H5模式的播放器，則需引用此css文件。
  <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.15.2/aliplayer-min.js"></script>  //（必須）引入js文件。
</head>

  2. 提供掛載元素。

    在<body>標(biāo)簽處添加一個用以掛載播放界面的<div>節(jié)點，示例如下：

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

  1. 配置License。

    說明

    • 2024年12月1日起，新版Web播放器SDK必須按以下操作配置License后，方可使用。

    • 播放器SDK現(xiàn)免費(fèi)提供，License有效期為1年，詳情請參見管理License。

    • License配置完成后，播放器界面若無相關(guān)錯誤提示，則表示 License 配置成功。

    • 請確保播放器所在頁面的域名和申請License時填寫的域名保持一致，或者是填寫域名的子域名，否則License校驗將會不通過（localhost 不會校驗）。

    在初始化播放器時傳入license字段，包含注冊的域名和License Key：

    var player = new Aliplayer({
  license: {
    domain: "example.com", // 申請 License 時填寫的域名
    key: "example-key" // 申請成功后，在控制臺可以看到 License Key
  }
});

  2. 實例化播放器。

    在<script>標(biāo)簽中添加如下示例代碼：

    點播視頻播放

    點播URL播放

    使用URL播放方式播放點播視頻，需要將播放器的source屬性設(shè)置為播放地址。播放地址可以是第三方點播地址或阿里云點播服務(wù)中的播放地址。

    阿里云播放地址可以調(diào)用獲取音視頻播放地址接口獲取。建議您集成點播服務(wù)端SDK來獲取音視頻播放地址，免去自簽名的麻煩。調(diào)用接口獲取音視頻播放地址的示例請參見開發(fā)者門戶。

    var player = new Aliplayer({
        id: 'J_prismPlayer',
        source: '<your play URL>', // 播放地址，可以是第三方點播地址，或阿里云點播服務(wù)中的播放地址。
      },function(player){
        console.log('The player is created.')
     });

    VID+PlayAuth播放

    使用VID+PlayAuth播放方式播放點播視頻，需要將播放器的vid屬性設(shè)置為音視頻ID，將playauth屬性設(shè)置為音視頻播放憑證。

    1. 音視頻ID可以在音視頻上傳完成后通過控制臺（路徑：媒資庫>音/視頻）或服務(wù)端接口（SearchMedia）獲取。

    2. 音視頻播放憑證可以調(diào)用獲取音視頻播放憑證接口獲取。建議您集成點播服務(wù)端SDK來獲取音視頻播放憑證，免去自簽名的麻煩。調(diào)用接口獲取音視頻播放憑證的示例請參見開發(fā)者門戶。

    推薦視頻點播用戶采用此播放方式。相比STS播放方式，PlayAuth播放方式在易用性和安全性上更有優(yōu)勢，對比詳情請參見憑證方式與STS方式對比。

    var player = new Aliplayer({
           id: 'J_prismPlayer',
           width: '100%',
           vid : '<your video ID>', // 必選參數(shù)。音視頻ID。示例：1e067a2831b641db90d570b6480f****。
           playauth : '<your PlayAuth>', // 必選參數(shù)。音視頻播放憑證。
           // authTimeout: 7200, // 播放地址的有效時長，單位：秒。該時長會覆蓋在視頻點播控制臺設(shè)置的URL鑒權(quán)的有效時長。如果不傳，則取默認(rèn)值7200。如需設(shè)置此參數(shù)，請確保該時間大于視頻的實際時長，防止播放地址在播放完成前過期。
         },function(player){
           console.log('The player is created.')
        });

    點播STS播放

    使用STS播放方式播放點播視頻是指用STS臨時憑證而非點播音視頻播放憑證播放。STS臨時憑證需要提前獲取，需要調(diào)用STS服務(wù)的AssumeRole接口生成，生成方式請參見使用STS臨時授權(quán)方案上傳視頻。

    var player = new Aliplayer({
       id: 'J_prismPlayer',
       width: '100%',
       vid : '<your video ID>', // 必選參數(shù)。音視頻ID可以在音視頻上傳完成后通過控制臺（路徑：媒資庫 > 音/視頻。）或服務(wù)端接口（SearchMedia ）獲取。示例：1e067a2831b641db90d570b6480f****。
       accessKeyId: '<your AccessKey ID>', // 必選參數(shù)。STS臨時AK對的訪問密鑰ID，生成STS安全令牌時返回。
       securityToken: '<your STS token>', // 必選參數(shù)。STS安全令牌，需要調(diào)用STS服務(wù)的AssumeRole接口生成。
       accessKeySecret: '<your AccessKey Secret>', // 必選參數(shù)。STS臨時AK對的訪問密鑰，生成STS安全令牌時返回。
       region: '<region of your video>', // 必選參數(shù)。媒體資源所在的地域標(biāo)識。如cn-shanghai、eu-central-1, ap-southeast-1等。
       // authTimeout: 7200, // 播放地址的有效時長，單位：秒。該時長會覆蓋在視頻點播控制臺設(shè)置的URL鑒權(quán)的有效時長。如果不傳，則取默認(rèn)值7200。如需設(shè)置此參數(shù)，請確保該時間大于視頻的實際時長，防止播放地址在播放完成前過期。
     },function(player){
       console.log('The player is created.')
       });

    點播加密播放

    點播視頻支持阿里云私有加密和DRM加密。加密播放請參見如何播放加密視頻。

    直播視頻播放

    直播URL播放

    使用URL播放方式播放直播視頻，需要將播放器的source屬性設(shè)置為直播拉流地址，同時將isLive屬性設(shè)置為true。

    播放地址可以是第三方直播地址或阿里云直播服務(wù)中的拉流地址。阿里云直播拉流地址可以通過直播控制臺的地址生成器生成。詳情請參見直播地址生成器。

    <script>
  var player = new Aliplayer({
    id: 'J_prismPlayer',
    source: '<your play URL>', // 播放地址，可以是第三方直播地址，或阿里云直播服務(wù)中的拉流地址。
    isLive: true, // 是否為直播播放。
    },function(player){
      console.log('The player is created.')
    });
</script>

    直播DRM加密播放

    直播DRM加密播放請參見播放DRM加密視頻-Web端。

    超低延時直播（RTS）視頻播放

    超低延時直播（RTS）使用URL方式播放，無需額外設(shè)置參數(shù)。

    1. RTS拉流地址可以通過直播控制臺的地址生成器生成，詳情請參見直播地址生成器。

    2. 阿里云播放器通過集成RTS SDK實現(xiàn)RTS播放，默認(rèn)集成最新版本的RTS SDK，您也可以通過參數(shù)指定RTS SDK版本，如：rtsVersion: '2.2.1'。

    3. 當(dāng)瀏覽器不兼容RTS或者RTS拉流失敗時，播放器會自動嘗試使用FLV或者HLS協(xié)議進(jìn)行播放（如果瀏覽器支持，會優(yōu)先選擇延遲更低的FLV協(xié)議作為降級）。

    <script>
var player = new Aliplayer({
    id: 'J_prismPlayer',
    source: '<your play URL>', // 播放地址，使用超低延時直播（RTS）地址，協(xié)議是artc://。
    isLive: true, // 是否為直播播放。
    // rtsFallback: false, //（可選）是否開啟RTS自動降級，默認(rèn)為 true
    // rtsFallbackType: 'HLS', //（可選）指定降級到的協(xié)議，可選 HLS/FLV，默認(rèn)是自動選擇，優(yōu)先選擇延遲更低的FLV，如果瀏覽器不支持則降級到 HLS
    // rtsFallbackSource: '<your play URL>', // （可選）指定降級地址，而不是讓播放器自動選擇
    // rtsVersion: 'x.x.x', // （可選）可以手動指定RTS SDK的版本。
},function(player){
    console.log('The player is created.')
});
// 當(dāng)RTS拉流成功時觸發(fā)，通過訂閱該事件，可以獲取到RTS TraceId。 回調(diào)函數(shù)的參數(shù)中traceId為拉流的TraceId，source為當(dāng)前RTS流的播放地址。
player.on('rtsTraceId', function(event) {
    console.log('EVENT rtsTraceId', event.paramData);
})
// 當(dāng)RTS降級時觸發(fā)，參數(shù)reason為降級的原因，fallbackUrl為降級到的地址。
player.on('rtsFallback', function(event) {
    console.log(' EVENT rtsFallback', event.paramData);
})
</script>

    通用媒體管理服務(wù)視頻播放

    說明

    Web播放器SDK需使用2.10.0及以上版本。

    基于通用媒體管理服務(wù)視頻的mediaAuth方式的簡單播放方案。

    mediaAuth可以登錄通用媒體管理服務(wù)控制臺獲取（路徑：媒資管理 > 視頻管理 > 管理 > 基礎(chǔ)配置）。

    <script>
  var player = new Aliplayer({
    id: 'J_prismPlayer',
    mediaAuth: '<your mediaAuth>', // 視頻的播放憑證，可以在通用媒體管理服務(wù)控制臺獲取。
    },function(player){
      console.log('The player is created.')
    });

  // 也可以使用replayByMediaAuth函數(shù)切換不同的mediaAuth播放（前提是已經(jīng)使用mediaAuth初始化播放器）。
  // player.replayByMediaAuth('another mediaAuth');
</script>

接入常見問題

如何在Vue項目中接入阿里云Web播放器SDK？

阿里云Web播放器SDK提供基于Vue的播放器Demo源碼，您可以參考使用。Demo獲取地址Vue Demo源碼。

更多接入常見問題，請參見Web播放器常見問題。

相關(guān)文檔