组件开发

更新时间:2025-01-24 06:11:00

本文主要介绍了Web播放器SDK组件的使用。

内置组件

说明
  • 组件源码在Github开源提供,您可以进行二次开发、构建使用,具体构建指引请参考项目说明

  • 组件功能演示请参见功能演示

  • 移动端浏览器可能劫持Web播放器SDK播放视频的行为,导致部分功能不可用。

  • Web播放器SDK的常用组件存放在GitHub上供用户下载,GitHub属于第三方搭建的网站。访问该网站时,可能存在部分用户无法打开网站或访问延迟的问题。

记忆播放

自动记忆用户上一次播放的视频位置,记忆播放组件分两种,一种点击播放(会提示用户上次播放的位置,用户可以点击seek),另一种是自动播放(自动seek到上次播放位置)。更多信息请参见记忆播放组件

说明

记忆播放组件使用localStorage记录播放位置,不支持localStorage的浏览器将不生效。

播放器动态水印(ID跑马灯)

根据终端用户特性,将ID等信息以文字水印的形式展示在视频画面上,震慑侵权行为。用户可以自定义文字水印出现的位置,文字颜色和字体大小。更多信息,请参见跑马灯组件

开始广告(图片)

视频即将开始播放时显示的图片广告。更多信息,请参见开始广告组件

暂停广告(图片)

暂停视频时在播放器的中间显示图片广告。更多信息,请参见暂停广告组件

多视频广告

在视频即将播放时,实现多视频广告。更多信息,请参见多视频广告组件

播放下一个

Web播放器SDK的控制条上添加播放下一个视频按钮,按钮的点击事件用户可以自定义并作为组件参数传入。更多信息,请参见播放下一个组件

播放列表

Web播放器SDK控制条上增加视频列表,视频切换的按钮,并在播放器上显示视频列表。更多信息,请参见播放列表组件

旋转和镜像

Web播放器SDK控制条上添加旋转和镜像按钮,用于视频旋转和镜像变换。更多信息,请参见旋转和镜像组件

视频广告

在视频即将播放时,限时的视频广告。更多信息,请参见视频广告组件

弹幕

说明

本组件集成了CommentCoreLibrary弹幕库,更多信息请参见CommentCoreLibrary文档

在控制条上增加了弹幕关闭和开启按钮,以及发送弹幕的输入框,和发送弹幕的按钮。更多信息,请参见弹幕组件

试看

用于用户试看,试看结束后提示用户,观看完整版的条件。更多信息,请参见试看组件

进度条标记

对视频的关键点进行打点,鼠标移动到关键点时能够查看当前用户设置的图片等标注信息。更多信息,请参见进度打点组件

字幕

用于快速切换不同语言的字幕。更多信息,请参见字幕组件

音轨

用于切换不同版本的音轨。更多信息,请参见音轨组件

引入组件

  1. 引入Web播放器SDK组件。

    <script type="text/javascript"charset="utf-8"src="/aliplayercomponents-1.0.9.min.js"></script>
    说明

    目前没有CDN资源,请将播放器组件下载到本地后引入。下载地址请参见播放器组件下载

  2. Web播放器SDK挂载组件。

    说明

    本文仅提供示例代码,不同组件细节不同,需要具体配置。

    var player = new Aliplayer({
            id: "player-con",
            source: "//player.alicdn.com/video/editor.mp4",
            components: [{
                name: 'xxxComponent',
                type: AliPlayerComponent.xxxComponent
            }]
         }, function (player) {
     });

  • 本页导读 (1)
  • 内置组件
  • 引入组件