贝斯特游戏大厅官网入口
菜单类

变序视频变换

最新更新日期:Oct-31-2023

概述

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

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

还有一些特殊选项可供转换和提供视频内容使用举例说,你可以调整它们的大小、形状、速度、持续时间、质量和外观还有一些特性是音频文件所特有,并按原样上传到云内视频播放资产类型

本节向您介绍回文视频流换基础知识视频转换功能全细节见视频转换并变换URLAPI引用.

上页:

评分本页 :

并见:反应图像变换

视频转换功能

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

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

视频元素

可指定变换使用视频播放元素自动生成HTML5视频标签,包括网络浏览器支持的主要格式的URL源webm网站,mp4并Ogv并用图文缩图自动生成这使浏览器自动选择并播放它支持的视频格式视频文件先由用户访问时动态创建

同化图像显示构件中可选包含变换标签定义链式变换

举个例子

React
<Video cloudName="my_cloud" publicId="watchme">
  <Transformation overlay="text:arial_60:watchme" gravity="north" y="20" />
</Video>

将通过 React编译到 :

Html
<video>
  <source src="https://res.www.aaaalireno.com/my_cloud/video/upload/g_north,l_text:arial_60:watchme,y_20/watchme.webm" type="video/webm">
  <source src="https://res.www.aaaalireno.com/my_cloud/video/upload/g_north,l_text:arial_60:watchme,y_20/watchme.mp4" type="video/mp4">
  <source src="https://res.www.aaaalireno.com/my_cloud/video/upload/g_north,l_text:arial_60:watchme,y_20/watchme.ogv" type="video/ogg">
</video>

也可以添加非转换参数视频播放构件如资产版本、配置参数和HTML5视频标签属性

细节见视频标签文档和HTML5视频播放器博客文章

音频元素

可使用视频文件提供上传音频文件(或视频文件音频组件)音频播放元素自动生成HTML5音频标签,包括网络浏览器支持的主要格式的URL源mp3,华夫市并欧格)这使浏览器自动选择并播放它支持的音频格式音频文件先由用户访问时动态创建同化图像显示构件中可选包含变换标签定义链式变换更多细节见音频变换文档记录

音频元素中还包含下列属性:

  • 源类型- 音频格式支持,例如:源端Types+++++++3
  • sourceTransformation- 可对每种格式应用变换方式单独支持,例如:source Transformation+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
  • 后退文本出现时HTML音频标签不支持,例如:反弹=无法播放音频
  • 控件- 并想显示音频控件,例如:控件

提供2秒Wav和mp3格式的dog音频文件,卷数分别为30和45,并包括控件和回发消息:

React
<Audio cloudName='my_cloud'
    sourceTypes={['wav', 'mp3']}
    publicId='dog'
    controls
    fallback="Cannot play audio"
    sourceTransformation={{
      wav: {effect: "volume:30"},
      mp3: {effect: "volume:45"}
    }}>
  <Transformation duration="2"/>
</Audio>

将通过 React编译到 :

Html
<audio controls>
  <source 
     src="https://res.www.aaaalireno.com/my_cloud/video/upload/du_2/e_volume:30/dog.wav" 
     type="audio/wav">
  <source 
     src="https://res.www.aaaalireno.com/my_cloud/video/upload/du_2/e_volume:45/dog.mp3" 
     type="audio/mp3">
  Cannot play audio
</audio>

引用HTML视频元素

想要引用HTML下端元素视频播放组件传递内置Ref参数视频组件允许访问视频元素属性 并使用本地视频元素函数控制视频元素

React
let myRef = React.createRef();

// and then in render()
<Video
  innerRef={myRef}
  publicId="sample"
  cloudName="demo"
/>

// to control the video element

someFunction(){
  const video = myRef.current; //get the video element
  video.play();
  video.pause();
  console.log(video.currentSrc);
}

视频转换实例

本节提供实例使用React代码应用上一节中提及的一些视频变换特征

实例1:

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

React
<Video cloudName="demo" publicId="dog" controls="true" >
  <Transformation width="0.4" angle="20" />
  <Transformation overlay="cloudinary_icon_white" width="60" opacity="50" gravity="south_east" y="15" x="60" />
</Video>

实例2

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

React
<Video cloudName="demo" publicId="ski_jump" controls="true" >
  <Transformation overlay="video:ski_jump" flags="splice" effect="reverse" />
  <Transformation overlay="video:ski_jump" flags="splice" effect="accelerate:-50" />
  <Transformation effect="brightness:10" radius="max" />
</Video>

实例3

下例生成视频,前10秒会持续循环使用HTML5视频播放器并带默认控件视频使用斜板裁剪法裁剪360X480,并按70%质量生成以控制文件大小,为不支持HTML5浏览器定制回发消息

React
<Video 
  publicId="dog" 
  fallbackContent="Your browser does not support HTML5 video tags." 
  controls="true" 
  loop="true">
  <Transformation crop="pad" height="360" width="480" quality="70" duration="10"  />
</Video>

以上语句将编译为

Html
<video controls="controls" height="360" loop="loop" poster="https://res.www.aaaalireno.com/demo/video/upload/c_pad,h_360,w_480,q_70,du_10/dog.jpg" width="480">
  <source src="https://res.www.aaaalireno.com/demo/video/upload/c_pad,h_360,w_480,q_70,du_10/dog.webm" type="video/webm" />
  <source src="https://res.www.aaaalireno.com/demo/video/upload/c_pad,h_360,w_480,q_70,du_10/dog.mp4" type="video/mp4" />
  <source src="https://res.www.aaaalireno.com/demo/video/upload/c_pad,h_360,w_480,q_70,du_10/dog.ogv" type="video/ogg" />
  Your browser does not support HTML5 video tags.
</video>

反馈发送