如何在移动设备上制作视频？

Question

正如您在第一张图片中看到的那样，视频正确显示：

但在移动版中它没有显示海报。它只显示一个播放按钮。然后即使我点击播放按钮也没有任何反应：

如何让视频移动版看起来像桌面版？我希望他们成为一张海报图片，上面有一个播放按钮，然后点击播放按钮就会播放。

HTML

<video style="width:40%; display:block; margin:0 auto;" controls>
  <source src="/assets/fake-prince.m4v" type="video/mp4">
</video>

Answer 1

有一个名为<video>的{​​{1}}属性应该可以解决问题。你可以阅读它here。只需指定要显示的图像文件，直到用户点击播放为止。

poster

编辑：

将<video style="width:40%; display:block; margin:0 auto;" poster="image-file-location-here" controls> <source src="/assets/fake-prince.m4v" type="video/mp4"> </video> 标记放在<video>内，而不是<div class="blog-body">标记。

<p>

此外，您过度使用<div class="blog-body"> <video style="width:40%; display:block; margin:0 auto;" controls="true"> <source src="/assets/fake-prince.m4v" type="video/mp4"> </video> </div> 标记。如下面的评论中所述，<p>用于段落，但您似乎使用它们在元素之间创建边距。我建议使用CSS的<p>属性来获得相同的效果和更好的性能。

Answer 2

要添加到Blom的答案，您网站上的视频如果m4v格式通常会导致播放问题，即使在Apple设备上也是如此（我刚下载并在MAC上测试它并将其打开为MetaData文件最初而不是播放视频）。

m4v（以非常简单的术语......）是一个mp4视频容器，带有一些额外的位以允许iTunes添加复制保护。

在您的情况下，您似乎没有使用复制保护，因此您可能会发现只需将文件扩展名从m4v更改为mp4就可以在大多数平台上播放（例如，它适用于Mac）。