Hey looks great! Have a question though, is it possible to do go through videos frame by frame (Moving one frame at a time?) I’m thinking of using vimeo.
You can do that but it’s dependant on how you set things up. You’ll probably want a slider assigned to this here
And then some Bubble controls etc
See this demo page which is pretty advanced in the way of slider usage, you can’t use the vimeo player to accomplish this I think and it’s not a perfect setup but it will probably give you some ideas at least.
PM me a bunch of screenshots and I’ll see if I can help you with this.
Ah it can’t be done with Vimeo?
Ok I’ll give it a go.
I downloaded the plugin but I don’t see the inputs for the video ads. Can I get some help?
There’s an action to overlay Ads onto the video player. Take a look at the “Load Ad” action.
Nice!
Is it possible to connect this plugin to Google AdSense?
And if not, do you take commissions?
I’m sorry, whilst it might be possible to do it I’m just not in a position to take on any additional work right now.
Alright, thanks anyway.
Hey Paul,
Can your plugin pay TikTok videos?
Example… https://www.tiktok.com/t/ZTRJmjsF5/?k=1
Or even better, can it play Live TikTok videos?
Thanks,
Jude
Hi Jude,
It can’t play them at the moment but it would probably play them if you had the raw file, so by that I mean a URL and with the filename and extension on the end. I’ve not actually looked into playing tik-tok videos before.
Hi @pork1977gm Could you please point me in the direction of how to setup the CSS file to make a custom theme?
Hi Pork1977gm,
I install you plugin on anothor project and I get an issue in the debugger that Bubble teams told me that I need to contact you about. Here’s the issu I get.
Bug in custom codeTypeError: this.tech_[n] is not a function
at o. (https://dd7tel2830j4w.cloudfront.net/f1647631738724x865181108378423800/video-js.min.7.18.1.js:20:156705)
at e.ready (https://dd7tel2830j4w.cloudfront.net/f1647631738724x865181108378423800/video-js.min.7.18.1.js:12:27017)
at e.techCall_ (https://dd7tel2830j4w.cloudfront.net/f1647631738724x865181108378423800/video-js.min.7.18.1.js:20:156515)
at e.loop (https://dd7tel2830j4w.cloudfront.net/f1647631738724x865181108378423800/video-js.min.7.18.1.js:20:168815)
at HTMLDocument.eval (PLUGIN_1608469100580x213930232373051400/VideoJS-Advanced—MUX–All-Media–update–VideoJS-Player-.js:686:25)
at j (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/037e92b871aec37301a1d0744dd6928921999b44f2cfda11a9d211cd74ba83f3/xfalse/x17/run_debug.js:2:29948)
at k (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/037e92b871aec37301a1d0744dd6928921999b44f2cfda11a9d211cd74ba83f3/xfalse/x17/run_debug.js:2:30262)
at root (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/037e92b871aec37301a1d0744dd6928921999b44f2cfda11a9d211cd74ba83f3/xfalse/x17/run_debug.js:2:31635)Bug in custom codeTypeError: this.tech_[n] is not a function
at o. (https://dd7tel2830j4w.cloudfront.net/f1647631738724x865181108378423800/video-js.min.7.18.1.js:20:156705)
at e.ready (https://dd7tel2830j4w.cloudfront.net/f1647631738724x865181108378423800/video-js.min.7.18.1.js:12:27017)
at e.techCall_ (https://dd7tel2830j4w.cloudfront.net/f1647631738724x865181108378423800/video-js.min.7.18.1.js:20:156515)
at e.loop (https://dd7tel2830j4w.cloudfront.net/f1647631738724x865181108378423800/video-js.min.7.18.1.js:20:168815)
at HTMLDocument.eval (PLUGIN_1608469100580x213930232373051400/VideoJS-Advanced—MUX–All-Media–update–VideoJS-Player-.js:686:25)
at j (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/037e92b871aec37301a1d0744dd6928921999b44f2cfda11a9d211cd74ba83f3/xfalse/x17/run_debug.js:2:29948)
at k (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/037e92b871aec37301a1d0744dd6928921999b44f2cfda11a9d211cd74ba83f3/xfalse/x17/run_debug.js:2:30262)
at root (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/037e92b871aec37301a1d0744dd6928921999b44f2cfda11a9d211cd74ba83f3/xfalse/x17/run_debug.js:2:31635)
Are you playing youtube videos by any chance?
No it’s Vimeo
Ah ok, so the catch when playing either Vimeo or YouTube videos within the VideoJS player is, that although they will play and some of the basic actions will work, the libraries which we use to make it work are unfortunately outdated and the code isn’t maintained to support the newer versions of VideoJS, more so with Vimeo because it breaks their terms and conditions which I think is probably the main reason. They can be prone to a few errors and it was this reason why I put in both native players for those types of videos. It’s a bit of a mix and match really, not an ideal solution I will admit but the videos should still play.
If there’s a particular action which runs that’s causing the error then I maybe able to fix it, you’ll have to let us know, but other than that… it’s about all I can do right now since I’m swamped with other jobs.
Sorry I can’t give you better news than that! Do a search on this post only for Vimeo as I think I wrote something up about it.
@pork1977gm Hi Paul, could you please let me know about which items need to be included in the CSS file to make a custom skin?
Sorry for the delay, I don’t know all the items because there are so many within videoJS but I can send you over an example CSS file which you can modify. You may have to research the class names if they’re not named in a way which make it obvious to what they control.
If you want me to email you the file instead then just let me know your email address.
.vjs-theme-custom {
--vjs-theme-custom--primary: yellow;
--vjs-theme-custom--secondary: #FFFFFF
}
.vjs-theme-custom .vjs-control-bar {
height: 50px;
background: none;
background-image: linear-gradient(0deg, #000, transparent);
background-color: red
}
.vjs-theme-custom .vjs-button .vjs-icon-placeholder:before {
line-height: 50px
}
.vjs-theme-custom .vjs-play-progress:before {
display: none
}
.vjs-theme-custom .vjs-progress-control {
position: absolute;
top: 0;
right: 0;
left: 0;
width: 100%;
height: 0;
}
.vjs-theme-custom .vjs-progress-control .vjs-progress-holder {
position: absolute;
top: -8px;
right: 0;
left: 0;
width: 100%;
margin: 0;
height: 8px
}
.vjs-theme-custom .vjs-play-progress {
background-color: var(--vjs-theme-custom--primary)
}
.vjs-theme-custom .vjs-remaining-time {
order: 1;
line-height: 53px;
text-align: left
}
.vjs-theme-custom .vjs-play-control {
order: 2;
flex: 8;
font-size: 1.75em
}
.vjs-theme-custom .vjs-fullscreen-control,
.vjs-picture-in-picture-control,
.vjs-volume-panel {
order: 3
}
.vjs-theme-custom .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal {
height: 100%
}
.vjs-theme-custom .vjs-mute-control {
display: none
}
.vjs-theme-custom .vjs-volume-panel {
margin-left: .5em;
margin-right: .5em;
padding-top: 1.5em
}
.vjs-theme-custom .vjs-volume-bar.vjs-slider-horizontal,
.vjs-volume-panel,
.vjs-volume-panel.vjs-volume-panel-horizontal:hover,
.vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal,
.vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal,
.vjs-volume-panel:hover,
.vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal {
width: 3em
}
.vjs-theme-custom .vjs-volume-level:before {
font-size: 1em
}
.vjs-theme-custom .vjs-volume-panel .vjs-volume-control {
opacity: 1;
width: 100%;
height: 100%
}
.vjs-theme-custom .vjs-volume-bar {
background-color: transparent;
margin: 0
}
.vjs-theme-custom .vjs-slider-horizontal .vjs-volume-level {
height: 100%
}
.vjs-theme-custom .vjs-volume-bar.vjs-slider-horizontal {
margin-top: 0;
margin-bottom: 0;
height: 100%
}
.vjs-theme-custom .vjs-volume-bar:before {
content: "";
z-index: 0;
width: 0;
height: 0;
position: absolute;
top: 0;
left: 0;
border-color: transparent transparent hsla(0, 0%, 100%, .25);
border-style: solid;
border-width: 0 0 1.75em 3em
}
.vjs-theme-custom .vjs-volume-level {
overflow: hidden;
background-color: transparent
}
.vjs-theme-custom .vjs-volume-level:before {
content: "";
z-index: 1;
width: 0;
height: 0;
position: absolute;
top: 0;
left: 0;
border-left: 3em solid transparent;
border-bottom: 1.75em solid var(--vjs-theme-custom--secondary);
border-right: 0 solid transparent;
border-top: 0 solid transparent
}
.vjs-theme-custom .vjs-playback-rate .vjs-playback-rate-value {
pointer-events: none;
font-size: 1.5em;
line-height: 3.4;
text-align: center
}