1

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.

enter image description here

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.

  • check this it may help you : https://stackoverflow.com/questions/30199261/why-wont-safari-play-file-without-extension-in-video/51901198#51901198 – DINA TAKLIT Nov 29 '18 at 15:58
  • And this one too : https://stackoverflow.com/questions/27712778/video-plays-in-other-browsers-but-not-safari – DINA TAKLIT Nov 29 '18 at 15:58
  • Yeah! The first link seems definitely to be useful. I will check some things out. Thank you! –  Nov 29 '18 at 17:02
  • happy to hear that :). wish u the best. I can search with you more till we find solution. let me know. – DINA TAKLIT Nov 29 '18 at 17:30
  • could it be possible for you to upload the mp4 somewhere so that it can be downloaded and tested? also which version of Safari is it? – Narendra Nov 30 '18 at 04:46
  • I linked a video into the question: https://wao.io/45378fcb3a22dd7d57af76822ab07e54.mp4 –  Nov 30 '18 at 08:53

2 Answers2

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(); });
Lis
  • 555
  • 4
  • 26
  • I don't want to autoplay the video, but I will try the `source` element. Thank you! –  Nov 26 '18 at 16:43
  • I found some interesting news with the `source` approach. I've edited my question. –  Nov 26 '18 at 17:21
  • Well, I'm out of ideas. Did you try using another .mp4 file? Maybe encoding is the problem. – Lis Nov 27 '18 at 14:06
  • Yeah, that is definitely possible. But wouldn't that disable the video **always**? –  Nov 27 '18 at 14:11
1

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>
Bastiaan Buitelaar
  • 85
  • 9