在Safari中初始加载后，MP4无法播放

Question

我在网页中嵌入了一个mp4文件 ，该文件可以很好地加载，并且可以在每个浏览器和移动设备上播放。

<video controls src="/mymovie.mp4">
  <track kind="captions"></track>
</video>

但是，当我使用Safari（macOS）打开网页时，我唯一能看到的是一个黑匣子，上面有视频的大小，并且视频前面有一个删除线（禁用）播放按钮。 问题是，当我再次刷新页面（即使不清除缓存）时，视频也可以正常工作。

当我编写标记以使用source元素时，出现了问题，但是方式不同。 现在，我不再看到一个黑匣子，而是一个透明的匣子，可以按播放按钮，但是视频无法开始播放。 我已经尝试在source列表下放置一个“ 不受支持 ”的文本，但是该文本没有出现。

<video controls>
  <track kind="captions"></track>
  <source src="/mymovie.mp4" type="video/mp4"></source>
  not supported
</video>

请注意，我已经尝试过对track元素上方的source元素重新排序。

是否存在此类已知问题以及解决方案？

以下是有关我的设置的更多信息：

• 仅HTTPS（有效证书）
• 影片大小约为3.5MB
• NGINX配置为发送以下标头：
  • accept-ranges: bytes
  • Content-Range: bytes 262144-3411398/3411399
  • content-type: video/mp4

我注意到与Chrome的不同之处在于，在我的devtools网络标签中，视频源的加载时间是2到4次，但只有正确大小的视频被加载了一次。 其他两个条目只是一些字节。 但是，如果我面对黑匣子，也会以相同的方式发生。

Answer 1

<video controls autoplay>
    <source src="/mymovie.mp4" type="video/mp4">
    <track kind="captions"></track>
</video>

您是否尝试使用source代码标记？ Autoplay属性也可以提供帮助，但是如果用户未首先与文档打交道，则某些浏览器不允许自动播放视频或将所有视频静音播放 。 我最好的猜测是，Safari不允许在没有事先交互的情况下播放视频，并且刷新页面后确实会与页面进行交互。 单击隐私策略接受按钮后，您可以在播放视频时作弊 。

// jQuery
$('#button-id').click(function(){ $('#video-id').play(); });

// Javascript
var button = document.getElementById('button-id');
var video = document.getElementById('video-id');
button.addEventListener('click', function(){ video.play(); });

Answer 2

如果您的视频位于同一文件夹中，则应使用：

    <video controls autoplay>
    <source src="mymovie.mp4" type="video/mp4">
    <track kind="captions"></track>
your browser doesn't support HTML5 video
</video>

要么

    <video controls autoplay>
    <source src="./mymovie.mp4" type="video/mp4">
    <track kind="captions"></track>
your browser doesn't support HTML5 video
</video>

您还可以包括整个网址：

<video controls autoplay>
    <source src="http://url.to/mymovie.mp4" type="video/mp4">
    <track kind="captions"></track>
your browser doesn't support HTML5 video
</video>