Thunder Pack 'Cinema' Stack Not Playing in Safari

Hi @elixirgraphics - I’m just jumping into the Thunder Packs ‘Cinema’ stack for the first time and on undertaking some tests with the golden tubes video material that you made available on your site, I’m finding that the animation plays OK in Firefox, Edge and Chrome browsers however but not in Safari !! Please see here the recently published test page. I’ve cleared my cache but still the problem persists. Any idea’s and/or solutions on how to fix this most welcome ? Kind Regards | Justin :slight_smile:

Does it work on this documentation page for you?

Without troubleshooting anything, my guess would be that perhaps the browser does not like trying to wait for the loader (Transition stack).

Hi @elixirgraphics - yes that link works absolutely fine and the cinema stack plays in Safari on my computer. Despite deleting the ‘Transitions Stack’ as you suggested it still won’t play for me through in Safari !! All of the other browsers are fine. Something else of note is that the video appears in LIVE mode only after I have set the Cinema Height

When it does eventually appear it is also partially obscured by a grey screen running through the centre of the movie Any idea’s and/or solutions on how to fix this most welcome ? Kind Regards | Justin :slight_smile:

My first step would be to create a new, one-page simple project and test it separately. Something very simple – A Conatainer with a Header Paragraph and Cinema stack. If that works ok, try to rebuild the page from scratch. Do it a few stacks at a time and test as you go. If it ceases to work then you’ll have narrowed it down to what your problem is.

Addendum –

Just built a quick test page, and all seems to be working well in Safari here still.

1 Like

Hi @elixirgraphics - I’m pulling my hair out here, as despite publishing a version of your Spark Theme that now includes a new page entitled ‘Cinema’ that includes the looped bronze tubes, I’m still not seeing the animation play in Safari. Google, Firefox and Edge all fine. I’ve even tested it on a different Mac. As this stack is proving to be a bit ‘flakey’ for me I wonder - can you ( or anyone else for that matter ) suggest an alternative stack to ‘cinema’ , as I have spent too long on this already ? . Kind Regards | Justin

Hi again Justin –

I have to disagree about the stack being flakey. It has worked every time I’ve published it here myself in tests today and the example on the documentation page is also working, which is in a more more complex environment.

I’ve published another test here using another of the sample videos as well.

I’m not sure why what you’re publishing is not having the same results as me, but I’m trying to get to the bottom of it for you. If you’d rather use something else than continue to troubleshoot it, that is fine too. I don’t have any recommendations for a different stack however. If you look on the Community site I’m sure you can find something there.

If you’d like to continue to troubleshoot it I’ll need you. to send me your project file I can take a look at it. Make a ZIP file containing the project file and send it to me via We Transfer, or a similar service, and I’ll take a look and see if there’s something that you’ve missed or perhaps configure incorrectly: adam at elixirgraphics dot com

Also, I’ll need you to let me know what version of macOS, RapidWeaver and Stacks you’re using. I assume you’re on the latest Safari version for your OS, but it would be good to know what that version is, too.

Hi @elixirgraphics - and thanks for looking into this for me. A zipped file is on its way. What I find really frustrating about the Cinema stack is the fact that it plays fine in the Firefox, Edge and Chrome browser however does not play in Safari #stumped. Can you confirm that the cinema stack plays OK for you from the following URL : https://dinkypixel.com/cinema/cinema/ I just get a still image at my end. Kind Regards | Justin

Sorry if I was unclear. I’ll try to be clearer –

On the pages you’ve shown me, which you’ve built and published from your computer, I too see only the poster image (the still image). As you’ve described, the video plays in everything except Safari on your pages that you’ve shared with me.

On the other hand, all of the pages I’ve published, using the same videos and Cinema stack, play as they should in Safari, as well as the other browsers for me. I assume you’re also seeing the videos on the pages that I have shared play properly, correct?

This is the reason I was asking for your project file. Thank you for sending it. I am not at my computer though right now. I’ll have a look at it tomorrow when I return to the office.

Your frustration is understandable. That said things like this are a part of web development. Troubleshooting is part of the job.

While it is good you sent the project file, I still need the other information that I requested in my previous post. Please reply with that information.

1 Like

Hi @elixirgraphics - once you’ve downloaded the zipped file from WeTransfer you will see that included in this folder is a .rtf & .pdf file containing the information that you requested. I have also included my specs in the ‘notes’ section of the RW project file that I have submitted. Thank you for looking into why the ‘cinema’ stack is not playing in the safari browser. I have a client that has requested a banner that plays video content. If you need anything more for me please do get in touch. Kind Regards | Justin :slight_smile:

It might be worth noting that (for me at least) the video you are using… https://dinkypixel.com/cinema/resources/golden-tubes-1.mp4 Will play directly in Chome, but not Safari. Indicating the issue is the video itself, not anything on the web page you linked to.

Whereas the version of the video on the Elixir demo posted above will play in all browsers: https://elixirgraphics.com/test/test-for-cinema-safari/resources/golden-tubes-1.mp4

Your version of the video is about 600kb, whereas the demo version is 3mb. So I’d suggest the issue is with the way you’ve compressed it.

FWIW Cinema works perfectly for me.

2 Likes

Hi @TemplateRepo - and thanks for highlighting this. For also confirming that for you also the video isn’t playing in Safari but does play in all other browsers. Interestingly the video that I am using is the same video that @elixirgraphics has provided on the ‘cinema’ stack documentation page . In the folder entitled ‘Looping-Video-Tubes’ sized at 3mb. In other words I haven’t performed any compression and have used the video as supplied. In other tests that I have done and that yielded similar results I have used the compressions utility as suggested by Adam called ‘Miro Video Converter’. It’s a great stack if only I can work out what is going on with Safari ?? Kind Regards | Justin

I can’t help on the video compression front, I use various tools, now of them free I’m afraid. But my experiments above seem to show the issue is the video, not the stack or the page the stack is on. So hopefully that will help you get to the bottom of it.

1 Like

Hi, did you provide both versions, mp4 as well as webm?

Hi @Fuellemann - yes, uploaded/linked to both the .mp3 and webm media. I myself have never used a webm file before. What is it ? And why do I need it ? Kind Regards | Justin

All You Need to Know about WebM Format - Icecream Tech Digest.

Although don’t get sidetracked. The issue here is not the use (or not) of webm, but the fact Safari does not like the compressed version of the video you are using.

EDIT: Or… The way your server is serving video files. I’ve never seen or heard of such an issue, but that doesn’t mean it might not be the case.

Hi, mp4 is for macOS and iOS devices to play the video. webM for e. g. Chrome. You stated you uploaded/linked an mp3 file, which is for audio only. Was this a typo?

Good morning @DinkyPixel

I just published your project, as-is without any changes except to publish it on my server. You can find the live page with the Cinema stack you configured here.

I cannot replicate the problem you’re having on your server here, even using your own project file. This leads me to believe it is something to do with what you’ve published or your server, as the video plays absolutely fine here in Safari, using the project file that you sent me. I suspect something has gone awry with your publishing, the uploaded files or your server / hosting configuration – all of which are out of my control unfortunately.

My suggestion would be to delete from your server what you have published and then to do as I mentioned here and start fresh with a new, simple project file as a test. Once you’ve built that very simple one-page project file, then Republish All Files and give it a test.

My bad @Fuellemann . I meant to say .mp4

Oh crap. I’ve got Cpanel hosting over on GoDaddy. I really hope that it isn’t a server thing as this is potentially could become very ‘chewy’. Could I please ask that you keep the project on the URL https://elixirgraphics.com/test/test-for-justin/cinema/ @elixirgraphics, so that I can show the technicians over at Go Daddy the problem and so that we can compare your version with my version of the page ? Kind Regards | Justin