阿里云VOD(三)

一、视频播放器

参考文档：https://help.aliyun.com/document_detail/125570.html?spm=a2c4g.11186623.6.1083.1c53448blUNuv5

1、视频播放器介绍

阿里云播放器SDK（ApsaraVideo Player SDK）是阿里视频服务的重要一环，除了支持点播和直播的基础播放功能外，深度融合视频云业务，如支持视频的加密播放、安全下载、清晰度切换、直播答题等业务场景，为用户提供简单、快速、安全、稳定的视频播放服务。

2、集成视频播放器

1. 创建aliyunplayer_pro文件夹
2. 创建index.html文件
3. 引入css文件

<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css" >

1. 引入脚本文件并初始化视频播放器

<div class="prism-player" id="J_prismPlayer"></div>
<script charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js"></script>
<script>
    var player = new Aliplayer({
        id: 'J_prismPlayer',
        width: '100%',
        //播放配置
    },function(player){
        console.log('播放器创建好了。')
    });
</script>

3、播放地址播放

在Aliplayer的配置参数中添加如下属性

//播放方式一：支持播放地址播放,此播放优先级最高，此种方式不能播放加密视频
source : '你的视频播放地址',

启动浏览器运行，测试视频的播放

4、播放凭证播放（推荐）

阿里云播放器支持通过播放凭证自动换取播放地址进行播放，接入方式更为简单，且安全性更高。播放凭证默认时效为100秒（最大为3000秒）。

如果凭证过期则无法获取播放地址，需要重新获取凭证。

//播放方式二：加密视频和多数据源视频的播放
vid : '视频id',
playauth : '视频播放授权码',
encryptType:1, //当播放私有加密流时需要设置。

注意：播放凭证有过期时间，默认值：100秒 。取值范围：100~3000。

设置播放凭证的有效期：在获取播放凭证的测试用例中添加如下代码

request.setAuthInfoTimeout(200L);

二、功能和组件

功能展示：https://player.alicdn.com/aliplayer/presentation/index.html

1、视频封面

配置中添加cover属性设置

cover: 'http://liveroom-img.oss-cn-qingdao.aliyuncs.com/logo.png',

2、跑马灯

引入js脚本

<!-- 阿里云视频播放器组件 -->
<script charset="utf-8" src="https://player.alicdn.com/aliplayer/presentation/js/aliplayercomponents.min.js"></script>

播放器中添加配置项

components: [{
    name: 'BulletScreenComponent', // 跑马灯组件
    type: AliPlayerComponent.BulletScreenComponent,
    /** 跑马灯组件三个参数 text, style, bulletPosition
       * text: 跑马灯文字内容
       * style: 跑马灯样式
       * bulletPosition: 跑马灯位置, 可选的值为 'top' (顶部), 'bottom' (底部), 'random' (随机), 不传值默认为 'random'
       */
    args: ['欢迎来到谷粒学院', { fontSize: '16px', color: '#00c1de' }, 'random']
}]

3、弹幕

首先定义弹幕组件的弹幕列表

/* 弹幕组件集成了 CommentCoreLibrary 框架, 更多 Api 请查看文档 https://github.com/jabbany/CommentCoreLibrary/ */

var danmukuList = [{
  "mode": 1,
  "text": "哈哈",
  "stime": 1000,
  "size": 25,
  "color": 0xffffff
}, {
  "mode": 1,
  "text": "前方高能",
  "stime": 2000,
  "size": 25,
  "color": 0xff0000
}, {
  "mode": 1,
  "text": "灵魂歌手",
  "stime": 30000,
  "size": 25,
  "color": 0xff0000
}, {
  "mode": 1,
  "text": "顺手一划",
  "stime": 10000,
  "size": 25,
  "color": 0x00c1de
}]

播放器中添加配置项

components: [{
    name: 'AliplayerDanmuComponent', // 弹幕组件
    type: AliPlayerComponent.AliplayerDanmuComponent,
    args: [danmukuList] //列表：注意需要外层的[ ]
}]

4、旋转镜像

components: [{
    name: 'RotateMirrorComponent',
    type: AliPlayerComponent.RotateMirrorComponent
}]