6天移动web开发视频教程

This article was originally published on Cloudinary Blog. Thank you for supporting the partners who make SitePoint possible.

本文最初发布在Cloudinary Blog上 。 感谢您支持使SitePoint成为可能的合作伙伴。

Videos in web sites and apps are starting to catch up with images in terms of popularity and they are a constantly growing part of the media strategy for most organizations. This means bigger challenges for developers who need to handle these videos in their web sites and mobile apps. Cloudinary’s here to solve developer needs around image and video management. In this article, we are going to introduce Cloudinary’s complete cloud-based video management solution for developers.

网站和应用程序中的视频在流行度方面已经开始赶上图像，并且对于大多数组织来说，它们是媒体策略中不断增长的一部分。 对于需要在其网站和移动应用中处理这些视频的开发人员来说，这意味着更大的挑战。 Cloudinary的解决方案可满足开发人员围绕图像和视频管理的需求。 在本文中，我们将为开发人员介绍Cloudinary完整的基于云的视频管理解决方案。

Here are just some highlights:

以下是一些要点：

• Video upload API and UI widget – upload your videos directly to cloud storage
  视频上传API和UI小部件–将视频直接上传到云存储
• Programmable and interactive interface for managing video assets
  可编程和交互式界面，用于管理视频资产
• Real-time video transcoding and manipulation via CDN delivery URLs
  通过CDN传递URL进行实时视频转码和处理

• Customizable video player with user engagement analytics (see a demo)

  具有用户参与度分析的可定制视频播放器( 请参阅演示 )

• Live video streaming directly from web and mobile apps (see a demo)

  直接从Web和移动应用程序直播视频流( 请参阅演示 )

• AI based video tagging and transcription
  基于AI的视频标记和转录

网站视频正成为主流 (Website Videos Are Becoming Mainstream)

Videos are now responsible for about 25% of the average download bandwidth of web sites (SpeedCurve analysis). As you can see in the chart below, this reflects a huge growth of about 400% compared to just two years ago. 2017 is definitely the year of video and while <video> didn’t kill the <img> tag and (probably) never will, managing and delivering videos in modern web sites and mobile apps involves growing complexities for developers.

视频现在占网站平均下载带宽的25％( SpeedCurve分析 )。 正如您在下表中所看到的，与两年前相比，这反映了约400％的巨大增长。 2017年绝对是视频之年，尽管<video>并没有杀死<img>标签，并且(也许)永远也不会消亡，但在现代网站和移动应用中管理和交付视频却使开发人员变得越来越复杂。

Video is the fastest-growing element of page real estate. Source: SpeedCurve blog

视频是页面资源增长最快的元素。 资料来源：SpeedCurve博客

When Cloudinary’s service was publicly launched back in 2012, our first mission was to solve image management needs for web and app developers: from uploading images from any device and storing them in the cloud, manipulating the images on-the-fly to match any graphic design and screen resolution, to dynamically optimizing the images and delivering them via a fast CDN to worldwide users. Then, in May 2015, we expanded our solution and introduced Cloudinary’s cloud-based service for video upload, real-time manipulation and optimized viewing.

当Cloudinary的服务于2012年公开发布时，我们的首要任务是解决Web和应用程序开发人员对图像管理的需求：从任何设备上传图像并将其存储在云中，即时处理图像以匹配任何图形设计和屏幕分辨率，以动态优化图像并通过快速CDN 将其交付给全球用户。 然后，在2015年5月，我们扩展了解决方案，并推出了Cloudinary的基于云的服务，用于视频上传，实时处理和优化的观看 。

Our new offer provided the same cloud-based service API for both images and videos. While the image management space keeps evolving, since 2015, wehave also continued enhancing our video transcoding capabilities. Today, about 30% of Cloudinary’s 5000 paying customers already upload and manipulate tens of millions of videos every month, and this number is growing quite rapidly.

我们的新产品为图像和视频提供了相同的基于云的服务API。 在图像管理领域不断发展的同时，自2015年以来，我们还继续增强了我们的视频转码功能。 如今，Cloudinary的5000个付费客户中，大约30％的人已经每月上传和处理数千万个视频，而且这个数字还在Swift增长。

The challenges developers face with the videos in their web sites tend to be more complex than images. The video files can be huge, which means longer upload & download times and very CPU-intensive transcoding and manipulation. The set of potential devices, resolutions, video formats and video codecs is large and confusing. The desired optimal user experience requires modern video players with user engagement statistics and, in some cases, also monetization capabilities.

开发人员在其网站上的视频所面临的挑战往往比图像复杂。 视频文件可能很大，这意味着较长的上载和下载时间以及非常占用CPU的代码转换和处理。 潜在的设备，分辨率，视频格式和视频编解码器的集合很大且令人困惑。 理想的最佳用户体验需要具有用户参与度统计信息的现代视频播放器，在某些情况下还需要具有获利能力。

Today we are excited to introduce the next generation of our cloud-based video management service – even more advanced real-time video transcoding together with a modern video player, live video streaming, AI based video tagging and transcript, and more; All aimed at simplifying the video workflow for web and mobile developers while improving and enhancing the end-user experience.

今天，我们很高兴推出下一代基于云的视频管理服务 -甚至更高级的实时视频转码，以及现代视频播放器，实时视频流，基于AI的视频标记和字幕等； 所有这些旨在简化网络和移动开发人员的视频工作流程，同时改善和增强最终用户体验。

面向开发人员的完整视频管理解决方案 (A Complete Video Management Solution for Developers)

Whether you are delivering top quality professional videos or user-generated clips, whether you have an eCommerce site, news channel, travel forum, or advertising agency, the back-end challenges involved in quickly uploading and then delivering optimized, high quality video to any device in any location is always there, as are the challenges of adjusting the output to match your design needs, and providing a great front-end user experience. And all these challenges mount if you want to broadcast that video live or integrate and share that content in social networks.

无论您是交付高质量的专业视频还是用户生成的剪辑，无论您是拥有电子商务网站，新闻频道，旅游论坛还是广告代理商，快速上传然后向任何人交付优化的高质量视频都涉及的后端挑战随时随地都可以使用该设备，调整输出以适应您的设计需求以及提供出色的前端用户体验也面临着挑战。 如果您想直播视频或在社交网络中集成和共享该内容，那么所有这些挑战都会越来越多。

Cloudinary addresses all this and more by providing the following capabilities as part of a single, streamlined solution:

Cloudinary通过将以下功能作为单个简化的解决方案的一部分来解决了所有这些以及更多问题：

上传，存储和管理 (Upload, Storage and Administration)

An end-to-end solution for dynamic videos in web sites and apps starts from the ability to upload directly from the browser or mobile apps. A single line of code allows users to upload any image or video file to the cloud without even going through your servers:

网站和应用程序中动态视频的端到端解决方案始于直接从浏览器或移动应用程序上传的功能。 只需一行代码，用户就可以将任何图像或视频文件上传到云中，而无需通过您的服务器：

Cloudinary::Uploader.upload(file,
resource_type: :video, public_id: "sea_turtle")

You can also use the upload widget, which provides a built-in user interface for your users to select and upload image and video files.

您还可以使用upload小部件 ，该小部件提供了内置的用户界面，供用户选择和上传图像和视频文件。

Uploaded videos are stored securely in the cloud. Once uploaded, you can manage your cloud-based database of media files using our administrative API or using Cloudinary’s Digital Asset Management user interface.

上传的视频安全地存储在云中。 上传后，您可以使用我们的管理API或Cloudinary的Digital Asset Management用户界面来管理基于云的媒体文件数据库。

实时视频转码，处理和流 (Real-Time Video Transcoding, Manipulation and Streaming)

Video files might be uploaded in various different formats, codecs, resolutions and aspect ratios. These properties will most likely not match the design of your site and the various devices, browsers and resolutions your visitors use. Videos are delivered to web sites using HTTP/S URLs. Cloudinary supports format conversion, video codec optimization, and resizing and cropping of videos using regular CDN delivery URLs. The video transcoding and manipulation is performed according to the instructions in the URL, while the video processing is done in real-time, on-the-fly, in the cloud when the first user accesses the URL.

视频文件可能以各种不同的格式，编解码器，分辨率和宽高比上传。 这些属性很可能与您网站的设计以及访问者使用的各种设备，浏览器和分辨率不匹配。 视频使用HTTP / S URL传递到网站。 Cloudinary支持格式转换，视频编解码器优化以及使用常规CDN传递URL调整视频大小和裁剪的功能。 当第一个用户访问URL时，根据URL中的指令执行视频转码和操作，而视频处理则在云端实时，实时，实时地进行。

For example, below is a video as originally uploaded followed by a web friendly MP4 200×200 cropped version of the video. The transcoding and cropping is done on-the-fly by adding the w_200,h_200,c_fill,g_north dynamic manipulation instructions to the video delivery URL.

例如，下面是最初上传的视频，然后是Web友好的MP4 200×200裁剪版本的视频。 通过将w_200,h_200,c_fill,g_north动态操作指令添加到视频投放URL w_200,h_200,c_fill,g_north完成转码和裁剪。

https://res.cloudinary.com/demo/video/upload/w_200,h_200,c_fill,g_north/sea_turtle.mp4

There are plenty of additional video manipulation building blocks that you can mix & match to create your desired composite videos. These include effects, filters, overlays of images, videos and text, and more. Below you can see a more advanced example that applies a color saturation decrease filter and adds an image (watermark), as well as video and text overlays at selected times within the video.

您还可以混合并匹配许多其他视频操作构建块，以创建所需的复合视频。 其中包括效果，滤镜，图像，视频和文本的叠加等。 在下面，您可以看到一个更高级的示例，该示例应用了颜色饱和度降低滤镜并添加了图像(水印)，并在视频中的选定时间添加了视频和文本叠加层。

https://res.cloudinary.com/demo/video/upload/ar_21:9,c_fill,w_500,ac_none/e_saturation:-50/l_cloudinary_icon,g_north_east,e_brightness:200,o_40,x_5,y_5,w_120/l_text:Roboto_34px_bold:Cute.Animals,co_white,g_west,x_10,so_2/l_video:funny_dog,w_200,g_south_east,y_10,x_10,so_2/sea_turtle.mp4

Videos can be converted to different formats simply by modifying the file extension. For example, changing the extension to ‘.m3u8’ will automatically generate all the index files required for our built-in HLS and MPEG-DASH adaptive bitrate streaming. You can see more online video transcoding examples in the following demo: https://demo.cloudinary.com/video/

只需修改文件扩展名，即可将视频转换为不同的格式。 例如，将扩展名更改为“ .m3u8”将自动生成我们内置的HLS和MPEG-DASH 自适应比特率流所需的所有索引文件。 您可以在以下演示中查看更多在线视频转码示例：https://demo.cloudinary.com/video/

可自定义的视频播放器 (Customizable Video Player)

The examples above demonstrated URL-based back-end techniques that you can use to generate and deliver videos. But Cloudinary wanted to take it further and provide developers with a complete, yet simple solution for addressing the front-end video playing experience as well.

上面的示例演示了可用于生成和交付视频的基于URL的后端技术 。 但是Cloudinary希望进一步发展，并为开发人员提供一个完整而简单的解决方案，以解决前端视频播放体验。

A new Cloudinary Video Player is now publicly available. The player can be initiated with a single line of code that accepts a video ID and automatically builds video manipulation and delivery URLs. Web friendly video formats such as MP4 are used and HLS & MPEG-DASH adaptive bitrate streaming is automatically set-up.

新的Cloudinary视频播放器现已公开可用。 播放器可以使用接受视频ID的单行代码启动，并自动构建视频操作和交付URL。 使用Web友好的视频格式(例如MP4)，并自动设置HLS和MPEG-DASH自适应比特率流。

The video player can be initiated either using HTML markup or programmatically using JavaScript:

可以使用HTML标记或使用JavaScript以编程方式启动视频播放器：

var vplayer = cld.videoPlayer("demo-player", {
publicId: 'rafting',
loop: true,
controls: true,
autoplayMode: 'on-scroll',
transformation: { width: 400, crop: 'limit ' },
posterOptions: {publicId: 'mypic', transformation { effect: ['sepia']}},
sourceTypes: ["hls", "mp4"],
})

The player has two built-in look & feel themes that can be further customized. It supports recommended videos suggestions and automatic playlist creation for a given tag assigned to multiple videos. You can track user engagement by monitoring events that can be automatically sent directly to analysis systems such as Google Analytics. See the video player documentation for more details.

播放器具有两个内置的外观和感觉主题，可以进一步对其进行自定义。 它支持推荐的视频建议和针对分配给多个视频的给定标签的自动播放列表创建。 您可以通过监视事件来跟踪用户参与度，这些事件可以直接自动发送到Google Analytics(分析)之类的分析系统。 有关更多详细信息，请参见视频播放器文档 。

The video player is an open source project based on the popular VideoJS open source video player, with its large ecosystem of plugins and customizations.

视频播放器是一个基于流行的VideoJS开源视频播放器的开放源代码项目，具有庞大的插件和自定义生态系统。

Interactive examples of the video player can be found in our video player demo page.

视频播放器的交互式示例可以在我们的视频播放器演示页面中找到 。

带实时转码的实时视频流 (Live Video Streaming with Real-Time Transcoding)

The common flow of first uploading videos and when done, delivering them to users is gradually clearing the way to a more advanced flow of live video streaming. Cloudinary now offers (beta) support for live streaming of video content directly from web sites and applications.

首次上传视频以及完成后再将其交付给用户的常见流程正在逐渐为实现更高级的实时视频流流程扫清道路。 Cloudinary现在提供(beta)支持，用于直接从网站和应用程序直接直播视频内容。

Video transcoding and manipulation is done in real-time on the live stream exactly in the same way it is done on pre-uploaded videos – simultaneously generating multiple different versions out of the original video – different resolutions, cropping modes, encoding quality levels, watermarks, effects, personalized text overlays and more.

视频转码和处理完全可以在实时流上实时进行，就像在预上传视频上进行的一样-同时从原始视频中生成多个不同版本-不同的分辨率，裁剪模式，编码质量级别，水印，效果，个性化文字叠加等。

Live streaming is based on the WebRTC protocol, and you can instruct Cloudinary to automatically stream the videos directly to Facebook or YouTube using the RTMP protocol.

实时流基于WebRTC协议，您可以指示Cloudinary使用RTMP协议自动将视频直接流式传输到Facebook或YouTube 。

You can try out the full live streaming experience via the mobile web demo application

您可以通过移动网络演示应用程序尝试完整的实时流媒体体验

基于AI的视频标记和转录 (AI-Based Video Tagging and Transcription)

If your web application has many videos or supports user-generated video content, smart video management automation would make your life easier and might improve user engagement.

如果您的Web应用程序包含许多视频或支持用户生成的视频内容，那么智能视频管理自动化将使您的生活更轻松，并可能改善用户参与度。

自动创建视频字幕 (Automatic Video Subtitle Creation)

Auto-playing muted video became very popular in news sites and social networks such as Facebook. New versions of web browsers even limit the auto playing capabilities and prevent auto-playing with sound. To make verbal videos effective even when muted, subtitles are necessary. And if you want to support uploading videos to a social feed with muted auto-play, you probably need the videos to have the subtitles already embedded in them.

自动播放静音视频在新闻站点和Facebook等社交网络中变得非常流行。 新版本的网络浏览器甚至限制了自动播放功能，并阻止了自动播放声音。 为了使口头视频即使在静音时也有效，需要字幕。 并且，如果您想支持将视频上传到具有自动播放静音功能的社交Feed，则可能需要在视频中嵌入字幕。

AI-based video transcript is now available as a fully integrated add-on powered by Google’s Cloud Speech API. By setting Cloudinary’s raw_convert upload API parameter to google_speech, the audio channel of the video is automatically processed and a transcript file is generated in your media library.

基于AI的视频成绩单现已作为由Google的Cloud Speech API支持的完全集成的附件提供。 通过将Cloudinary的raw_convert上载API参数设置为google_speech，将自动处理视频的音频通道，并在您的媒体库中生成脚本文件。

Cloudinary::Uploader.upload("lincoln.mp4", :resource_type => :video, :raw_convert  => "google_speech")

Generating a video with embedded subtitles based on automatic transcription is as simple as adding another parameter to your dynamic video delivery URL (in the example below, adding l_subtitles:lincoln.transcript). You can even enhance the subtitles with additional options such as your choice of font, font size, color, etc. The original video (which didn’t include any subtitles), now includes automatically generated captions based on Google’s speech to text AI engine.

根据自动转录生成带有嵌入式字幕的视频，就像在动态视频交付URL中添加另一个参数一样简单(在下面的示例中，添加l_subtitles:lincoln.transcript )。 您甚至可以使用其他选项来增强字幕，例如字体，字体大小，颜色等选择。原始视频(不包括任何字幕)现在包括根据Google语音到文本AI引擎自动生成的字幕。

https://res.cloudinary.com/demo/video/upload/l_subtitles:arial_20:lincoln.transcript,co_yellow/lincoln.mp4

自动视频标记 (Automatic Video Tagging)

It’s a common practice to organize your media database or eCommerce product catalog by categorizing and tagging your images and videos to better match uploaded content to your users. Cloudinary now supports automatic AI-based tagging of uploaded videos.

通常的做法是通过对图像和视频进行分类和标记来组织媒体数据库或电子商务产品目录，以更好地将上传的内容与用户进行匹配。 Cloudinary现在支持对上传的视频进行基于AI的自动标记。

The automatic tagging is available as a fully integrated add-on powered by Google’s Cloud Video Intelligence. By setting Cloudinary’s categorization upload API parameter to google_video_tagging, the video is automatically analyzed, and a list of detected tag categories is included in the response. If you also set an auto-tagging level, then any category that exceeds the requested confidence level automatically gets added to the resource’s tag list.

自动标记是由Google的Cloud Video Intelligence支持的完全集成的附件 。 通过将Cloudinary的categorization上传API参数设置为google_video_tagging，可以自动分析视频，并在响应中包含检测到的标签类别的列表。 如果您还设置了自动标记级别，则超过要求的置信度级别的任何类别都会自动添加到资源的标记列表中。

Cloudinary::Uploader.upload("turtle.mp4", :resource_type => :video, :categorization => "google_video_tagging", :auto_tagging => 0.7)

Below is a sample response from the automatic tagging. Categories with a confidence level above the given threshold are automatically assigned. Following that, you can see the full list of all detected categories and the time segment that each suggested tag applies to. You can list, browse, delete and search images and videos by the automatically assigned tags, either via API or our interactive UI.

以下是自动标记的示例响应。 置信水平高于给定阈值的类别将自动分配。 之后，您可以查看所有检测到的类别的完整列表以及每个建议标签适用的时间段。 您可以通过API或我们的交互式UI通过自动分配的标签列出，浏览，删除和搜索图像和视频。

"tags": [ "turtle", "animal" ...],
"data": [
{"tag": "turtle", "start_time_offset"=>0.0, "end_time_offset"=>13.44,
"confidence": 0.93},
{"tag": "animal", "start_time_offset"=>0.0, "end_time_offset"=>13.44,
"confidence": 0.93} ...  ]

图片和视频，而不是图片和视频 (Image and Video, not Image And Video)

In the first couple of years after publicly launching Cloudinary in 2012, I wrote most of the technical blog posts that we published. But we’ve grown, and it’s been quite a while since I’ve written one. When I decided to write this one introducing the next generation of our video solution, I thought that it would be a quick task…

在2012年公开发布Cloudinary之后的最初几年，我写了我们发布的大多数技术博客文章。 但是我们已经成长了，距离我写了已经有一段时间了。 当我决定写这篇介绍下一代视频解决方案的文章时，我认为这将是一项快速的任务……

Well, I was quite wrong – it was not quick at all. As you can see, trying to cover the highlights of the existing components and the new features of our video solution resulted in this longer-than-expected blog post, yet I still feel that I skipped so many cool features and use cases. As you probably already understand, we are proud of our enhanced Image and Video Management service and its new capabilities. We even made a slight yet significant update on our home page to clearly show where video fits within our complete solution:

好吧，我错了–根本不是很快。 如您所见，试图涵盖现有组件的亮点和视频解决方案的新功能导致了这篇比预期更长的博客文章，但是我仍然觉得我跳过了这么多很酷的功能和用例。 正如您可能已经了解的那样，我们为增强的图像和视频管理服务及其新功能而感到自豪。 我们甚至在主页上进行了微小但重要的更新，以清楚显示视频在我们完整解决方案中的适合位置：

We invite you to try out the video solution with its new capabilities and share your feedback (community page or forums). And for our part, we’ll keep working to further build and enhance it according to your feature requests and suggestions.

我们邀请您试用具有新功能的视频解决方案，并分享您的反馈( 社区页面或论坛 )。 就我们而言，我们将继续根据您的功能要求和建议进一步构建和增强它。

All video management features are available now in all our plans including the free plan. You can create your free account here.

现在，我们的所有计划(包括免费计划)均提供所有视频管理功能。 您可以在此处创建免费帐户。

翻译自: https://www.sitepoint.com/video-solution-web-and-mobile-developers/

6天移动web开发视频教程