视频标签在 iPhone 所有浏览器上均不显示预览。并且也无法正常工作

Question

我正在研究html5视频标签，录制视频后，我使用jQuery将其显示在HTML页面上。但视频一开始没有显示预览帧，只显示“恢复”按钮。使用“恢复”按钮播放后，视频结束后无法自动显示“恢复”按钮。但它在 Android 设备上完美运行。

在这里，首先我需要使用恢复按钮制作预览图像。然后，视频播放结束后我需要进行第一阶段。 在这里，我尝试过：

            const recordedMedia = document.createElement("video");
            recordedMedia.controls = true;
            // recordedMedia.autoplay = true;
            recordedMedia.setAttribute('playsinline', 'true')
            // recordedMedia.setAttribute('data-wf-ignore', 'true')
            // recordedMedia.setAttribute('data-object-fit', 'cover')
            recordedMedia.setAttribute('preload', 'metadata')
            recordedMedia.setAttribute('type', "video/mp4")

Answer 1

解决方案1.

只需在视频文件 URL 末尾添加 #t=0.001，我们就告诉浏览器跳过视频的第一个毫秒。当您执行此操作时，甚至 iOS Safari 也会预加载并向用户显示该特定框架。

所以代码如下所示：

<video>
  <source src="path-to-video.mp4#t=0.001" type="video/mp4" />
</video>

解决方案2.

WebKit 不会在 iOS 上预加载媒体数据，以避免使用不必要的带宽，但您可以使用 preload 属性覆盖默认值：

<video controls preload="metadata" src="...">
        Your browser does not support the video tag.
</video>