阿里云视频播放器

刺骨的言语ヽ痛彻心扉 2021-07-24 23:37 647阅读 0赞

# 一 视频播放器 #

参考文档：[https://help.aliyun.com/document\_detail/125570.html?spm=a2c4g.11186623.6.1083.1c53448blUNuv5][https_help.aliyun.com_document_detail_125570.html_spm_a2c4g.11186623.6.1083.1c53448blUNuv5]

## 1 视频播放器介绍 ##

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

## 2 集成视频播放器 ##

a 创建aliyunplayer\_pro文件夹

b 创建index.html文件

c 引入css文件

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

<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][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: ['欢迎Tom来到谷粒学院', { fontSize: '20px', color: '#FFFFFF' }, 'random']
                }]

## 3 弹幕 ##

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

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
    }]

# 三 代码 #

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css" />
    </head>
    <body>
        
        <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 charset="utf-8" src="https://player.alicdn.com/aliplayer/presentation/js/aliplayercomponents.min.js"></script>
        <script>
    
    
            /* 弹幕组件集成了 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
            }]
    
    
            var player = new Aliplayer({
                id: 'J_prismPlayer',
                width: '100%',
                //播放配置
                //方式一：单一数据源的非加密视频
                //支持播放地址播放,此播放优先级最高，此种方式不能播放加密视频
                source : 'http://XXXXXXXXXXXXXXXXXXXXX.mp4',
                cover: 'https://img.alicdn.com/tps/TB1EXIhOFXXXXcIaXXXXXXXXXXX-760-340.jpg',
                //播放方式二：加密视频和多数据源视频的播放
                // vid : '43d6225f1e844bdcadf6f042580614a6',
                // playauth : 'eyJTZWN1cml0eVRva2VuIjoiQ0FJUzN3SjFxNkZ0NUIyeWZTaklyNWVNR3ZHRmdKY1M0SmFvVDFMY2lVUStPTm9kbUpXZm16ejJJSGxQZTNGaEFPb2V2L2svbVc5VTdmb2Nsck1xRnNjYkh4T2ZOSlV2c2NzT3ExdjRKcExGc3QySjZyOEpqc1V3d04wcStWaXBzdlhKYXNEVkVma3VFNVhFTWlJNS8wMGU2TC8rY2lyWVhEN0JHSmFWaUpsaFE4MEtWdzJqRjFSdkQ4dFhJUTBRazYxOUszemRaOW1nTGlidWkzdnhDa1J2MkhCaWptOHR4cW1qL015UTV4MzFpMXYweStCM3dZSHRPY3FjYThCOU1ZMVdUc3Uxdm9oemFyR1Q2Q3BaK2psTStxQVU2cWxZNG1YcnM5cUhFa0ZOd0JpWFNaMjJsT2RpTndoa2ZLTTNOcmRacGZ6bjc1MUN0L2ZVaXA3OHhtUW1YNGdYY1Z5R0d0RHhrWk9aUXJ6emJZNWhLK2lnQVJtWGpJRFRiS3VTbWhnL2ZIY1dPRGxOZjljY01YSnFBWFF1TUdxRGNmRC9xUW1RT2xiK0cvWGFqUHBxajRBSjVsSHA3TWVNR1YrRGVMeVF5aDBFSWFVN2EwNDRxTDZvYnQ4WG1zUWFnQUY2T0FPT1FkRlNWS01DTEljblJhZk9UREZqRERPYXdzR0NKSlhHVFk5WlM0QUlzcEFtKzZxSmZzY3ZYQnJoOWFsdDBrYzlaTGFpVFRSL3gySXl2bkxKckxqTEZpYW9nWXhYN0M1YWhwdGNsZjFhNWZhU2Z2eUxoNmg3Ym11Ym5UWCthZENNdWJlNUJTZUNJYkJwRk5IcW5LTE1vaFhSQjRRc1ZST2RMTnRZTGc9PSIsIkF1dGhJbmZvIjoie1wiQ0lcIjpcIlY0NzlwVXArSkppc3NpeWNBL0NkSkZmTTc2b3JGRER0UForamxBaWNWbGs5eVJQMGtWS1BXcmlMenhKbkZuTDVJMWJlU1VaSHhJdURcXHJcXG5LSUpWbGZybUM4MXhwcDB2b2krQ0J3R1E1enlSV2dVPVxcclxcblwiLFwiQ2FsbGVyXCI6XCJkV05yWkZsTTJaVGRWTnhhQU9qbG5XWTZSSXB2U01GL0p6ZGk1N0hKaGhFPVxcclxcblwiLFwiRXhwaXJlVGltZVwiOlwiMjAyMC0wNC0yNFQwMjoyODowNlpcIixcIk1lZGlhSWRcIjpcIjQzZDYyMjVmMWU4NDRiZGNhZGY2ZjA0MjU4MDYxNGE2XCIsXCJQbGF5RG9tYWluXCI6XCJ2aWRlby5ndWxpLnNob3BcIixcIlNpZ25hdHVyZVwiOlwidGpBcGNudkYzZ0kzdjg3L1M0QURKZTF5SVhrPVwifSIsIlZpZGVvTWV0YSI6eyJTdGF0dXMiOiJOb3JtYWwiLCJWaWRlb0lkIjoiNDNkNjIyNWYxZTg0NGJkY2FkZjZmMDQyNTgwNjE0YTYiLCJUaXRsZSI6IuesrOWFq+mbhiIsIkNvdmVyVVJMIjoiaHR0cDovL3ZpZGVvLmd1bGkuc2hvcC80M2Q2MjI1ZjFlODQ0YmRjYWRmNmYwNDI1ODA2MTRhNi9zbmFwc2hvdHMvMzlhYjRlOWIyNmZmNDU5YTkyNmUwMzRjN2E2YmE0YjctMDAwMDQuanBnIiwiRHVyYXRpb24iOjY0LjQxMTd9LCJBY2Nlc3NLZXlJZCI6IlNUUy5OVDlRSzFtSDNXVENNdG1tRGs0VTF3UDR5IiwiUGxheURvbWFpbiI6InZpZGVvLmd1bGkuc2hvcCIsIkFjY2Vzc0tleVNlY3JldCI6IkdKaEdNdUR3TUxpRnBwVThXSzk0dFdUcXhKNGNycGdSQmNibWFCTkVOdXhjIiwiUmVnaW9uIjoiY24tc2hhbmdoYWkiLCJDdXN0b21lcklkIjoxNTA2MjczMTY3NzcxMjAxfQ==',
                // encryptType:1, //当播放私有加密流时需要设置。
                components: [{
                    name: 'BulletScreenComponent', // 跑马灯组件
                    type: AliPlayerComponent.BulletScreenComponent,
                    /** 跑马灯组件三个参数 text, style, bulletPosition
                    * text: 跑马灯文字内容
                    * style: 跑马灯样式
                    * bulletPosition: 跑马灯位置, 可选的值为 'top' (顶部), 'bottom' (底部), 'random' (随机), 不传值默认为 'random'
                    */
                    args: ['欢迎Tom来到谷粒学院', { fontSize: '20px', color: '#FFFFFF' }, 'random']
                },
                {
                    name: 'AliplayerDanmuComponent', // 弹幕组件
                    type: AliPlayerComponent.AliplayerDanmuComponent,
                    args: [danmukuList]
                },
                {
                    name: 'RotateMirrorComponent',
                    type: AliPlayerComponent.RotateMirrorComponent
                }]
            },function(player){
                console.log('播放器创建好了。')
            })
        </script>
    </body>
    </html>

# 四 测试 #

视频会有封面、跑马灯和弹幕效果。

[https_help.aliyun.com_document_detail_125570.html_spm_a2c4g.11186623.6.1083.1c53448blUNuv5]: https://help.aliyun.com/document_detail/125570.html?spm=a2c4g.11186623.6.1083.1c53448blUNuv5
[https_player.alicdn.com_aliplayer_presentation_index.html]: https://player.alicdn.com/aliplayer/presentation/index.html