Vue.jsSDK视频转换

概述

上传视频云化后,可多方式转换

变换和交付视频语法通常相似图像语法,您也可以将大多数可用图像变换应用到视频中。举例说,您可调整大小、裁剪、旋转、设置视频质量和格式或使用汽车质量和/或汽车格式,在视频中添加文本或图像叠加等

还有一些特殊选项可供转换和提供视频内容使用举例说,你可以调整速度、持续时间、声音和外观还有一些声音特有特征

本节介绍视频转换基础使用@cloudinary/url-gen包化视频转换功能全细节见视频转换并变换URLAPI引用.

Vue.jsSDK尚未安装时,你可能想跳转到快速启动先讲

并见:Vue.js图像变换

视频转换功能

变换特征对图像和视频同样相关,如重定大小、裁剪、旋转、添加文本或图像叠加和设置视频质量或格式等,除此之外,还有各种特殊变换视频可用举例说,您可:

• 转码视频从一个格式到另一个格式
• 应用视频特效退步/退步、加速或减速、调整体积、逆向播放
• 播放视频视频,修剪视频或组合式多视频
• 集成视频播放并音频质量选项,如比特率、视频编解码器、音频采样频率或音频编解码器
• 调整视频视觉语调三维LUTs
• 生成式缩略图或动画化视频图片
• 提供视频使用自适应比特率流HLS或MPEG-DASH

可选择指定所有以上转换视频使用生成图像标签方法或直接URL构建指令

Vue.js视频转换

变换视频资产使用@cloudinary/url-gen包创建变换后传递变换视频对象焊德维德属性输入高级Video组件生成视频例举 :

上例中步行聊天视频裁剪成150x150像素带圆角,聚焦面部,产生视频元素

高级Video属性

上头高级Video构件接受下列属性:

• sldVid属性
• CldPoster属性
• html视频属性
• html媒体事件
• 插件
• 源码

sldVid属性

上头焊德维德属性接受云化Video对象.

CldPoster属性

上头焊德波斯特属性接受云化图对象或云化Video转换成图像格式

例举 :

取视频中心框架为招贴

也可以设置焊德波斯特至汽车选择视频最佳框架作招贴自动机)并应用自动质量q_aut面向图像

html视频属性

上头高级Video组件接受下列属性,产生标准HTML视频播放属性 :

高级Video属性	html视频属性
自动布局	自动播放
控件	控件
循环式	循环式
静音	静音
播放内线	splayin线程
招贴画	招贴画
预加载	预加载

视频内联播放控件循环启动

html媒体事件

上头高级Video组件接受下列属性,产生标准HTML媒体事件属性:

高级Video事件	html媒体事件
无限	无限化
上错误	偏差
LoadStart	加载启动
上打	上场播放
点播	上演

举例说,这段视频调用播放功能函数播放端函数函数结束时 :

插件

懒惰装视频方式与图片方式相同使用懒惰加载插件.

举例说,此视频只有在进视图港时加载,然后自动播放:

源码

可选指定源源码属性,例如:

举例说,这段视频可选择两种源码:

其结果如下视频播放元素 :

直接URL构建

可通过以下方式构建视频URL:

1. 配置云型实例
2. 证明云化Video对象视频使用sld.Viewi.
3. 调用toURL()方法云化Video类返回交付URL

产生URLmyURL表示 :

指定视频提供版本

可指定视频特定版本使用setVersion方法论版本添加到交付URL资产版本.

例举指定版本1510668637大象视频上举例

所生成的 URL现为 :

变换视频

视频转换方式是向视频传送URL添加串行转换指令举个例子,放大视频宽度400像素,添加session, w_400.

https://res.www.aaaalireno.com/demo/video/upload/c_scale,w_400/elephants.mp4

使用@cloudinary/url-gen包上执行一个或多个变换动作转换视频云化Video对象(见语法概述)记住导入操作使用 :

产生URL为:

代码探索者Vue.js视频转换

Vue.js应用中,可见指南通篇使用的所有变换每一个变换示例都有自己的.Vue文件显示导入和语法需求汉堡菜单查看所有文件

代码中也可用GitHub.

视频转换实例

本节提供实例使用@cloudinary/url-gen包应用前段所提到的视频变换特征

实例1:

下示例调整大小大象视频向20%原型大小旋转20度并加半透明右下角云标识,使用东南重力调整xy坐标达旋转视频角

产生URL为:

实例2

下示例调整滑雪视频的亮度, 并设置半径最大度以产生像望远镜效果后转录影带拷贝反转接并重播,但慢动作

产生URL为: