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

Question

我在自己的网页中嵌入了mp4 file，它可以很好地加载并且可以在每个浏览器和移动设备上播放。

<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>

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

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

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

• 仅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>