随着视频越来越受欢迎，云服务器网站，尤其是在社交媒体上，确保你的视频不再是人们过去浏览过的几百个视频中的一个，这一点和以往一样重要。在过去的几年里，人工智能技术发展，已经有一些成功的技术来帮助解决这个问题，比如-覆盖一个进度指示器，以便用户在没有显示控件时可以看到视频长度。增加品牌覆盖物，以吸引注意力和聚光灯你的公司。显示字幕，这样就可以在没有声音的情况下观看视频。Cloudinary现在可以帮助您自动化和构建这些任务，这样您就可以向您的用户大规模地提供吸引人的社交视频体验。Cloudinary为它的开发者提供了一些简单的方法来实现令人印象深刻的覆盖和流畅的字幕。我们现在添加了最后一块拼图与我们的新的progressbar效果。既然你是在Cloudinary的动态视频平台上制作视频，为什么不利用先进的人工智能功能（如自动内容感知裁剪）来确保它可以以正确的纵横比发布到社交媒体平台上，云服务器那个好，同时保持所有最佳内容的拍摄？下面是一个示例视频，其中包括-进度指示框自动生成的字幕品牌覆盖物通过内容感知裁剪，大数据传输，基于人工智能的尺寸调整到不同的纵横比这篇文章向您展示了如何自动创建与上面一样的视频（在本例中使用NodeJS SDK），这样您就可以轻松地产生自己的吸引人的体验，并让那些不停的滚动条停在您的视频上。第一步-让我们进行一些改进Cloudinary社交视频库中最新的功能是progressbar效果。在过去的几年里，社交媒体平台的视频体验不断发展，因此我们都习惯于视频滚动到视图中时自动播放，通常在与视频交互之前不显示任何控件。虽然这是一个增加浏览量的好方法，但是如果你的用户不知道一个视频可能会持续多久，他们可能会继续滚动。为了给用户一个简单的方法来了解一个没有控制的视频会占用他们一天多少宝贵的时间，内容创造者已经开始在视频的底部或边框上覆盖一个进度指示器。这是一个很好的方式来激励用户观看到最后，如果他们能看到视频不会继续下去很长。它添加带有Cloudinary的进度指示器覆盖非常简单-无需计算；只需添加progressbar效果（url中的e_progressbar），Cloudinary就完成了所有繁重的工作。默认情况下，这将添加一个10px宽的红色进度条，如下例所示显示：URLNode.jsAllURL：复制到clipboardhttps://res.cloudinary.com/demo/video/upload/e_progressbar/digital-asset-management-with-cloudinary.mp4Node.js：复制到剪贴板云数据库.video（"数字资产管理与云数据库"，{effect:"progressbar"}）视频播放器加载。播放VideoPlayUnmute当前时间0:00/持续时间0:00已加载：0%流类型LIVESeek直播，当前正在播放LiveLiveMaining时间-0:00播放速率1xChaptersChaptersDescriptionsOff，选择captions captions settings，数据建模，打开字幕设置对话框captions off，selectedAudio TrackFullScreen这是一个模态窗口。开始对话框窗口的。Escape将取消并关闭window.textColorWhiteBlackRedGreenBlueYellow品品青色透明不透明半成品-透明透明背景色黑色白色绿色蓝色黄色洋红色黑色透明不透明半透明半透明半透明半透明透明透明透明色半透明半透明半透明半透明半透明半透明半透明透明色半透明透明色蓝色蓝色黄色紫色紫色黑色透明透明色半透明透明色半透明透明色白色透明透明色白色透明绿色绿色绿色绿色黄色紫色紫色黑色透明透明色半透明半透明透明色透明色透明色透明色透明色%FpsSeriodOneServied100%FamilySeriodNational150%FfsSeriodUnseriodNational150%FamilySeriodNational150%FsSeriodNational150%FsSeriodNational150%FsSeriodNational设置窗口。下一个上一页下一页：.cld-video-player-vjs_视频_586{颜色：f50a；}.cld-video-player-vjs_video_586.vjs时间工具提示，.cld-video-player-vjs_video_586.vjs鼠标-显示：之后,.cld-video-player-vjs_video_586.vjs播放-进度：之后{颜色：#ffffffff；背景色：0E2F5A；}.cld-video-player-vjs_video_586.vjs滑块{背景色：rgba（0，120，255，0.3）；}.cld-video-player-vjs_video_586.vjs加载进度，.cld-video-player-vjs_video_586.vjs加载进度div{背景：rgba（0，120，255，0.2）；}.cld-video-player-vjs_video_586.vjs音量，.cld-video-player-vjs_video_586.vjs播放进度{背景：0078FF；}.cld-video-player-vjs_video_586.vjs音量垂直{背景色：rgba（255、255、255、0.7）；}.cld-video-player-vjs_video_586.vjs音量面板水平.vjs-控制：之前{边框颜色：透明透明rgba（0，120，255，0.4）透明；}.cld-video-player-vjs_video_586.vjs音量面板水平.vjs音量-级别：之前{边框颜色：透明透明#0078FF透明；}.cld-video-player-vjs_video_586.vjs标题栏{颜色：f50a；}.cld-video-player-vjs_video_586.vjs建议覆盖{颜色：f50a；背景色：rgba（255、255、255、0.4）；}.cld-video-player-vjs_video_586.vjs建议覆盖。vjs建议覆盖项{框影：0 0.5em 1.2em 0px#ffffffff；颜色：f50a；边框：1px实心Š0E2F5A！重要的；职位：亲属；}.cld-video-player-vjs_video_586.vjs建议覆盖。vjs建议覆盖-项目：活动,.cld-video-player-vjs_video_586.vjs建议覆盖。vjs建议覆盖-项目：悬停{边框：1px实心#0078FF！重要的；}.cld-video-player-vjs_video_586.vjs上下文菜单ui.vjs菜单内容.vjs菜单-项目：活动,.cld-video-player-vjs_video_586.vjs上下文菜单ui.vjs菜单内容.vjs菜单-项目：悬停{颜色：f50a；背景色：#0078FF；}.cld-video-player-vjs_video_586.vjs-ad-playing.vjs进度控制.vjs播放进度{背景：#ffffffff；}.cld-video-player-vjs_video_586.cld-plw-layout{背景色：#ffffffff；}.cld-video-player-vjs_video_586.cld plw项目信息包装{颜色：f50a；}.cld-video-player-vjs_video_586.cld plw面板项目{边框颜色：#0E2F5A；}.cld-video-player-vjs_video_586.cld视频播放器浮动框闭合多边形{填充：#ffffffff；}.cld-video-player-vjs_video_586.cld spbl产品-热点：之后{背景：#ffffffff；盒影：0 0 0 4px#0078FF，0 0 0 8px rgba（14，47，90，0.24）；}.cld-video-player-vjs_video_586.cld spbl产品工具提示{颜色：#ffffffff；背景：0E2F5A；}.cld-video-player-vjs_video_586.基色半bg{背景：rgba（255，255，255，0.7）；}.cld-video-player-vjs_video_586.文本颜色半bg{背景：rgba（14,47,90,0.7）；}.cld-video-player-vjs_video_586.文本颜色文本{颜色：f50a；}.cld-video-player-vjs_video_586.基本颜色文本{颜色：#ffffffff；}.cld-video-player-vjs_video_586.强调色文本{颜色：#0078FF；}.cld-video-player-vjs_video_586.vjs标题栏{弯曲方向：row；对齐内容：左；高度：3.6em；背景：#ffffffff；}.cld-video-player-vjs_video_586.vjs标题栏div{宽度：自动；填充：0继承；余量：0；}.cld-video-player-vjs_video_586.cld-video-player-skin-light.基色bg，.cld-video-player-vjs_video_586.cld-video-player-skin-light.vjs控制栏，.cld-video-player-vjs_video_586.cld-video-player-skin-light.vjs大播放按钮，.cld-video-player-vjs_video_586.cld-video-player-skin-light.vjs菜单按钮.vjs菜单内容{背景色：#ffffffff；}.cld-video-player-vjs_video_586.vjs建议覆盖。vjs建议覆盖-项目.vjs-建议覆盖项主要内容{背景色：#ffffffff；}.cld-video-player-vjs_video_586.vjs建议覆盖。vjs建议覆盖-项目.vjs-建议覆盖项-主要：active.vjs建议覆盖项主要内容,.cld-video-player-vjs_video_586.vjs建议覆盖。vjs建议覆盖-项目.vjs-建议覆盖项-主要：hover.vjs建议覆盖项主要内容{颜色：#ffffffff；背景色：rgba（0，120，255，0.8）；}.cld-video-player-vjs_video_586.vjs建议覆盖。vjs建议覆盖-项目.vjs-建议覆盖项-辅助：活动div,.cld-video-player-vjs_video_586.vjs建议覆盖。vjs建议覆盖-项目.vjs-建议覆盖项-次要：悬停div{颜色：#ffffffff；背景色：rgba（0，120，255，0.8）；}.cld-video-player-vjs_video_586.vjs建议覆盖。vjs建议覆盖-项目.vjs-建议覆盖项目二级分区{背景：#ffffffff；}.cld-video-player-vjs_video_586.vjs即将推出的视频{边框：1px实心#0E2F5A；}.cld-video-player-vjs_video_586.vjs即将到来的视频.vjs即将到来的视频栏{背景色：#ffffffff；}.cld-video-player-vjs_video_586.vjs上下文菜单ui.vjs菜单内容{背景色：#ffffffff；}.cld-video-player-vjs_video_586.cld plw项目信息包装{颜色：f50a；}@仅媒体屏幕和（最大宽度：768px）{.cld-video-player-vjs_video_586.cld-plw-vertical.cld-plw项目信息包装{颜色：#0078FF；}}您可以轻松地自定义进度条以满足您的需求。有三个参数可用：类型控制要覆盖的进度指示器的类型，可以是条形图或边框。颜色控制指示器的颜色。宽度控制指示器的宽度（以像素为单位）。下面是一个略薄的橙色框架的示例效果：URLNode.jsAllURL：复制到clipboardhttps://res.cloudinary.com/demo/video/upload/e\u progress