在移动设备中显示视频帧

Question

如何在手机中显示视频帧？

<video width="100%" height="100%" type="video/mp4">
    <source src="{{ asset('videos/home_1.mp4') }}" type="video/mp4">
</video>

实际输出（iOS）：

在Android中，它甚至不显示播放按钮，因此用户可能不知道可以播放视频。

Answer 1

对于移动设备，您可以使用poster代码的<video>属性。

请检查the Fiddle here。

可以将

controls可选属性添加到视频代码中，以获得播放，音量控制的底栏。

<video width="100%" height="100%" controls poster="https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-6.jpg">
  <source src="{{ asset('videos/home_1.mp4') }}" type="video/mp4">
</video>

将1080p视频发送到移动设备（如手机）没有多大意义，视频可能对于屏幕来说太大了，发送视频所需的带宽可能会使用所有用户有限的数据连接快。

浏览器供应商已经解决了这个问题，并在移动设备上禁用了自动播放和预加载属性。包含可在播放开始前显示的海报图像也是一个好主意，尽管这可能需要额外下载。这为观众提供了有意义的内容概念，无需下载视频或开始播放。