Safari won't play HTML5 video

问题

I'm trying to create a HTML5 video background for a website but I cannot seem to get it to work on Safari. Does anyone have any ideas?

Here's the HTML video tags I'm using

<video id="bgVideo" class="bg__video" autoplay loop>
  <source src="./vid/Sample_Vid.ogv" type="video/ogv">
  <source src="./vid/Sample_Vid.m4v" type="video/m4v">
  <source src="./vid/Sample_Vid.webm" type="video/webm">
</video>

I've tried adding a script tag under it to start playing the video with JS but that's not helped either.

document.getElementById("bgVideo").play();

When I inspect the page it looks like the video element is taking up space in the DOM but it's just invisible basically.

I've also tried opening the .m4v files directly in the browser & it plays it there so I assume the file isn't an issue. These were all generated from easyhtml5video.com

I also have the Modernizer script to detect if autoplay is enabled for the browser which I've had to alter based on a pull request in the github repo as it was always saying that Safari doesn't support autoplay otherwise.

The test site I've setup is http://treetopia.neilnand.co.uk/

回答1:

The supported video format for Safari is mp4 with H.264 encoding. (you have a .m4v extension and file type)

回答2:

If video does not has sound - use

document.getElementById("bgVideo").volume = 0;

Safari don't allow autoplay for videos with sound.

来源：https://stackoverflow.com/questions/34235406/safari-wont-play-html5-video