视频标签在 iPhone 所有浏览器上不显示预览。并且也无法正常工作控制
我正在研究 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")
I'm working on html5 video tag, after recording the video, I show it on an HTML page by using jQuery. but the video at first did not show preview frame, it show only the Resume button. After playing by using the Resume button, it can't show automatically the Resume button after the video end. But it works perfectly in android devices.
Here, First I need to make preview image with resume button. Then, after end the video play I need to make first stage.
Here, what I tried:
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")
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
解决方案 1.
只需在视频文件 URL 末尾添加 #t=0.001，我们就可以告诉浏览器跳过视频的第一个毫秒。当您执行此操作时，甚至 iOS Safari 也会预加载并向用户显示该特定框架。
因此代码如下所示：
解决方案 2.
WebKit 不会在 iOS 上预加载媒体数据，以避免使用不必要的带宽，但您可以使用 preload 属性覆盖默认值：
Solution 1.
By simply adding #t=0.001 at the end of the video file url, we are telling the browser to skip the first millisecond of the video. When you do this, even iOS Safari will preload and show that specific frame to the user.
So the code looks like this:
Solution 2.
WebKit does not preload media data on iOS to avoid using unnecessary bandwidth, but you can override the default with the preload attribute: