MP4 doesn't play after initial load in Safari

Question

I have embedded a mp4 file in my webpage, that gets loaded fine and is playable by every browser and on mobile too.

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

However, when I open the webpage with Safari (macOS), the only thing I can see is a black box with the size of the video and a striked through (disabled) play button in front of it. The thing is, when I refresh the page again (even without clearing the cache) the video works fine.

When I write my markup to use the source element, the problem appears, but in a different way. Now I see no longer a black box, but a transparent one and I can press the play button, but the video won't start. I already tried to place a " not supported " text under the source list, but the text doesn't appear.

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

Notice that I already tried reordering the source element above the track element.

Is there any known problem of this kind and a way to solve it?

Here are some more informations about my setup:

• HTTPS only (valid certificate)
• video size is around 3,5MB
• NGINX is configured to send this headers:
  • accept-ranges: bytes
  • Content-Range: bytes 262144-3411398/3411399
  • content-type: video/mp4

Something I notice in difference to Chrome is, that inside my devtools network tab the video source is loaded between 2 and 4 times, but just one time of it with the correct size. The other two entries are just some bytes. However, this happens in the same way, if I face the black box.

Answer 1

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

Did you try using source tag instead? Autoplay attribute can also help, but some browsers do not allow videos to be autoplayed, or autoplay all videos as muted, if user didn't interract with document first . My best guess is that Safari doesn't allow to play a video without the prior interaction, and you refreshing the page do interact with the page. You can cheat it playing video after clicking on privacy policy accept button.

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

If your video is in the same folder you should use:

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

or

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

You could also include your whole url:

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