最新更新日期:Oct-31-2023
本段引导你跨步嵌入自托管机和云托管机视频播放机,设置视频播放机播放自云产品环境视频,并自托管机播放机应用常用视频播放器方法属性
嵌入基本视频播放器
自托管播放器
嵌入自托管播放器使用云视频播放器 JavaScript库比使用云托管播放器.并需要库输入网站或应用使用视频播放器库可增强播放器控件并重播我们建议使用这种嵌入法,如果你有多玩家实例、需要程序控制回播事件或有高级定制需求
开工包含视频播放器和JavaScriptSDK相关CSS和JS文件
视频播放器包可用标准光包变换方式,每种变换方式均可分解或非最小化格式并需要JavaScript云芯库里视视频播放器特征而定,你还可能需要添加文件
unpkk.com标准分解包
全部选项详解见安装搭建
二叉嵌入视频播放器通过视频播放器类添加视频标签元素
创建视频标签至少带cld-video-player
类和标识符
值.也可以包括标准HTML5视频播放器属性
3级验证云视频播放器
使用视频播放器证明视频层
或传递视频元素本身可选添加构造器参数设置全局配置
或
云视频播放库使用你至少需要配置云化Name
.可额外定义数选配置参数.举个例子,如果你高级计划用户私用CDN自定义CNAME可设置私有Cdn
置真并配置名码
参数匹配搭建这将确保视频播放器使用正确的 URL提供视频
立置配置参数同时即时新玩家,例如:
或私有CDN自定义分发
视频播放器版本早于1.9.15
,配置参数包括云名必须写进蛇盒文档中所有例子现在使用 shealCase与视频播放器其余选项一致蛇案例会继续支持,然而你必须升级视频播放器版本至至少1.9.15
if you wish使用任何 shealCase示例
if you plan包含多玩家页面同配置使用视频层
方法论举例说,您可以为每种视频公共标识码指定不同的视频公共标识码
标签上在这种情况下,没有必要定义标识符
属性表示
可锁定标签cld-video-player
类中和即时单播放器一样,可选添加构造器参数.
4级指定视频播放和可选播放器配置
可指定视频播放,变换应用,并附加数配置
标签或构造参数视频层
方法论这些配置和变换应用视频播放器本身, 并因此应用到视频播放器内所有视频源
可额外指定一些选项,例如视频公共标识或视频URL、视频变换和图片源/视频源videoPlayer.source
或数据焊接源
属性中
标签),并设置不同的值这些选项
最优交付时,您还可以定义源类型,由播放器使用可包括先进格式编解码器和编解码器组合自适应比特率流格式化播放器将尝试先播放源类型并回溯后发格式帮助提供最优视频传送取决于浏览器和装置
面向
标签,所有特殊云式视频播放器配置数据焊接
前缀标准HTML5视频属性按例指定
例1:定义公共标识 :
实例2:在视频Player方法中指定公共标识:
例3:在视频Player方法中指定视频为URL:
实例4:指针多源类型:
关于其他配置细节可设置见配置选项并视频播放器API引用.
最佳性能建议
嵌入自托管播放器时,可以多种不同方式嵌入并配置其中一些提供比另一些提供更好的性能以下是一些建议 如何嵌入播放器 最优性能
- 使用光线非自适应比特率流学 视频广告或可购物视频功能
- 保证页面加载视频播放库和HTML如下最优排序:
- 视频播放器样式表
- HTML视频元素
- 云式核心视频播放器JavaScript库
- JavaScript配置视频播放器
- 使用
sld浮点
响应式播放器分级类JS配置法应用此方法防止不想要的玩家重定位
下方简单示例说明你应如何组织视频播放器代码使用上方建议
视频教程:嵌入视频播放程序
观看视频教程学习如何嵌入视频播放程序
教程内容
云托管播放器
云托管播放器使用iframe为页面添加玩家实例玩家本身由云型托管并易配置定制可设计配置您的玩家使用云式视频播放器工作室后拷贝并粘贴它为您生成的iframe代码或可手动配置iframe代码,概述如下如果您不想自己托管视频播放器并想将个人预配置视频播放器添加到网站或应用程序中,
视频播放器iframe代码外观简单例子
如何编译自己的云托管播放器
开工添加iframe到页面或应用
添加元素登录网页或应用程序For example:
2.src属性设置为您的云式视频播放器配置 set src
属性ifer使用云视频播放器服务URL并编码参数. /https://player.cloudiary.com/embed/嵌入器使用时,必须转换成蛇封For example
showLogo
becomes show_logo
.
Required parameters
Param | Type | Description |
---|---|---|
cloud_name | String | The cloud name for your Cloudinary product environment. |
public_id | String | The Cloudinary unique identifier for the video. |
Optional parameters
Param | Type | Description |
---|---|---|
cloudinary | Object | The Cloudinary product environment-specific configuration parameters to apply. |
player | Object | The configuration for the player itself, including the player visuals and behavior. |
source | Object | The configuration to apply to the video source. |
vpv | String | The version of the Cloudinary video player to use. |
The simplest way to construct your URL is to build your parameters as a single string and append it to the embed URL, for example:
This will give you the following URL to set as the src
of your iframe:
https://player.www.agrosoland.com/embed/?cloud_name=demo&public_id=elephants&vpv=1.4.0
Here's an example of building the configuration as an object before stringifying it and appending to the embed URL:
This will give you the following URL to set as the src
of your iframe:
https://player.www.agrosoland.com/embed/?cloud_name=demo&public_id=elephants&cloudinary%5Bcname%5D=myCname&player%5Bloop%5D=true&source%5Bsource_types%5D%5B0%5D=mp4%2Fh265&source%5Bsource_types%5D%5B1%5D=mp4&source%5Btransformation%5D%5B1%5D%5Bquality%5D=auto
The full HTML code for the iframe using the above URL will be:
3.设置附加ifram属性
可添加iframe元素支持的任何HTML属性下方属性我们推荐设置:
- set
brame边界=0'
Alternatively, you could configure this using CSS by settingborder: 0;
for your iframe. - Set the
width
andheight
attributes to control the size of the video player. - Set the
allow
attribute to allow the relevant video player functionality, for example if you want to allow the video to be played in fullscreen or play automatically.
For example, to set your iframe to a width of 500 pixels, remove the border and allow autoplay and fullscreen:
Video tutorial: Embed the Video Player in HTML
Watch this video tutorial to learn how to embed the Video Player in an HTML document or app:
Tutorial contents
'common_View_player_methods_For example, you can retrieve or change the video source that is playing, jump to a specific place in the video, activate video control operations like play, pause, stop, play next or previous, mute/unmute, adjust volume, maximize, and more.Here are a few simple examples:
-
Set the player volume:
-
Mute the player:
-
Jump to the middle of a video:
All video player methods and properties
To view the code for a video player with a set of custom control buttons based on the video player methods, see api.html
in the sample CodePen.
For details and code examples for all available video player operations, see the video player methods and playlist operations in the Video Player API Reference.
Eagerly generating video player URLs
When embedding the video player in your web or mobile application, you can use of a number of configuration parameters to control how your videos look and how they are delivered to your end users.云视频播放器本身也将应用某些默认传送格式以确保最优化性能和广浏览器支持结果,交付时使用URL往往包括某些变换大型视频超文件尺寸限制转换飞视频(40MB免费计划,100MBdsdata-pop=true'href='https/www.agrosoland.com/pricing'>付费计划 )时,你需要确保热切生成匹配配置的右URLs表示视频播放器使用dcodevp9 编解码在此假想中,如果原文件为 mp4
和文件尺寸超出实时限值,则不生成 webm
版本,播放器需要回溯到不最优版解决之道,您可确保上传视频时 #full_example>>>Full例子 This is followed by the code required to eagerly generate the matching derived versions of each video.
Simple video player html:
Video player JavaScript configuration:
The configuration above will generate three delivery URLs, one for each of the defined source types and all three including the transformations we have defined:
https://res.www.agrosoland.com/demo/video/upload/bo_5px_solid_black,e_vignette/vc_vp9/my-video.webm
https://res.www.agrosoland.com/demo/video/upload/bo_5px_solid_black,e_vignette/vc_h265/my-video.mp4
https://res.www.agrosoland.com/demo/video/upload/bo_5px_solid_black,e_vignette/my-video.mp4
Here's how to upload your videos with the relevant transformations:
The example code above processes the eager transformations asynchronously and sends a notification to the defined URL once complete and ready for delivery.
Rather than defining the required eager transformations in your code, you could make use of upload presets instead, allowing you to define the matching eager transformations once and use this for all uploads.币游国际真人娱乐This means that if you need to change your video player configuration, you would only need to update your upload preset configuration and your code would still generate the correct URLs.
You can create your upload preset using the Cloudinary console or alternatively you can do this programmatically.
Once you have your upload preset, you can use it with your upload code as shown below.
- Customize your video player
- Learn more about the video effects and transformations you can apply to your videos
- Deliver your videos using HLS or DASH adaptive bitrate streaming formats
- Define playlists and set up video recommendations
- Check out all the video player options in the Video Player API Reference