阿里雲視訊播放器

chengqiuming發表於2020-12-13
阿里播放器

一 視訊播放器

參考文件：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檔案

<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.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

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>

四 測試

視訊會有封面、跑馬燈和彈幕效果。

相關文章