本文介绍如何快速接入Web播放器并完成最基础的视频播放。

接入前须知

阿里云Web播放器SDK支持HTML5和Flash两种播放模式,请您提前明确所需集成的播放器模式,并了解相关功能支持和浏览器适配情况。关于功能支持和浏览器的适配说明,详细内容请参见Web播放器简介

快速接入

  1. 引入js文件。
    Web播放器不依赖于任何的前端js库,只需要在页面中引用js文件,就可以进行初始化。
    • 引入自适应模式的js文件

      该js文件同时包含了Flash和H5跨终端自适应的逻辑。引入该js文件后,播放器SDK会自行适配播放模式。

      <head>
        <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.21/skins/default/aliplayer-min.css" />  //(可选)如果您的使用场景需要用到H5模式的播放器,则需引用此css文件。
        <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.9.21/aliplayer-min.js"></script>  //(必须)引入js文件。
      </head>
      说明 引入自适应模式的js文件后,如需自定义播放模式,设置useFlashPrism=true表示Flash模式,设置useH5Prism=true表示H5模式。
    • 引入单模式的js文件
      如果您只是想使用其中一种播放技术,也可以只引用对应技术的js文件,从而获得更小的文件体积。
      • H5模式,示例如下:
        <head>
          <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.21/skins/default/aliplayer-min.css" />  //(必须)H5模式播放器,需引用此css文件。
          <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.9.21/aliplayer-h5-min.js"></script>  //(必须)引入H5模式的js文件。
        </head>
      • Flash模式,示例如下:
        <head>
          <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.9.21/aliplayer-flash-min.js"></script>  //(必须)引入Flash模式的js文件。
        </head>
    在IE 8浏览器使用Flash模式的播放器时,需要在页面添加json.min.js的引用。示例如下:
    https://g.alicdn.com/de/prismplayer/2.9.21/json/json.min.js
  2. 提供挂载元素。
    <body>
      <div id="J_prismPlayer"></div>
    </body>
  3. 实例化播放器。
    • Web播放器SDK支持5种点播播放方式,包括:URL播放、Vid+PlayAuth播放(推荐)、STS播放、MPS播放、加密播放。各播放方式的代码示例请参见点播视频播放
    • Web播放器SDK支持2种直播播放方式,URL播放和加密播放。各播放方式的代码示例请参见直播视频播放

点播视频播放

使用URL播放方式播放点播视频,需要将播放器的source属性设置为播放地址。播放地址可以是第三方点播地址或阿里云点播服务中的播放地址。阿里云播放地址可以调用获取音视频播放地址接口获取。建议您集成点播服务端SDK来获取音视频播放地址,免去自签名的麻烦。调用接口获取音视频播放地址的示例请参见开发者门户

点播URL播放示例

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

使用VID+PlayAuth播放方式播放点播视频,需要将播放器的vid属性设置为音视频ID,将playauth属性设置为音视频播放凭证。音视频ID可以在音视频上传完成后通过控制台(路径:媒资库 > 音/视频。)或服务端接口(SearchMedia )获取。音视频播放凭证可以调用获取音视频播放凭证接口获取。建议您集成点播服务端SDK来获取音视频播放凭证,免去自签名的麻烦。调用接口获取音视频播放凭证的示例请参见开发者门户

推荐视频点播用户采用此播放方式。相比STS播放方式,PlayAuth播放方式在易用性和安全性上更有优势,对比详情请参见凭证方式与STS方式对比

VID+PlayAuth播放示例

var player = new Aliplayer({
           id: 'J_prismPlayer',
           width: '100%',
           vid : '<your video ID>',//必选参数。音视频ID。示例:1e067a2831b641db90d570b6480f****。
           playauth : '<your PlayAuth>',//必选参数。音视频播放凭证。
         },function(player){
           console.log('The player is created.')
        });

使用STS播放方式播放点播视频是指用STS临时凭证而非点播音视频播放凭证播放。STS临时Token需要提前获取,获取方式请参见获取STS临时Token 。播放时需要将播放器的securityToken属性设置为STS临时Token,同时设置为STS临时Token生成的临时AK对(accessKeyId和accessKeySecret)。

STS播放示例

var player = new Aliplayer({
       id: 'J_prismPlayer',
       width: '100%',
       vid : '<your video ID>',//必选参数。音视频ID可以在音视频上传完成后通过控制台(路径:媒资库 > 音/视频。)或服务端接口(SearchMedia )获取。示例:1e067a2831b641db90d570b6480f****。
       accessKeyId: '<your AccessKey ID>',//必选参数。生成STS临时Token时返回。
       securityToken: '<your STS token>',//必选参数。视频播放的临时凭证。凭证需要提前生成。生成方式请参考创建角色并进行STS临时授权。
       accessKeySecret: '<your AccessKey Secret>',//必选参数。生成STS临时Token时返回。
       region: '<region of your video>', // 必选参数。媒体资源所在的地域标识。如cn-shanghai、eu-central-1, ap-southeast-1等。
     },function(player){
       console.log('The player is created.')
       });

MPS播放方式是播放器为媒体处理用户(MPS用户)提供的播放方式。MPS播放既需要提前获取以下信息:

  • vid:媒体处理系统中的媒资ID。
  • AcessKeyId和AccessKeySecret:随STS临时Token下发的临时AK对。
  • SecurityToken:STS临时Token。
  • domainRegion:媒体资源所在的地域。
  • authInfo:授权信息。

获取MPS媒体相关信息请参见媒体处理视频播放

MPS播放示例

var player = new Aliplayer({
       id: 'J_prismPlayer',
       width: '100%',
       vid : '<your media ID in MPS>',//必选参数。可以通过媒体处理控制台(媒体管理>媒体列表路径)查询。示例:1e067a2831b641db90d570b6480f****。
       accId: '<your AccessKey ID>',//必选参数。生成STS临时Token时返回。
       accSecret: '<your AccessKey Secret>',//必选参数。生成STS临时Token时返回。
       stsToken: '<your STS token>',//必选参数。视频播放的临时凭证。凭证需要提前生成。
       domainRegion: '<your domain region>',//必选参数。媒体资源所在的区域(cn-shanghai,cn-hangzhou等)。
       authInfo: '<your auth info>',//必选参数。authInfo需要提前生成。
     },function(player){
       console.log('The player is created.')
    });

点播视频支持阿里云私有加密和DRM加密。加密播放请参见Web播放器加密播放

直播视频播放

使用URL播放方式播放直播视频,需要将播放器的source属性设置为直播拉流地址,同时将isLive属性设置为true。播放地址可以是第三方直播地址或阿里云直播服务中的拉流地址。阿里云直播拉流地址可以通过直播控制台的地址生成器生成。详情请参见阿里云直播地址生成器

直播URL播放示例

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

直播DRM加密播放请参见Web播放器加密播放

相关文档