grain-Edu-Note part16 aliyun视频点播组件扩展跑马灯

最新推荐文章于 2023-03-19 23:27:43 发布

原创最新推荐文章于 2023-03-19 23:27:43 发布 · 547 阅读

0 ·

CC 4.0 BY-SA版权

实战笔记专栏收录该内容

27 篇文章

订阅专栏

此博客展示了如何在阿里云视频播放器中使用扩展组件来实现滚动字幕功能。通过引入`aliplayercomponents.min.js`和`aliplayer-min.js`库，创建阿里云播放器实例，并在配置中添加BulletScreenComponent组件，设置滚动字幕的文本、样式和位置。示例代码详细说明了每一步操作，适合需要在视频中添加自定义字幕的开发者参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

扩展组件

<script charset="utf-8" src="https://player.alicdn.com/aliplayer/presentation/js/aliplayercomponents.min.js">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>aliyun_player_pro</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> 
        var player = new Aliplayer({
            id: 'J_prismPlayer',
            width: '100%',
            height: '500px',
            source: 'https://outin-9f83bb9b0d0511eb869800163e1c955c.oss-cn-shanghai.aliyuncs.com/b0212854e00645f9ba83a431dbe232ac/2f52182b82744f40be3f009a4fd64bb2-98033e8c84be1e890a3784e5cdfd54f8-fd.mp4?Expires=1602583916&OSSAccessKeyId=LTAI8bKSZ6dKjf44&Signature=FcD0%2BODAcgJQcetHpxJ2lE28ANY%3D',
            components: [{
            name: 'BulletScreenComponent',
            type: AliPlayerComponent.BulletScreenComponent,
            /** Descriptions of the scrolling text component parameters: text, style, bulletPosition 
            * text: The scrolling text
            * style: The style of the scrolling text
            * bulletPosition: The position of the scrolling text. Valid values: 'top', 'bottom', and 'random'. The default is 'random'.
            */
            args: ['欢迎来到谷粒学院', {fontSize: '16px', color: '#00c1de'}, 'random']
            }]
            // 播放配置
        },function(player){
            console.log("播放器创建好了。")
        });
    </script>
</body>
</html>