@pork1977gm
Hello! I purchased the plugin to use MUX as video service on Bubble.
I was playing with your MUX example and found that it was very intuitive to use!
One problem I have is… I’m not sure what to enter in MUX key section in plugin.
What I tried is something like this.
I put MUX_TOKEN_ID in MUX -dev. field and MUX_TOKEN_SECRET in other 10 MUX - Authorization fields.
This gives me error like this.
Can you let me know how to fill MUX data fields in plugins?
Thank you!
When you login to https://dashboard.mux.com/
There’s a settings section where you can go to an API keys section. In there, you’re able to create keys for development and production environments. Those are the keys you enter into the plug-in key sections. If you’re still struggling with it, let us know and I’ll send some screenshots for you in the morning as I’m on mobile at the moment.
Thanks for the quick response.
Do I need to add Basic in front of keys?
I see from your MUX example this.
MUX - dev.
as74qa2tn9oapruflr5rvf9c7
MUX Authorization - dev.
Basic MDI5NGMxYTctZjY1Yi00MjE2LWExMGYtZTkyZGU4NDhjNzBjOnBmSGdIUUxaZCtlNDFxK0N0UStZZloyb3gzZTMvQzB0Q2RjRnNwL1dNVWdmSXJMcmNwU0RmVHUxeDlKeWNETTR1d1E2WC9qOThTRg==
My keys from MUX settings look different. Is there something I need to do with this?
Token ID: 5f6b6990-61dd-44ed-abb4-74e1c18ab939
Token Secret: TulqHCr6hdTfniD+k/ySmh6xeV67WjkbiwxoxXna8RzXoioRvLgRLUMVmQ6ODOdOrz5bYgfF4hT
Check that, you’ll find some instructions on how to create the Basic authorization token needed.
That was a trick! It works! Thank you very much!
No problems! Sorry that section wasn’t in the very first post so you must have missed that one
Firstly, thank you for bringing this plugin into reality. We’re building an app that will allow users to see a waveform (thank you for implementing this!), and leave timestamped comments along it. Your plugin seems to offer possibilities for leaving comments across an audio waveform, but it’s slightly different than the video version.
I’ve subscribed to your plugin and started messing around with a simple layout to create the functionality we’re looking to create. I’ve implemented the waveform, a text input and button that successfully create a comment data Thing, and a makeshift workflow that shows the single comment when the playback time is equal to the comment’s timestamp (secs), and then waits 3 seconds before hiding it again. This, of course, isn’t quite how we’d want to do it with multiple comments, but it demonstrates that the basic bones of commenting work.
However, the actual app we’re building has to show multiple comments above (as icons with vertical lines to the exact points they were left at on the waveform), which ideally can expand to show their content when the current playback time is around their timestamp. We’d also need users to be able to drag these comments across the comments zone to change their timestamp & position. The first part of this is the first step to conquer; displaying icons above the waveform in the exact locations where they’ve been left. Being able to drag them to change the timestamp position is also crucial to this use case.
To reiterate, we would like to do the following:
Attached screenshot of what we have now above. Any help would be much appreciated, and hoping this awesome plugin will work out for this use case!
Thanks so much,
-Josh
Hi Josh,
I’ll write something up and get back to you soon, I’m pretty sure most (if not all) can be done although there’s a fair bit of info in your post there so let me get something together that will hopefully help you.
NOTE: I’ve just had to push an update to fix the following 2 states when the sound wave is visible. You’ll want to update to make use of these!
Mouse (X) coordinates
Mouse (Y) coordinates
Hope that helps,
Paul
Paul,
Thank you so much for your quick & comprehensive support, and for pushing that update to the plugin! I’d noticed there were no x/y coordinates populating when the waveform has been triggered, but wasn’t sure if that was by design or could be added. Works perfectly now.
My main concern at this point is how it would be possible to create a new comment icon each time the user clicks within the zone above the waveform, and keeping those synced with the timestamps they correspond to by x-coordinate? I’m considering creating a horizontal drag-and-drop repeating group (using AirDev’s Canvas blocks) containing one cell for each second of the audio file, each cell of which could contain a hidden comment icon, that gets shown if the user clicks on its’ repeatinggroup cell when they create a comment, or near a relevant x-coordinate (similar to your demo page). However, the only reason I can see to create a repeating group rather than an element in a simple draggable group would be so the user can “create” multiple new comments to be displayed as simultaneous, expandable icons along the timeline above the waveform.
Does this seem like a good solution to creating a new comment each time a user clicks above the waveform, and then allowing them to drag those to different timestamp locations? I suppose then the timestamps could be updated with some math between the cell index and audio file duration. Or would you approach this functionality entirely differently?
I think that sounds like it may be possible. All I can really say is try it out, see how you get on then I don’t mind jumping in taking a look if you get stuck at any point.
This may help you, I created it a while back but I think it could have some similar functionality in it that you’re after.
Hello! @pork1977gm
I’m happily using the plugin. It is so powerful!
I have one question. I use the plugin to use MUX integration. Everything works fine on desktop browser (Chrome and Safari). Upload feature doesn’t work on iOS though.
From your example page, [PLUGIN] - VideoJS Advanced + YouTube, Vimeo, Wistia, HLS, DASH, MUX, Pre-roll Ads (plus more),
Step 1-Create an authenticated MUX URL works fine on iOS
Step 2-Upload media file to the URL given above doesn’t work on iOS
I wonder if this is known issue. Would there be any solution to solve this?
thanks!
Hi Paul, playing around with the video player and I love the fantasy skin! The only thing I want to change is the purple color. How would I do that? Thanks for a great plugin!
Hi guys,
@byun ,
You’re right, there is a problem here. I’ll get this fixed asap.
@noahser
I’ll send you a custom theme for that with the color change. Will get back to you soon.
@byun
The iOS upload issue is now fixed, if you upgrade the plugin to the version I just pushed (1.73.0) hopefully you’ll be good, let me know how you get on. If you are using the same workflow actions that I use in my demo to combine steps 1 and 2, you may need to split those out into separate workflows. Let me know if you run into problems and I’ll help you fix them.
@noahser
Copy this CSS code below and save it as a new .css file, then upload it through the field options in the player. It’s the City theme with the class names renamed. The default purple color you can change by modifying the primary color on the 2nd line, hope this helps!
#9f44b4 is purple.
.vjs-theme-custom {
--vjs-theme-fantasy--primary: #9f44b4;
--vjs-theme-fantasy--secondary: #fff
}
.vjs-theme-custom .vjs-big-play-button {
width: 70px;
height: 70px;
background: none;
line-height: 70px;
font-size: 80px;
border: none;
top: 50%;
left: 50%;
margin-top: -35px;
margin-left: -35px;
color: var(--vjs-theme-fantasy--primary)
}
.vjs-theme-custom.vjs-big-play-button:focus,
.vjs-theme-custom:hover .vjs-big-play-button {
background-color: transparent;
color: #fff
}
.vjs-theme-custom .vjs-control-bar {
height: 54px
}
.vjs-theme-custom .vjs-button>.vjs-icon-placeholder:before,
.vjs-theme-custom .vjs-time-control {
line-height: 54px
}
.vjs-theme-custom .vjs-play-control {
font-size: 1.5em;
position: relative
}
.vjs-theme-custom .vjs-volume-panel {
order: 4
}
.vjs-theme-custom .vjs-volume-bar {
margin-top: 2.5em
}
.vjs-theme-city .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal {
height: 100%
}
.vjs-theme-custom .vjs-progress-control .vjs-progress-holder,
.vjs-theme-custom .vjs-progress-control:hover .vjs-progress-holder {
font-size: 1.5em
}
.vjs-theme-custom .vjs-play-control .vjs-icon-placeholder:before {
height: 1.3em;
width: 1.3em;
margin-top: .2em;
border-radius: 1em;
border: 3px solid var(--vjs-theme-fantasy--secondary);
top: 2px;
left: 9px;
line-height: 1.1
}
.vjs-theme-custom .vjs-play-control:hover .vjs-icon-placeholder:before {
border: 3px solid var(--vjs-theme-fantasy--secondary)
}
.vjs-theme-custom .vjs-play-progress,
.vjs-theme-custom .vjs-play-progress:before {
background-color: var(--vjs-theme-fantasy--primary)
}
.vjs-theme-custom .vjs-play-progress:before {
height: .8em;
width: .8em;
content: "";
border: 4px solid var(--vjs-theme-fantasy--secondary);
border-radius: .8em;
top: -.25em
}
.vjs-theme-custom .vjs-progress-control {
font-size: 14px
}
.vjs-theme-custom .vjs-fullscreen-control {
order: 6
}
.vjs-theme-custom .vjs-remaining-time {
display: none
}
.vjs-theme-custom.nyan .vjs-play-progress {
background: linear-gradient(180deg, #fe0000 0, #fe9a01 16.666666667%, #fe9a01 0, #ff0 33.332666667%, #ff0 0, #32ff00 49.999326667%, #32ff00 0, #0099fe 66.6659926%, #0099fe 0, #63f 83.33266%, #63f 0)
}
.vjs-theme-custom.nyan .vjs-play-progress:before {
height: 1.3em;
width: 1.3em;
background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 125' fill='%23fff'%3E%3Cpath d='M62.153 37.323h2.813v3.246h-2.813zM64.858 40.569h2.813v3.246h-2.813zM67.672 43.814h11.9v3.246h-11.9zM79.572 24.449h2.813v19.365h-2.813zM82.386 37.323h3.244v3.246h-3.244zM85.63 34.132h5.627v3.246H85.63zM91.257 37.323h2.92v12.95h-2.92zM94.177 50.274h2.922V66.21h-2.922zM91.29 66.372h2.887v3.245H91.29zM88.401 69.617h2.889v3.246h-2.889zM27.312 72.863h61.003v3.245H27.312zM73.622 76.108h2.889v3.246h-2.889zM82.563 76.108h2.888v3.246h-2.888zM76.511 79.354h6.053v3.245h-6.053zM61.941 79.354h8.895v3.245h-8.895zM67.947 76.108h2.889v3.246h-2.889zM59.321 76.108h2.888v3.246h-2.888zM27.312 17.917h49.387v3.246H27.312zM76.699 21.162h2.873v3.287h-2.873zM56.372 34.132h5.781v3.191h-5.781zM53.448 37.323h2.924v12.951h-2.924zM50.488 50.274h2.96v16.049h-2.96zM53.448 66.323h2.924v3.257h-2.924zM56.372 69.58h2.949v3.283h-2.949zM65.069 63.213h2.878v6.367h-2.878zM67.947 66.397h17.504v3.22H67.947z'/%3E%3Cpath d='M82.563 63.213h2.888v3.185h-2.888zM73.801 63.213h2.898v3.185h-2.898zM76.699 56.774h2.873v3.145h-2.873zM82.563 56.774h2.888v3.145h-2.888zM85.451 53.444h2.864v3.33h-2.864z'/%3E%3Cpath d='M85.451 56.774h2.864v3.145h-2.864zM65.069 53.444h2.878v3.33h-2.878zM65.069 56.774h2.878v3.145h-2.878zM62.209 56.774h2.86v3.145h-2.86zM21.509 24.327h2.813v45.169h-2.813zM24.323 21.162h2.99v3.165h-2.99zM18.562 69.496h8.75v3.367h-8.75zM15.656 72.863h2.906v9.591h-2.906zM18.562 79.301h8.75v3.153h-8.75zM24.323 76.108h5.743V79.3h-5.743zM33.136 76.108h2.824v6.346h-2.824zM35.96 79.281h5.813v3.173H35.96zM41.774 76.108h2.864v3.173h-2.864zM3.948 40.569h11.708v3.229H3.948zM3.948 43.814h2.921v6.459H3.948zM6.869 47.06h2.934v6.384H6.869zM9.803 50.274h2.909v6.5H9.803z'/%3E%3Cpath d='M12.711 53.444h2.945v6.475h-2.945zM15.656 56.774h5.853v3.145h-5.853z'/%3E%3Cpath d='M18.583 59.919h2.926v3.294h-2.926zM18.583 47.044h2.926v6.4h-2.926zM12.711 43.814h5.872v3.229h-5.872zM15.647 47.044h2.936v3.2h-2.936z'/%3E%3Cpath fill='none' d='M47.439 50.274h3.049v3.17h-3.049z'/%3E%3Cpath d='M73.801 30.94v-3.138h-2.965v-3.354l-37.7-.122v3.151h-3.07v3.462l-2.753-.108-.118 32.381h2.871v3.185h3.07v-3.185h2.824v3.185h-2.824v3.099l20.312.084v-3.257h-2.96V50.274h2.96V37.323h2.924v-3.191h5.781v3.191h2.813l-.108 3.246h2.813v3.246h9.027V30.94h-2.897zM33.136 56.682h-3.07v-3.158h3.07v3.158zm2.824-22.55h-2.824v-3.084h2.824v3.084zm2.907 12.928h2.907v3.184h-2.907V47.06zm5.771 16.153h-2.864v-3.294h2.864v3.294zm2.801-19.399h-2.801v-3.246h2.801v3.246zm6.009-12.766h-2.96v-3.354h2.96v3.354zm8.705 0h-2.832v-3.354h2.832v3.354zm8.683 6.275h-2.889v-3.191h2.889v3.191z'/%3E%3C/svg%3E") no-repeat;
border: none;
top: -.35em
}
If you want the other CSS files then let us know and I’ll make them all available.
All works fine on iOS devices! Thanks for the quick fix 
@pork1977gm thank you for the CSS code works great! Another question, has the vimeo privacy issue been fixed? I’m using Mux right now and it works great but I’m afraid the complexity of their platform will be an issue as I try to scale this thing to an MVP.
No probs!
So this was one of the reasons for adding in the option to have Vimeo’s own player, same for Wistia too really since both native players contain their own set of API functions to control features specific to their individual platforms, some of which won’t be available when you use an outside player (like videoJS).
I forget the various privacy options you can set now and what controls what, but try and do what you need to do and if you run into problems let us know and I’ll look further into it. Their will be some limitations most likely but it depends on what you want.
When you load Vimeo video’s, if you’re not using their own player then use the built in API request called “Get data (vimeo)” as that’s more reliable and quicker when it comes to getting the videoId, or if you decide that you have to use their own player to support something directly in their privacy settings, then I think you have to use their full URL.
Have a play with it anyway and just let us know if you run into any problems.