阿里云视频播放器

最新推荐文章于 2022-05-13 18:14:47 发布

chengqiuming

最新推荐文章于 2022-05-13 18:14:47 发布

阅读量5.9k

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/chengqiuming/article/details/111121797

版权

JavaScript 专栏收录该内容

166 篇文章 1 订阅

订阅专栏

一视频播放器

参考文档：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>

四测试

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

chengqiuming

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
阿里云视频播放器

一视频播放器参考文档：https://help.aliyun.com/document_detail/125570.html?spm=a2c4g.11186623.6.1083.1c53448blUNuv51 视频播放器介绍阿里云播放器SDK（ApsaraVideo Player SDK）是阿里视频服务的重要一环，除了支持点播和直播的基础播放功能外，深度融合视频云业务，如支持视频的加密播放、安全下载、清晰度切换、直播答题等业务场景，为用户提供简单、快速、安全、稳定的视频播放服务。2 集成视
复制链接

扫一扫