说好故事，用好视频
|

Checklist：网页里插入视频怎么做？

作者Hermes Ma
来一段视频吧
来一段视频吧

视频是最能够帮助营销者说好故事的工具。许多研究都表明，视频可以极大地提升转化率。

62％的消费者在购买商品之前会观看产品评论视频。
在接受调查的消费者中，有84％的人说服他们观看了品牌的视频后便购买了产品或服务。
97％的视频营销者报告说，视频增强了用户对产品或服务的理解，而76％的视频报告者称视频帮助他们增加了销售额。
在目标网页上添加视频可以将转化次数提高80％以上。
56％的消费者认为公司应在其网站上提供视频内容。

Business2Community

作为营销者，十八般武艺自然是必须的。你可以不懂How，但是要知道What和Why，其中也包括视频的应用。那么如果今天你要策划一个含有视频的落地页，应该考虑哪些呢？

优化视频格式

视频的清晰度和文件大小直接相关。而视频编码和视频格式会直接影响文件大小。目前市面上主流的浏览器都支持mp4格式，因此mp4视频格式会是你的首选。不过除了苹果的Safari v14版本以下浏览器都支持更加高级的WebM格式，这是文件更小的视频格式，方便播放下载。在Chrome支持WebM十一年之后，Safari 14浏览器终于能够播放WebM文件。

在HTML5标准中，我们可以通过在<video>标签中嵌套<source>标签来指定多个视频文件格式。

<video controls>
  <source src="maxket.webm" type="video/webm">
  <source src="maxket.mp4" type="video/mp4">
  <p>Your browser cannot play the provided video file.</p>
</video>

浏览器会自上而下查看第一个它所支持的格式进行播放。在上述代码中，浏览器会先查看webm文件是否能播放，其次再尝试mp4文件。如果均无法播放则会显示“你的浏览器无法播放”。代码中的controls属性表示网页中的播放器将显示播放控件。

为视频添加字幕并默认静音

视频字幕是视频必选的配置，因为你无法想象观众是否能够“听”到你诉说的故事。许多视频制作的时候将字幕直接放入视频，这样做在多语言分发时会增加制作成本。正确的做法是为同一个视频分配多个字幕文件。W3支持主流的WebVTT格式作为字幕文件，文件名后缀为vtt。市面上也有不少WebVTT的生成和编辑软件。制作完vtt文件后你可以放入HTML的代码块中。

<video controls muted>
  <source src="maxket.webm" type="video/webm">
  <source src="maxket.mp4" type="video/mp4">
  <track src="subtitles-en.vtt" label="English captions" kind="captions" srclang="en" default/>
  <track src="subtitles-zh.vtt" label="中文字幕" kind="captions" srclang="en"/>
  <p>This browser does not support the video element.</p>
</video>

上面的例子中，我们为视频附上了两个语言的字幕，default属性表示默认字幕。用户可以在视频控件菜单上进行切换。

选择不同语言的视频字幕
选择不同语言的视频字幕

在这里的例子中，我们还加入了默认静音的muted属性。当用户点击播放后会存在打扰周围人的尴尬，此时可能直接关掉你的页面。毕竟你的着陆页和视频APP还是有很大区别的，当用户使用视频APP时本身就已经处在接受音频的场景中，为此非常有必要默认静音。

为视频选择封面

用户点不点视频取决于他们对视频所承载内容的预期，一个好的视频封面会让人有点的冲动。在视频网站上许多视频UP主都会想方设法让自己的封面更吸引人。如果你没有设定视频封面，那么播放器会默认用视频的第一帧来代替。此时效果往往十分不理想。

<video poster="poster.jpg" ...>
  …
</video>

为视频添加封面你只要在video标签中添加poster属性即可。上面的代码示例中的poster.jpg便是视频封面的图片地址。许多人也开始用gif图片来展示视频中的精彩瞬间。

当所有的视频格式都不被浏览器支持时，浏览器会默认显示视频封面。为视频添加封面还可以提升你的SEO效果，当你的视频被收录后，搜索引擎可能会用你的封面图片生成缩略图用于搜索引擎结果页面。

视频开始的时间戳

有时候同一个落地页会服务多个不同兴趣点，而多个兴趣点可以用一段视频来表现。此时你就可以找到各个兴趣点的时间戳并用此来设定视频开始播放的时间。

具体的做法是在视频文件后面加上参数#t=[start_time],[end_time]。

<source src="maxket.webm#t=5,20" type="video/webm">

上面的代码表示视频开始播放时仅播放第5到第20秒。此时用户不用下载多余的视频内容。如果用户想要看其他部分，依然可以用拖拽功能实现。

你也可以使用时间戳格式实现#t=00:01:05表示从一分五秒开始播放，#t=,00:01:00表示从开头播放到第一分钟。

自动播放和预加载

你可能知道<video>标签有一个autoplay的属性用于自动播放。然而即便声明了autoplay由于浏览器不同和用户设定以及互动历史不同并不能每次都实现。Chrome，Safari，Firefox的策略各不相同。

Firefox默认禁止自动播放视频
Firefox默认禁止自动播放视频

和autoplay类似preload也可以对用户播放体验造成影响。preload为预加载属性，它具有三个值：

  1. none，不预加载
  2. metadata，预加载基本信息，如时长，2D/3D，字幕文件等
  3. auto或者不设值，根据网络状况和不同浏览器有不同表现

由于各浏览器普遍对于autoplay和preload本身就有很强的约束，比如视频在页面不可见的时候一定不会autoplay，极诣还是建议在落地页中开启这两个属性，凡是能用总说明不会对体验有太多的负面影响。

iPhone中的内嵌播放

记得在<video>标签中使用playsinline属性，该属性可以让iPhone用户播放视频时不再自动弹出全屏播放，而可以像gif文件一样内嵌在网页中播放。这个属性加上循环播放的loop属性还可以帮我们成功替代gif这样性价比较低的格式。

<video autoplay loop muted playsinline>
  <source src="image.mp4">
  <source src="image.webm" onerror="fallback(parentNode)">
  <img src="image.gif">
</video>
function fallback(video)
{
  var img = video.querySelector('img');
  if (img)
    video.parentNode.replaceChild(img, video);
}

在上面的例子中，浏览器会尝试播放视频，而当最后一个播放源无法播放时则会用<img>来替换整个<video>标签。

使用视频还有哪些要注意的？

对视频的使用还需要注意

  • 不要对视频进行扭曲拉伸，这会影响播放体验。
  • 要注意视频宽度，不要溢出也不要浪费移动设备上有限的空间。
  • 为多种网络环境准备，提供标清选项。
  • 为视频寻找可靠的托管空间并用CDN进行加速。
说好故事，用好视频
说好故事，用好视频

一图胜千言，一片胜千图。希望你能用对视频，用好视频，有效提高营销的效果。

类似文章