阿里云视频播放器实现弹幕和跑马灯功能

原创已于 2023-03-19 23:28:07 修改 · 1.7k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#音视频

于 2023-03-19 23:27:43 首次发布

文章展示了如何在HTML页面和Vue应用中集成阿里云播放器，并添加弹幕功能。代码示例包括了播放器的初始化、视频源配置以及弹幕数据的设置。在Vue环境中，弹幕列表作为data属性并使用this调用来传递给播放器组件。

直接上代码：

<!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 : 'https://outin-49af16d3c60911edbbf700163e1a65b6.oss-cn-shanghai.aliyuncs.com/sv/53bd40eb-186fa2f7b6f/53bd40eb-186fa2f7b6f.mp4?Expires=1679242073&OSSAccessKeyId=LTAIVVfYx6D0HeL2&Signature=u9NEb5vXVHEvobsO3Px3b0VxoE4%3D',
            cover: 'https://movie-dyb.oss-cn-nanjing.aliyuncs.com/user.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>

效果如下：

如果是vue页面，则把弹幕列表参数放到data中，使用this调用如下：

 const app = new Vue({
        el: '#app',
        data: {
            categoryList: [],
            movie: {},//接收影视详情
            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
            }]
        },
        methods: {
            
            //查询影视详情
            findMovieDetailById(movieId) {
                axios.get('/portal/movie/findById?id=' + movieId).then(resp => {
                    this.movie = resp.data;
                    let player = new Aliplayer({
                        id: 'J_prismPlayer',
                        width: '100%',
                        height: '500px',
                        autoplay: false,
                        controlBarVisibility: 'hover',
                        isLive: false,
                        components: [{
                            name: 'MemoryPlayComponent',
                            type: AliPlayerComponent.MemoryPlayComponent,
                            args: [false, getTime, saveTime]
                        },
                        {
                            name: 'AliplayerDanmuComponent', // 弹幕组件
                            type: AliPlayerComponent.AliplayerDanmuComponent,
                            args: [this.danmukuList]
                        },],
                        cover: this.movie.image,//图片
                        vid: this.movie.playId,//视频id
                        playauth: this.movie.playAuth,//视频播放秘钥
                        encryptType: 1, //是否加密播放
                    }, function (player) {
                        console.log('播放器创建好了。')
                    });
                })
            },
        },
        
    })