币游国际平台

视频播放器定制

最新更新:Jan-10-2024

可使用云化定制选项以多种方式定制视频播放器,或选择使用视频JSAPI.

小技巧
使用iFrame很容易定制并嵌入视频播放器 云式视频播放器工作室.

视频播放器视觉

描述全局性可改变视频播放器的外观和感觉皮肤主题并/或控制颜色图案.

注解
所有变换使用JavaScript语法查看剩余文档变换示例时,可修改JS标签显示遗留代码示例

皮肤主题

默认视频播放器有半透明暗主题主题选择控件视频播放器控件颜色、控制背景颜色、标题样式以及右键上下文菜单命令和中心播放按钮颜色可添加类来改变主题外观 :cld-video-player-skin- 视频标签举个例子, 指定光主题时, 将它包含进您的内 标签 :

颜色方案

想要更多控制播放器颜色图案,可使用颜色显示构造器参数

设置播放器颜色方案时,需要指定三种颜色(像hex值)用于基础,口音调文本翻译:

  • 上头基础颜色用于视频播放器控件栏和信息栏中心播放按钮和右键上下文菜单使用
  • 上头口音调颜色用于查找栏量控件和加亮UI交互作用,例如悬停菜单项
  • 上头文本翻译颜色用于视频播放器UI内所有文本和图标

可配置颜色图案作为 标签 :

或使用 JavaScript构造参数

举个例子说明自定义玩家使用云色图案自定义标识

注解
上头 皮肤主题设置会影响颜色方案显示方式测试颜色图案双向皮肤主题以确保实现期望输出

配置选项

多配置选项可设置为视频标签或jaavaScript

本节覆盖:

常用配置示例

下示例突出显示视频播放实例配置时你可能想使用的一些可用选项

定义视频变换

定义视频播放实例变换下示例显示简单裁剪

  • 标签 :
  • 视频层:

也可以对单视频应用变换方式,在设置时包括变换videoPlayer.source:


视频变换信息见

自定义查找栏功能

标准视频播放器寻栏有另外两个配置选项可用增强用户经验

  • 查找缩略图向用户预览即将到来的内容并同时寻找视频默认启动此功能禁用它设置构造器参数虚伪.
  • AI基础高亮图显示视频亮点可视化表示法基于我们的AI预览算法如何判定视频每一部分的兴趣水平要启动此功能,设置aiHighlightsGraph构造器参数真实性.

简单例子显示两个特征漫游寻宝栏查看缩略图和图

重要点

两种特征都使用场景后的额外云性功能,即启动时消耗更多变换更多信息见变换计数文档查找缩略图AI高亮图.

附加常用配置

其他一些常用配置包括:

  • 设置自动播放模式化例举使用悬浮使视频开始播放时半数以上播放器可见屏幕
  • 设置专用图像为视频招贴画,包括应用图像变换上标图像
  • 添加浮动播放器时小半播放器可见屏幕可设置底部显示左转右转并包括关闭按钮
  • 定义首选集视频源类型.默认玩家使用自动格式选择选择基于用户设备浏览器的最优文件类型
  • 自定义视频播放器字体显示.字体应用到标题、描述、建议、计时器等
视频标签中:
视频层法构建参数

以上只是几个常用选项详情所有可用选项见视频播放器配置选项段内视频播放器API引用.

并见云式视频播放器样本显示多位配置设置

默认配置行为

高标准HTML5视频属性自动播放,循环式,预加载,静音等)保留标准默认行为汽车模式为预加载以虚伪报众人)。

默认时视频播放器自动使用视频中间图像作为招贴图片 视频/ / .jpg )可指定不同的公共标识和/或图像变换招贴选择高山市data-cld-poster-options)设置

默认时,当播放器请求视频时,它会自动请求默认源类型中最优格式.webm,.ogg.mp4)如果定义的变换已经存在 请求源类型,它交付否则相关变换即时转码流可使用默认格式选项源类型高山市data-cld-source-types)设置

配置优先级

可设置变换和数个其他配置 标签或内视频层实例化两种情况都定义所有视频源都适用的默认值JavaScript设置优先级

泛泛地说,如果为特定视频源设置相同的配置参数,这些值优于播放器并行设置值

变换定义合并举例说,你可以定义播放器层次的宽度、高度和文本叠加变换,然后对特定视频源应用某些特殊效果变换生成视频将包含所有上述变换

云化自动布局模式高山市data-cld-autoplay-mode相似标准HTML5自动播放参数,但包括额外可能的值不应该将两个设置都包含到播放器中,但如果你加入,云自播放模式设置优先级

视频标题、字幕和描述

视频标题、字幕和描述可帮助向观众快速提供视频信息信息显示方式如下:

  • 标题和字幕显示在视频播放器顶部
  • 标题显示播放列表缩略图播放列表部件或下拉预览
  • 标题字幕描述显示推荐建议启动标题显示剩余建议
  • 如果标题不定义以上任何内容,则代之以视频公开标识码如果字幕或描述没有定义,则不显示这些元素

举例说,下文建议全屏显示标题、字幕描述主推荐视频和剩余建议标题

视频推荐板上标注标题和描述

可直接添加标题、字幕和描述视频资产上下文值使用上传上下文方法上传API或媒体探索者

注解
使用媒体探索者添加值时,应增值 自定义元数据中键定义 标题显示, 字幕编程描述性.默认值 标题(标题)描述解析元数据标签显示字段不为视频播放器使用

也可以定义源级标题、字幕和/或描述

  • 标签 :
  • 对a视频层源码 :

if信息库参数为源设置,值覆盖资源上下文并行项

字幕和字幕

可添加字幕和字幕微信视频格式为视频播放器单文本轨迹允许视频播放时上下跳动if you're looking自发生成笔录并用作字幕和字幕使用,Google AI视频纹理插件微软Azure视频索引.

添加文本轨迹时设置文本轨迹参数源级使用视频Player JavaScript

上头文本轨迹参数指包含所有文本轨迹信息对象可同时配置音轨字幕编程标题说明.

每一文本轨设置下列参数:

  • 标签标签- 标签显示菜单时闭合标题,例如英文版
  • 语言类语言代码表示字幕语言,例如内
  • 默认布林视频加载时是否默认显示标题 。
  • URL链路连接微信文件标题使用可上传微信文件云化原始文件.

举个例子设置字幕和字幕视频层源码 :

缓冲字幕

控制字幕和字幕步调,定义每个字幕框架最大字数缓冲字幕通过生成云化笔录文件并添加最大 words参数转轨配置使用Google AI视频传输附加创建适当的云记录文件供视频使用

举例说,将字数限制为2

注解
  • 何时最大 words定义式播放器自动尝试使用.transcript文件公开标识与视频相同 .transcript )默认命名笔录文件google AI
  • 最大 words可定义字幕和字幕轨迹
  • 翻译不支持节奏字幕

可视化定制

配置标题和字幕视觉外观时,增加一些选项文本轨迹配置问题可定义 :

  • 框内定义文本框的大小和位置
  • 重力确定文本轨迹放在哪里视频
  • 字体脸孔匹配你的品牌
  • 字体大小控制分级
  • 风格化应用自定义CSS样式文本
  • 主题化等类玩家颜色反射颜色图案定义性

全文见选项视频播放器参考.

例子显示各种选项应用

视频章节

视频章节提供视频不同段的信息并允许快速导航这些段视频播放器将更新显示查找栏上的章节标记,章节标题将显示控制栏中您可以通过VTT文件或人工通过章次配置对象上头章次可定义视频源或构造参数创建玩家实例分页定义有两种方式:

  • 使用VTT文件:使用下文显示VTT命名协议或提供VTT文件的URL内含章节信息可创建您的文件上传云文件或使用章编辑器生成文件
  • 使用章节对象:直接定义章节对象中的章节,将起始时间秒定为密钥,章节标题定为对应值

使用VTT文件设置章次参数切换真实性中查找文件使用下列命名规范

举个例子 视频公开识别老相机VTT文件old_camera-chapters.vtt将引用 。


或选,你可以设置章次参数对对象带URL参数集至VTT文件URL

VTT文件应使用WebVT格式VTT文件样本

手动集章可以在分页对象中定义键表示启动时间秒数,值表示章节标题例举 :

可选择性地显示按钮显示可用章节列表控件栏构造器参数并设置章按钮参数真实化

完整例子显示从 VTT文件添加章节并显示章节按钮

章编辑器

定义、编辑或上传分页使用视频播放器Studio.从章次片场段有以下选项:

  • 上传VTT文件上传章节VTT文件并应用到所选视频
  • 手动更新章节手动定义选择视频的章节名称和时间戳默认情况下,章节将使用预览窗口中当前寻宝栏时间添加章会添加到新VTT文件并随视频上传,你可以看到代码窗口中如何引用

章编辑器

低级定制视频.js

云视频播放器建在ViewJS播放器V8上可访问视频JSAPI所有底层能力videoPlayer.videojs.default属性

注解
  • 前几版云视频播放器使用视频JSAPIvideoPlayer.videojs.VideoJSAPI修改后,你现在必须更新这些引用videoPlayer.videojs.default.
  • 添加视频自定义会在未来版本云式视频播放器发布时引起冲突升级视频播放器前, 验证您的定制工作是否正常很重要 。

全部可用功能详解见ViewJS播放器API文档.

反馈发送

评分本页 :