Html Question posted in
Some basic documentation can be found here.

Html – Video Won't Play In Safari

I have a video that I’d like to place on my website.

<video controls playsinline>
<source src="myvideo.mp4" type="video/mp4">
</video>

I have no trouble getting the video to play on any browser other than Safari. However, on Safari, only the video controls display, and I’m unable to play the video.

I tried adding the muted tag and saving my video as an H.264-encoded video via QuickTime Player, but this didn’t help either. This is not a background video.

I have looked at other forums such as [HTML5 Video tag not working in Safari, iPhone and iPad], but I still can’t get the video to play.

Does Safari not support HTML5 video? Is there any workaround?

Any advice would be much appreciated.

Tags:

2

Answers


  1. 0

    Safari does in fact support HTML5 video playback.

    saving my video as an H.264-encoded video via QuickTime Player

    Verify that myvideo.mp4 is encoded with H.264 for video and AAC for audio. You can use ffmpeg to inspect and re-encode the file:

    ffmpeg -i input.mp4 -vcodec libx264 -acodec aac output.mp4

    On the other hand, I suggest you check the Console tab in the Safari’s web insspector to see if any form of error/warning(s) are logged.

    Keep in mind that having fallback code can be helpful to debug the issue for example:

    <video controls playsinline>
    <source src="myvideo.mp4" type="video/mp4">
    This browser does not support the video.
</video>

    A final (unrelated?) note, if you’re using React or NextJs you should use the camel cased playsInline instead. otherwise it won’t work

    Login or Signup to reply.
  2. 0

    I read a website that said playsinline attribute is only supported on Safari on iOS 10 and above. Do you think that’s the problem?

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search