I've recently "finished" a website, and it uses some transparent videos that move as you scroll the site. They work perfectly on Chrome because I used a VP9 codec through a transparent WebM container.

For Safari, I used an HEVC codec contained in a MOV. I encoded this video from an Apple Prores 4444 with Alpha codec to HEVC directly in Finder. This allowed me to preserve transparency in HEVC. When played on my Mac through Quicktime, it plays with no issues.

Additionally, I included a standard non-transparent H264 if any browser has a hard time with the two above.

However, as my question states, Safari does not display anything. Funnily enough, a month ago, when I was testing the website, it worked divinely on Safari. The HTML for the videos has not changed since that test.

To achieve this transparent video style, I followed this detailed tutorial. If you'd like to be more thorough and take a look at my website's code, you can also find it here. (Remember: The videos work on Chrome, but they don't appear in Safari.) To add to the weirdness, Firefox does display the videos, but only a freeze-frame. It does not play them when scrolling. Below I have attached screenshots of what I see in Safari and Firefox:

Safari:

The site:

The code inspector:

The result after following the link (which, to be clear, works perfectly on my Mac. So I believe it is properly encoded. And it is also properly linked.)

Firefox:

All in all, I have no idea what's going on in Safari and Firefox. I feel like I've tried everything, and I've scoured the web for answers, to no avail. Thus I e to you for help. I hope we can figure this one out :)

Why won't Safari display these videos despite everything seeming to be correct? Why won't Firefox play them?

Thank you for your time.

‎

‎

PS: In case anyone is wondering, I got the videos to play while scrolling by following this classic example:

// select video element
var vid = document.getElementById('v0');
//var vid = $('#v0')[0]; // jquery option

// pause video on load
vid.pause();
 
// pause video on document scroll (stops autoplay once scroll started)
window.onscroll = function(){
    vid.pause();
};

// refresh video frames on interval for smoother playback
setInterval(function(){
    vid.currentTime = window.pageYOffset/400;
}, 40);

#set-height  
  display block
  height 13500px
#v0
  position fixed 
  top 0  
  left 0  
  width 100%

p font-family helvetica 
  font-size 24px

#set-height
p#time
video(id="v0",  tabindex="0", autobuffer preload)
    <source type="video/webm; codecs=&quot;vp8, vorbis&quot;" src=".webm"></source>
    <source type="video/ogg; codecs=&quot;theora, vorbis&quot;" src=".ogv"></source>
    <source type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" src=".mp4"></source>
    p Sorry, your browser does not support the &lt;video&gt; element.

I've recently "finished" a website, and it uses some transparent videos that move as you scroll the site. They work perfectly on Chrome because I used a VP9 codec through a transparent WebM container.

For Safari, I used an HEVC codec contained in a MOV. I encoded this video from an Apple Prores 4444 with Alpha codec to HEVC directly in Finder. This allowed me to preserve transparency in HEVC. When played on my Mac through Quicktime, it plays with no issues.

Additionally, I included a standard non-transparent H264 if any browser has a hard time with the two above.

However, as my question states, Safari does not display anything. Funnily enough, a month ago, when I was testing the website, it worked divinely on Safari. The HTML for the videos has not changed since that test.

To achieve this transparent video style, I followed this detailed tutorial. If you'd like to be more thorough and take a look at my website's code, you can also find it here. (Remember: The videos work on Chrome, but they don't appear in Safari.) To add to the weirdness, Firefox does display the videos, but only a freeze-frame. It does not play them when scrolling. Below I have attached screenshots of what I see in Safari and Firefox:

Safari:

The site:

The code inspector:

The result after following the link (which, to be clear, works perfectly on my Mac. So I believe it is properly encoded. And it is also properly linked.)

Firefox:

All in all, I have no idea what's going on in Safari and Firefox. I feel like I've tried everything, and I've scoured the web for answers, to no avail. Thus I e to you for help. I hope we can figure this one out :)

Why won't Safari display these videos despite everything seeming to be correct? Why won't Firefox play them?

Thank you for your time.

‎

‎

PS: In case anyone is wondering, I got the videos to play while scrolling by following this classic example:

// select video element
var vid = document.getElementById('v0');
//var vid = $('#v0')[0]; // jquery option

// pause video on load
vid.pause();
 
// pause video on document scroll (stops autoplay once scroll started)
window.onscroll = function(){
    vid.pause();
};

// refresh video frames on interval for smoother playback
setInterval(function(){
    vid.currentTime = window.pageYOffset/400;
}, 40);

#set-height  
  display block
  height 13500px
#v0
  position fixed 
  top 0  
  left 0  
  width 100%

p font-family helvetica 
  font-size 24px

#set-height
p#time
video(id="v0",  tabindex="0", autobuffer preload)
    <source type="video/webm; codecs=&quot;vp8, vorbis&quot;" src="https://www.html5rocks./tutorials/video/basics/Chrome_ImF.webm"></source>
    <source type="video/ogg; codecs=&quot;theora, vorbis&quot;" src="https://www.html5rocks./tutorials/video/basics/Chrome_ImF.ogv"></source>
    <source type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" src="https://www.html5rocks./tutorials/video/basics/Chrome_ImF.mp4"></source>
    p Sorry, your browser does not support the &lt;video&gt; element.

• javascript
• html
• firefox
• video
• safari

• For FF: You keep setting the currentTime in an ever running requestAnimationFrame loop. The value to which you set this currentTime is rounded and thus always the same. The scroll event already fires at the same max-rate as rAF, so get rid of that loop. – Kaiido Commented Jul 8, 2021 at 5:28
• For Safari, your server doesn't seem to accept range requests. – Kaiido Commented Jul 8, 2021 at 5:34
• @Kaiido Hi there, thanks for your answers. Can you please clarify? especially with Safari. I don't know what you mean by "my server isn't accepting range requests." What can I do to make my server accept those requests? I do not self-host, I use Bluehost. On Firefox, what do you mean by "The scroll event already fires at the same max-rate as rAF"? I don't see where you say the code is rounding currentTime. Again, thank you – Inereper Commented Jul 8, 2021 at 19:25
• For Safari: stackoverflow./questions/27712778/… For Firefox I mean that if you only listen to the scroll event it should work better. And your code isn't rounding currentTime, the browser is (to the nearest frame) – Kaiido Commented Jul 8, 2021 at 23:52

1 Answer 1

The issue here is that you are listing the .webm source first in your video tag. Browsers will use the first supported source, and Safari does support .webm containers. Since Chrome et al do not support .mov (Quicktime) containers, you can instead invert the order, showing the .mov option first in the list. Chrome will skip over it and use the .webm file, and Safari will happily use the .mov version.