Video content is taking over the Internet. The trend began long ago and the most recent stats confirmed the predictions were correct. TikTok, a social network entirely based on video content, grew so much and so rapidly that it quickly became a “threat” to long-stading giants such as Instagram and even rasied concerns in the US government. Fueled by the widespread availability of high-speed internet access, also “on the run” with 4G (and soon 5G) mobile data connections, and cheap or free video hosting platforms, video content has become so pervasive in websites that it is even used to animate backgrounds.

视频内容正在接管互联网 。 这一趋势很早就开始了， 最新的统计数据证实了这一预测是正确的。 TikTok，一个完全基于视频内容的社交网络， 发展得如此之快 ，以至于它Swift成为了像Instagram这样长期存在的巨头的“威胁”，甚至引起了美国政府的担忧。 受到高速互联网访问的广泛可用性的推动，以及4G(以及即将推出的5G)移动数据连接以及廉价或免费的视频托管平台的“运行”，视频内容已在网站中变得如此普遍，甚至被使用。为背景制作动画。

Video embeds though are not easy ones to tame. Especially when you need to embed video hosted on a third-party platform, such as YouTube and Vimeo. It is great to piggyback on their virtually-infinite storage and bandwidth, but it comes at a price: <iframe>s.

视频嵌入虽然不容易驯服。 特别是当您需要将托管在第三方平台(例如YouTube和Vimeo)上的视频嵌入时。 piggy带它们几乎无限的存储和带宽是很棒的，但这要付出代价： <iframe> s。

<iframe>s got a bad rap for many reasons. They once used to pose a threat to the security of websites, because the lack of sandboxing in some old browsers let scripts cross the boundaries of the <iframe>s and possibly execute malicious code. Also, wiring the browsers’ history controls (back/forward) to <iframe>d content could be a mess. Nowadays, the countermeasures built into modern browsers make it difficult at times to properly handle <iframe>s and their content.When it comes to embedding videos from external sources, the two complaints I hear the most are about the lack of “responsiveness” of the embeds and customization of cover images (also know as “poster” images).The <video> elements also need some time to be mastered.

<iframe>的说唱失败的原因很多。 它们曾经曾经对网站的安全构成威胁，因为某些旧版浏览器中缺少沙箱功能，因此脚本可以跨越<iframe>的边界并可能执行恶意代码。 同样，将浏览器的历史记录控件(后退/前进)连接到<iframe> d内容也可能很麻烦。 如今，现代浏览器中内置的对策有时会导致难以正确处理<iframe>及其内容。谈到嵌入来自外部来源的视频时，我听到最多的两个抱怨是缺乏对“ <iframe> ”的响应。封面图像(也称为“海报”图像)的嵌入和自定义。 <video>元素也需要一些时间才能掌握。

Please note that you can find the source code for some of the examples shown below in my GitHub repository and try some live demos here. The code is also available on JSFiddle.

请注意，您可以在 我的GitHub存储库 中 找到 以下所示示例的源代码， 并 在此处 尝试一些实时演示 。 该代码在JSFiddle上也可用。

1.使用CSS或JS的自适应视频 (1. Responsive videos with CSS or JS)

At the time of writing, if you try to generate HTML code to embed a YouTube video from their pages, it offers this code:

在撰写本文时，如果您尝试生成HTML代码以从其页面嵌入YouTube视频，则它会提供以下代码：

<iframe width="560" height="315" ...></iframe>

The “IFrame Player API” docs also only propose “pixel” dimensions.

“ IFrame Player API”文档也仅提出“像素”尺寸。

Vimeo instead does offer a “Resposive” size option, which adds a couple of interesting things to the embed code:

Vimeo确实提供了“ Resposive”大小选项，该选项为嵌入代码添加了一些有趣的东西：

<div style="padding:56.25% 0 0 0;position:relative;">  <iframe src="https://player.vimeo.com/video/..."    style="position:absolute;top:0;left:0;width:100%;height:100%;"    frameborder="0" allow="autoplay; fullscreen" allowfullscreen>  </iframe></div><script src="https://player.vimeo.com/api/player.js"></script>

using position: relative; and padding: 56.25% 0 0 0; on a “wrapper” element, the video element is correctly constrained into the right proportions (assuming that all videos are in 16:9 format). The <iframe> and its wrapper <div> will fill the width of their container. This means that if you want your video to cover 50% of the viewport width, you need to furtherly wrap it into a container:

使用position: relative; 和padding: 56.25% 0 0 0; 在“包装器”元素上，将video元素正确限制为正确的比例(假设所有视频均为16：9格式)。 <iframe>及其包装器<div>将填充其容器的宽度。 这意味着，如果您希望视频覆盖视口宽度的50％，则需要将其进一步包装到容器中：

<div style="width: 50%;"><div style="padding:56.25% 0 0 0;position:relative;">  <iframe src="https://player.vimeo.com/video/..."    style="position:absolute;top:0;left:0;width:100%;height:100%;"    frameborder="0" allow="autoplay; fullscreen" allowfullscreen>  </iframe></div><script src="https://player.vimeo.com/api/player.js"></script></div>

Note: I am not fond of inline styles and you should be not too, I am using them in the code snippets for the sake of simplicity.

注意：我不喜欢内联样式，您也不应该如此，为了简单起见，我在代码片段中使用了它们。

I tried to remove the <script> and tested the video in Chrome, FireFox and Safari on a desktop computer. It still worked. So I am not sure what this script does (I did not try to debug it, yet…).

我试图删除<script> ，并在台式机的Chrome，FireFox和Safari中测试了视频。 它仍然有效。 因此，我不确定该脚本的作用(我尚未尝试对其进行调试……)。

So I applied the same sizing trick to the YouTube video:

因此，我对YouTube视频应用了相同的大小调整技巧：

<div style="width: 50%;"><div style="padding:56.25% 0 0 0;position:relative;">    <iframe src="https://www.youtube.com/embed/..."      frameborder="0" allow="accelerometer; autoplay;       encrypted-media; gyroscope; picture-in-picture"      allowfullscreen style="position:absolute;top:0;left:0;      width:100%;height:100%;">    </iframe></div></div>

…and it worked! This is how you can make your 16:9 videos responsive with pure CSS.

…而且有效！ 这是使纯CSS响应16：9视频的方法。

使用FitVids.js (With FitVids.js)

Another viable option to make your videos responsive is FitVids.js. It is a JavaScript plugin which will recalculate and resize the videos at runtime.Using FitVids.js is a piece of cake:

另一个使视频响应的可行选择是FitVids.js 。 这是一个JavaScript插件，它将在运行时重新计算视频并调整其大小。使用FitVids.js真是小菜一碟：

<script src="path/to/jquery.min.js"></script><script src="path/to/jquery.fitvids.js"></script><script>  $(document).ready(function(){    $('body').fitVids();  });</script>

You can also restrict it to a specific group of videos, targeting their containers:

您还可以将其限制为一组特定的视频，以其容器为目标：

$('.video-container-name').fitVids();

自带JavaScript版本 (Bring Your Own JavaScript version)

If you want a better understanding of how this works, or just a simpler version of it for you to customize, I have built a couple of JS alternatives based on jQuery. This is the simplest version:

如果您想更好地了解它的工作方式，或者只是想简单地定制它，我已经基于jQuery 构建了两个JS替代方案 。 这是最简单的版本：

function resizeVideos(elements) {  $(elements).each(function() {    var width = $(this).width();    var height = parseInt((width * 9) / 16);    $(this).height(height);  });}$(function() {  resizeVideos('iframe,video');});

it uses the elements selector (set to get every <iframe> and <video> in the snippet above) to search for videos in the page, then it recalculates their height according to their current width. The code above also assumes that the videos are in 16:9 format. Selectors can be more sophisticated than the ones shown above, jQuery offers some powerful options.

它使用elements选择器(设置为获取上面摘录中的每个<iframe>和<video> )来搜索页面中的视频，然后根据其当前宽度重新计算其高度。 上面的代码还假定视频为16：9格式。 选择器可能比上面显示的更为复杂，jQuery提供了一些强大的选项 。

If you want something more flexible in terms of video proportions, here is a more sophisticated version:

如果您想在视频比例方面更灵活一些，可以使用以下更复杂的版本：

function resizeVideos(elements) {  $(elements).each(function() {    var aspectRatio = $(this).data("aspect-ratio");    aspectRatio = aspectRatio || "16:9";    var ratioXY = aspectRatio.split(":");    var width = $(this).width();    var height =       parseInt((width * parseInt(ratioXY[1])) / ratioXY[0]);    $(this).height(height);  });}$(function() {  resizeVideos('iframe,video');});

In this case, the embeds can be resized using the data-aspect-ratio="..." data attribute to constrain their proportions as shown here:

在这种情况下，嵌入功能可以使用被调整大小data-aspect-ratio="..." 数据属性来限制它们的比例如所示在这里 ：

<iframe  src="https://player.vimeo.com/video/..."  width="100%"data-aspect-ratio="16:9"  frameborder="0"  allow="fullscreen"  allowfullscreen></iframe>

If the aspect ratio is not specified, it defaults to 16:9. See it live or in JSFiddle.

如果未指定宽高比，则默认为16：9。 现场或在JSFiddle中查看 。

2.背景视频 (2. Background videos)

If used wisely, a background video can add a bit of coolness to your pages.

如果使用得当 ，背景视频会给页面增添些许凉意 。

Videos can’t be put in a CSS background. With CSS positioning and z-index you can get around that limitation. Note the following <div>s in my repository intro page:

视频不能放在CSS background 。 使用CSS定位和z-index您可以绕开该限制。 请在我的存储库简介页面中注意以下<div> ：

<div class="content">  ...page content... </div><div class="video">  <video autoplay playsinline loop muted preload>    <source src="assets/bg_video.mp4" type="video/mp4">    Your browser does not support the video tag.  </video></div><div class="overlay"></div>

The <video> element must have the autoplay and muted options enabled. autoplay is required for the background to play automatically on page load, muted is just mandatory for “autoplaying” background videos (see paragraph 3 below for details).

在 <video> 元素必须具有 autoplay 和 muted 启动的选项。 要在网页加载时自动autoplay背景，需要使用autoplay功能，对于“自动播放”背景视频来说，只有强制muted功能(有关详细信息，请参见下面的第3段)。

Here’s the CSS (note the comments):

这是CSS (请注意注释)：

/* This is necessary for elements with height: 100%; to actually fill the page */html, body {  height: 100%;}/* This page only has the background video,no need to use more refined selectors. */video {  width: 100%;  height: 100%;/* This is necessary for the video to      stretch and fill the container, otherwise      it will be wrapped with "bands". Not cool. */  object-fit: fill;}/* All of the containers will be "absolutely positioned" and cover all the window */.content, .overlay, .video {  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;}/* The .content element will be placed above the others. */.content {  z-index: 20;}/* The .overlay element is used to darken the video and enhance contrast with the page content and will be placed in a middle layerbetween .content and .video. */.overlay {  z-index: 15;  background-color: rgba(0, 0, 0, .3);}/* The video element will be placed under other elements. */.video {  z-index: 10;}

Here’s the final, working product.

这是最终的有效产品 。

Please do use low resolution videos for backgrounds. Networks may be fast, but traffic is sometimes metered (on the server and also client side, if the connection is 3G/4G/xG) and bandwidth may be limited (especially on shared hosting services). Also, some mobile devices out there are low end. Do not stress them with processing hi-res videos. You might as well set a default background image and do not show the video on smaller devices:

请使用低分辨率视频作为背景。 网络可能很快，但是有时会按流量 计量 (如果连接为3G / 4G / xG，则在服务器以及客户端)，并且带宽可能会受到限制(尤其是在共享主机服务上)。 另外，一些移动设备还处于低端 。 不要通过处理高分辨率视频来强调他们。 您也可以设置默认的背景图片，而不在较小的设备上显示视频：

// Using JS to completely remove the element from the page// because simply hiding the video with CSS does not work.// The media resource would still be pulled from the server.$(document).ready(function() {  if($(window).width() <= 575){ // "Small" devices size in Bootstrap    $('.bg-video').remove();  }});

3.为什么您的“自动播放”视频无法播放 (3. Why your “autoplaying” video is not playing)

In modern browsers, videos are subject to restrictions can only “autoplay” under specific circumstances. In the past, heinous crimes have been committed by means of “autoplay”:

在现代浏览器中， 视频受限制，只能在特定情况下“自动播放”。 过去， 可恶的罪行是通过“自动播放”来实施的：

• Ads assault
  广告攻击
• Jumpscares
  跳疤
• Awkward office moments
  尴尬的办公时刻

so the browsers’ makers fought back, gradually eradicating the most vicious hacks designed to overcome the restrictions they put in place. To this date and on a general basis, you can only autoplay a <video> if:

因此，浏览器的制造商进行了反击，逐渐消除了旨在克服其所施加限制的最恶性黑客 。 在此日期和一般的基础上 ， 你只能 autoplay 一个 <video> ，如果：

• it is muted

  它是mute d

• the user has already and explicitly interacted with pages on the same domain (with a click, a tap… a, mouse move will not do)

  用户已经和显式地与同一域上的页面进行了交互 ( 单击 ， 单击 …， 鼠标移动将无效)

• The playsinline option is also enabled

  playsinline 选项也已启用

Other policies might be defined at browser or OS level, but unless you are targeting specific platforms, do not rely on them.

其他策略可能是在浏览器或OS级别定义的 ，但是除非您以特定平台为目标，否则请不要依赖它们。

So the autoplay can get tricky. Many times developers face complaints because they don’t realize that they are testing the pages on localhost or had already interacted with the domains in several ways, but the actual users did not and the autoplay does not work for them.

因此， autoplay会变得棘手。 很多时候，开发人员会遇到抱怨，因为他们没有意识到自己正在localhost上测试页面或已经以多种方式与域进行了交互，但是实际用户却没有，并且autoplay对他们不起作用。

自动播放YouTube和Vimeo视频(以及其他“ iframe”视频) (Autoplaying YouTube and Vimeo videos (and other “iframed” videos))

When you generate the embed code from YouTube or Vimeo, you have the choice to enable “autoplay” for the video. Note the following options that the code generators will add to the <iframe>s:

当您从YouTube或Vimeo生成嵌入代码时，可以选择启用视频的“自动播放”功能。 请注意代码生成器将添加到<iframe>的以下选项：

YouTube<iframe  src="https://www.youtube.com/embed/...?autoplay=1"  ...allow="accelerometer; autoplay; encrypted-media;     gyroscope; picture-in-picture"  allowfullscreen></iframe>Vimeo<iframe  src="https://player.vimeo.com/video/...?autoplay=1"  ...allow="autoplay; fullscreen"  allowfullscreen></iframe>

As I mentioned in the introduction, <iframe>s are “sandboxed” in modern browsers to enforce security. Therefore, the “host” page must define policies to allow the pages and scripts running into the <iframe>s to use some of the browser’s and system’s features. Both code snippets include the allow="autoplay;" permission. Without this, the video elements in the <iframe> would not be allowed to autoplay. Also, allowfullscreen is present in both snippets, to allow the video players to run in fullscreen mode if the user wants them to. <iframe>s have a lot of options that can be set, be sure to review the documentation to get useful insights.

正如我在简介中所提到的， <iframe>在现代浏览器中被“沙盒化”以增强安全性。 因此，“主机”页面必须定义策略，以允许运行<iframe>的页面和脚本使用浏览器和系统的某些功能。 这两个代码段都包含allow="autoplay;" 允许。 没有这个， <iframe>的视频元素将不允许autoplay 。 另外，两个片段中都存在allowfullscreen ，以允许视频播放器在用户希望的情况下以全屏模式运行。 <iframe>可以设置很多选项，请务必查看文档以获得有用的见解。

4.自定义封面图片 (4. Custom cover images)

Cover images for videos serve a very important purpose, beyond pure aesthetics: to “lure” users into actually watching the video. Therefore, just relying on the default frame shown by the video player will most often not cut it.

视频的封面图像不仅具有纯粹的美感，还具有非常重要的作用：“诱使”用户实际观看视频。 因此，仅依靠视频播放器显示的默认帧通常不会削减它。

在< video>元素上设置自定义封面图像 (Setting a custom cover image on a <video> element)

The <video> element is very friendly, it offers the poster attribute to let you set a custom cover image:

<video>元素非常友好，它提供了poster属性，可让您设置自定义封面图像：

<video poster="https://picsum.photos/id/1069/1080/720" controls>  <source src="video.mp4" type="video/mp4">  Your browser does not support the video tag.</video>

在YouTube或Vimeo视频上设置自定义封面图片 (Setting a custom cover image over a YouTube or Vimeo video)

At the time of writing, the embed code generators on YouTube and Vimeo will not let you specify a custom cover image. Cover images for such embedded videos can be applied with a JS trick:

在撰写本文时，YouTube和Vimeo上的嵌入代码生成器将不允许您指定自定义封面图片。 此类嵌入视频的封面图像可以通过JS技巧来应用：

1. Add a video embed with autoplay to the page.

   将自动播放嵌入的视频添加到页面。

2. Remove the embedded video from the DOM at runtime.

   在运行时从DOM中删除嵌入式视频。

3. Replace the embedded video with an equally-sized and positioned cover image.

   用相等大小和位置的封面图像替换嵌入式视频。

4. Store the removed embed in a “data” attribute of the cover image or a variable.

   将删除的嵌入内容存储在封面图像的“数据”属性或变量中。

5. Set an event listener on the cover image and make it reverse the process when the cover image is “activated” by the user.

   在封面图像上设置事件侦听器，并使其在用户“激活”封面图像时逆转该过程。

Since the video needs to be set to “auto play” for this solution to work, it is necessary to remove it from the DOM at runtime because just hiding it via CSS would not prevent it from auto-playing. It would play in the background, users would hear its audio and it would also waste some bandwidth.

由于需要将该视频设置为“自动播放”才能使该解决方案正常工作，因此有必要在运行时将其从DOM中删除，因为仅通过CSS隐藏它不会阻止其自动播放。 它会在后台播放，用户会听到它的音频，还会浪费一些带宽。

You could also destroy the embed and re-create it from scratch via JS when the cover image is “activated” instead of storing it somewhere, but I do prefer the approach shown above because it works better with templates and templating systems and it is more maintainable. Many templating frameworks use static HTML pages with placehoders. This is convenient because the template can be tested and validated in the browser while it is built. Writing JS code to re-create the same HTML code built into a template would basically become duplicated code.

您也可以在“激活”封面图像时销毁嵌入并通过JS从头开始重新创建嵌入，而不是将其存储在某个地方，但是我确实更喜欢上面显示的方法，因为它与模板和模板系统一起使用效果更好，而且效果更好可维护的。 许多模板框架将静态HTML页面与占位符一起使用。 这很方便，因为可以在构建模板时在浏览器中对其进行测试和验证。 编写JS代码以重新创建模板中内置的相同HTML代码将基本上成为重复的代码。

This is a preview of the core JS code to add cover images over YouTube or Vimeo videos:

这是核心JS代码的预览，可在YouTube或Vimeo视频上添加封面图像：

HTML(omitted, any embed element would do)JSfunction setCustomCovers(elements) {  $(elements).each(function() {    var customCover = $(this).data("custom-cover");    if (customCover) {      var coverElement = $('<a href="#" class="custom-video-cover"></a>');      var label = $(this).data("custom-cover-label");      if (label) {        coverElement.html(label);      }      coverElement.css('background-image', 'url(' + customCover + ')');      coverElement.width($(this).width());      coverElement.height($(this).height());      coverElement.data('video-element', $(this));      $(this).replaceWith(coverElement);    }  });  setCustomCoverEventListeners();}function setCustomCoverEventListeners() {  $('.custom-video-cover').click(function(e) {    e.preventDefault();    $(this).replaceWith($(this).data('video-element'));  });}

Check out the repo and the demos to have a better understanding of this one.

查看回购和演示以更好地了解这一内容。

5.切换多种分辨率 (5. Switching multiple resolutions)

The <video> element does not support multiple resolutions out of the box, but with a little JavaScript work the <source> elements can be used to switch resolutions for videos.

<video>元素不支持开箱即用的多种分辨率，但是通过少量JavaScript工作， <source>元素可用于切换视频的分辨率。

<source>元素的简要介绍 (A brief introduction to <source> elements)

A <video> element can include multiple <source> elements. This is just for compatibility, so media files can be provided in different formats (or served via with different protocols) for the browser to find one they can reproduce. The <source> elements should be listed in order of preference, the browsers will use the first compatible one from the list.

一个<video>元素可以包含多个<source>元素。 这仅仅是出于兼容性考虑 ，因此媒体文件可以以不同的格式提供(或通过不同的协议提供)，以供浏览器查找可以复制的文件 。 <source>元素应按优先顺序列出，浏览器将使用列表中第一个兼容的元素。

使用<source>元素切换分辨率 (Using <source> elements to switch resolutions)

The code snippets below show how to switch between <source>s depending on the screen resolution. Devices with “medium” or smaller screens (< 768 pixel wide, according to the Bootstrap Grid System) will get “low resolution” videos.

下面的代码段显示了如何根据屏幕分辨率在<source>之间进行切换。 具有“中”或更小屏幕(根据Bootstrap Grid System，小于768像素宽)的设备将获得“低分辨率”视频。

HTML<video controls playsinline loop preload>  <source src="hires.mp4" class="video-hires" type="video/mp4">  <source src="lowres.mp4" class="video-lowres" type="video/mp4">  Your browser does not support the video tag.</video>JSfunction setMultipleResolutionSources() { var remove = ($(window).width() < 768) ?    'source.video-hires' : 'source.video-lowres';  var videoElements = $(remove).parent();  $(remove).remove();  /* When changing the <source> elements,   * the <video> element must be reloaded. */  $(videoElements).each(function() {    $(this)[0].load();  })}$(function() {  setMultipleResolutionSources();}

Note: given that modern phones have high resolution screens and mobile data networks are fast, I am not sure if serving low resolution videos to small devices does make any sense. I used that criteria because it was simple to show how the switch works. You might want to use more sophisticated filters to make decisions, according to the type of device. Or maybe just provide on-screen switches for the users to choose on their own.

注意：由于现代手机具有高分辨率屏幕，并且移动数据网络速度很快，因此我不确定向小型设备提供低分辨率视频是否有意义。 我使用该标准是因为它很容易说明开关的工作原理。 您可能要根据设备的类型使用更复杂的过滤器来做出决策。 或者，也许只是提供屏幕上的开关供用户自行选择。

6.托管和提供视频 (6. Hosting and serving videos)

The matter of properly hosting and serving video is worth entire books on its own, so I am just giving you a few pointers.

适当地托管和提供视频的问题本身就值得一本完整的书，因此，我仅向您提供一些建议。

If you have a handful of short videos or a background video, your webserver or hosting plan will do just fine. If you are serious about serving video content or want to share big files with your users, you should consider using a CDN or at least other options to offload your webserver. Storage buckets such as AWS S3 are a viable alternative. A separate webserver with Nginx dedicated to serve static assets is also a good choice.

如果您有一些短片或背景视频，则您的网络服务器或托管计划会很好。 如果您认真对待提供视频内容或想与用户共享大文件，则应考虑使用CDN或至少使用其他选项来减轻Web服务器的负担。 诸如AWS S3之类的存储桶是可行的选择 。 Nginx专门用于提供静态资产的单独Web服务器也是一个不错的选择。

添加CDN比您想象的要容易和便宜(甚至是免费的！) (Adding a CDN is easier and cheaper than you think (even free!))

It is a best practice to serve all static assets (such as images, scripts and stylesheets) via a Content Delivery Network and online video playback can greatly benefit from the performance boost given by the edge locations of the CDNs. In simple terms, a CDN will offload your hosting servers and significantly improve the file transfer speed for your users. Users nowadays have incredibly high expectations and will quickly abandon your website if things don’t load in just a few seconds. Modern codecs are very efficient, but modern phones and cameras also have very high resolutions. So video files easily grow big and transfer speed becomes even more critical.Most CDN providers offer plugins to add their services to all major CMSs with a few clicks. Without a plugin, you just need to set the base URL of your website into the CDN configuration and change the links to static assets in your pages adding the base URL of the CDN to the static assets paths.Some CDNs also offer free plans or tiers, so why not give them a try? Some CDNs even offer “Video transcoding and adaptive streaming” in their free plan, meaning that you automatically get multiple versions of your video files, with specific optimizations for different types of devices, with each upload.Note: I am NOT affiliated with any of the services linked above at this time.

最佳做法是通过内容分发网络提供所有静态资产(例如图像，脚本和样式表)，并且在线视频播放可以从CDN 边缘位置 带来的性能提升中 大大受益 。 简而言之，CDN可以减轻托管服务器的负担，并大大提高用户的文件传输速度 。 如今，用户的期望值令人难以置信，如果短短几秒钟内无法加载内容，他们将很快放弃您的网站。 现代编解码器非常高效，但是现代电话和相机也具有很高的分辨率。 因此，视频文件很容易变大，传输速度变得更加关键。大多数CDN提供程序都提供了一些插件 ，只需单击几下即可将其服务添加到所有主要CMS。 如果没有插件，你只需要您的网站的基本URL设置到CDN配置和改变你的网页加入CDN的基本URL静态资产链接到静态资产paths.Some的CDN还提供免费的 计划 或 层 ，为什么不尝试一下呢？ 某些CDN甚至在其免费计划中提供“视频转码和自适应流传输”功能 ，这意味着您每次上载时都会自动获取视频文件的多个版本 ，并对不同类型的设备进行特定的优化 。 注意：我目前不属于上面链接的任何服务。