Issue loading Mux video asset in collection page

Design help Custom code
1

I’m having trouble getting the Mux video player to load, but only on certain pages on my site.

The video player renders just fine on all normal pages. But when I click play on a page generated from a cms collection (e.g. blog post) it never plays. For blog posts, the video is added via a custom embed element in a rich text field.

However, if I add the custom code for the video player directly into the collection page template, it plays as expected. Ditto for a normal page.

To add the video player, I put this code (below) into a custom code snippet in a rich text field in my cms collection. I started by putting the <script> tag in the page <head>, but for debugging purposes I’m testing with it immediately above the <mux-player> element. I’ve tried it with and without the defer attribute (see below for example snippet).

Here’s an example of a blog post where the video doesn’t play (scroll down to the first video). And here’s an example of a page where it plays as expected.

The only clue I have so far is that in the network tab there’s a request to https://stream.mux.com/

that almost always gets canceled (but not 100% of the time).

I’ve tested this in various browsers and it doesn’t seem to matter which I use. I’ve also tested in incognito mode with no extensions enabled.

Can anyone offer guidance in how I can debug what’s going on? Thank you!

<script src="https://cdn.jsdelivr.net/npm/@mux/mux-player"></script>
<mux-player
  stream-type="on-demand"
  playback-id="<my-playback-id>"
  metadata-video-title="Test VOD"
></mux-player>
2

I’ve narrowed it down to there being a conflict with the @Finsweet attributes/toc library that I’m loading on my site. I’m using several Finsweet libraries but, through process of elimination, if I keep the rest and remove this one the mux video player works. I’m going to keep digging into the code to see what Finsweet TOC script might be doing that affects the video player.

This is the conflicting script tag:

<script defer src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-toc@1/toc.js"></script>
3

Hey @ontologize - Justin from Mux here, just chiming in. Not sure if we’ll be able to help if that other script is doing something it shouldn’t do, but we’ve taken a quick look. However, the link for where the video doesn’t play doesn’t seem to go anywhere (it appears to just be a link with no href value). Can you send a link for the example where it doesn’t work and we can look further.

Also, if you happen to figure it out, we’re all ears on whether there’s something we can fix on our side to avoid issues like these!

4

Thanks! And yeah, this is definitely not due to Mux. It’s due to the Finsweet Attr. plugin I’m using for the table of contents. I’m going to keep debugging and document what I find here for others who hit this conflict in the future. I would imagine it affects other things beyond just Mux.

5

If anyone from @Finsweet is reading this, could I get a non-minified version of the toc.js code hosted on jsdeliver? That is, one where the function and variable names are actually human-legible? That would be super helpful for troubleshooting what’s going on here.

6

Okay, great, thanks @ontologize. Definitely still interested and will follow the thread just in case there’s something we can do to avoid issues like this in the future!

7

@justin-mux unfortunately I don’t have a clear answer. I realized that I could just write my own toc generator by hand in less time than it would take to parse through the minified js of the finsweet npm package. So that’s what I did and now my mux videos play like expected.

The finsweet toc plugin is pretty great and gives you a lot of options. I’m certainly not suggesting people avoid using it!

At a high level, the things I identified that it’s doing that are potentially relevant to my situation are:

  • parsing a particular dom node specified by a queryselector based off a custom finsweet attr that you add to the rich text widget containing your blog post
  • between each h2 adding a <section> tag (and recursively down as far as you specify, I think)
  • generating the toc, which relies on the intersectionObserver API to highlight the toc item based on page scroll location, and which you can then put in, e.g., an aside on your page

So, again, I gave up troubleshooting when I realized I could just re-write the limited functionality I needed faster. I suppose the one thing that might be something to do with mux is whether the mux-player (not react, just plain vanilla html + js) relies on the DOM structure not being mutated? That’s pretty far-fetched and I’m doubting myself even as I’m typing, but that’s all that comes to mind as a potential thing to check.

8

I’m having similar problems with Mux when combined with Finsweet CMS Filter.

In my case the videos play until I select a Filter from the menu. Once a filter is in use, the videos appear to buffer but never start to play.

Here’s the site (the only filters currently setup are Image and Video).

@justin-mux would love your input.

Interestingly, Mux was also having issues with this tool. Same problem, videos buffering and never starting to play. I swapped that out for another tool which works fine.