如何使用html5视频标签在Safari上播放mp4视频？

Question

我开始构建一个非常简单的html5视频播放器。 我已经开始使用以下标记：

            <video
                autoplay
                loop="loop"
                muted=""
                width="100%"
                height="auto"
controls="true"     src="media/video.mp4"
            >

            </video>

此时如果我进行测试，视频在Linux和Mac上的Chrome和Firefox中播放效果非常好。 （在IE中未经测试）。

但是，桌面或移动设备上的Safari都不会播放任何视频。 我的Mac桌面版是11.01。 我的iphone和ipad正在运行iOS 11.2。

在应该播放视频的Safari上，有一个黑色的占位符。占位符中间是一个看起来像“玩”的图标。图标，一个横跨它的酒吧。

如何使用视频标签在Safari上播放mp4？