I’m not too sure on whether browsers and video tags support this protocol on their own.
Have you tried using a real URL like that in the player?
You may have to set the mime type field to rtmp/mp4 as I’ve not done any testing with this protocol.
Try testing with these fields on the demo page…
RTSP and RTMP are similar but different protocol, I tried putting rtmp/mp4 and also rtsp/mp4 but, it said that media source is not compatible.
Hi,
I have a couple of questions related to this plugin,
The reason I’m asking is that in my application, people can provide URLs from different sources. So, if the Google Drive files are larger than 100MB, should the responsibility of handling them be on the end-user or the application side?
first one
https://player.vimeo.com/video/834878822?badge=0&autopause=0&player_id=0&app_id=58479
second one
https://vimeo.com/834878822?share=copy
Hello,
I was wondering if anyone managed to build a custom theme that looks like Netflix’s player? Something similar to this:
Is there a way I can have the skip/rewind buttons (the seeking) next to the big play button in the center?
I’ve tried several themes but it looks like the buttons are stuck at the bottom left and when I try to adjust the code manually I end up having them vertically aligned haha.
Also a second question, is there a way where if the user taps on the screen the big play button is shown (on mobile)? I noticed that when you click on the video you can automatically pause it but it doesn’t work on mobile and you have to manually locate the small pause button on the bottom left.
My goal is when a user clicks on the video the big play button and the skip/rewind next to it are shown and auto hide if not touched again.
Any help will be greatly appreciated 
Hi @tahycoon
I know there was a type of Netflix skin that was created some years back for videoJS but it’s quite old and didn’t work with the version of the videoJS that was in the plugin at the time I created it. That being said, it can be done though.
I’m just working on getting through a list backlog items that have come my way during the Christmas period, so when I get a bit of time I’ll take a look for you. If I can make it work then I’ll add “Netflix” to the available themes that are already in the themes dropdown in the settings.
Regarding the icons which overlay the actual video, for the time being you can simply use Bubble images etc to do that. Will try not to keep you waiting too long, speak soon.
Paul
Hi @tahycoon
I’ve fixed the mobile issue where a tap/touch of the player wouldn’t play/pause the video, if you update the plugin to v1.313.0 you should hopefully see that working now. Be sure to refresh your editor before hand so you can see the update.
You’ll need to make sure both these options are not checked for it to work, since they will override the behaviour.
Regarding the Netflix skin, I’ve added a Netflix option into the themes dropdown. It’s not a perfect match and it’s an adaption of a theme which somebody already created, but it wouldn’t work on it’s own so it’s had a few tweaks made to it.
Now, you may want to customize it for your needs and if you do, then you can set the theme to the Base option and insert this code below directly into the Settings > Style options within your editor, then you can tweak it. Make sure you only have one player on the page.
If you (or anyone!) have to change it and you end up improving the CSS, let me know and I’ll check it for you and override the version which gets used upon selecting the Netflix option in the themes dropdown.
So to test/change it, set the themes option to Base
Now in the Settings, paste the following CSS straight into the script section.
The bit which reads: font-size: 12px controls the size of pretty much everything. If you want to get the two seek controls into the control bar, some of the CSS will need to change to accommodate the additional space needed, which can be a bit fiddly to get right. Best bet is to use the browser to figure out what to change, then make that same change in the CSS and retest.
To get the seek controls to appear on the player itself (either side of the big play button) I’d probably use Bubble image elements that appear when the Is playing state changes to No.
<style>
/* Player Skin Designer for Video.js http://videojs.com To customize the player skin edit the CSS below. Click "details" below to add comments or questions. This file uses some SCSS. Learn more at http://sass-lang.com/guide) This designer can be linked to at: https://codepen.io/heff/pen/EarCt/left/?editors=010 */
/* The following are SCSS variables to automate some of the values. But don't feel limited by them. Change/replace whatever you want. The color of icons, text, and the big play button border. */
/* The default color of control backgrounds is mostly black but with a little bit of blue so it can still be seen on all-black video frames, which are common. */
@font-face {
font-family: nf-icon;
src: url(https://assets.nflxext.com/ffe/siteui/fonts/nf-icon-v1-86.eot);
src: url(https://assets.nflxext.com/ffe/siteui/fonts/nf-icon-v1-86.eot?#iefix) format('embedded-opentype'), url(https://assets.nflxext.com/ffe/siteui/fonts/nf-icon-v1-86.woff) format('woff'), url(https://assets.nflxext.com/ffe/siteui/fonts/nf-icon-v1-86.ttf) format('truetype'), url(https://assets.nflxext.com/ffe/siteui/fonts/nf-icon-v1-86.svg#nf-icon-v1-86) format('svg');
font-weight: 400;
font-style: normal;
}
.video-js {
/* The base font size controls the size of everything, not just text. All dimensions use em-based sizes so that the scale along with the font size. Try increasing it to 15px and see what happens. */
font-size: 12px;
/* The main font color changes the ICON COLORS as well as the text */
color: #ffffff;
}
/* The "Big Play Button" is the play button that shows before the video plays. To center it set the align values to center and middle. The typical location of the button is the center, but there is trend towards moving it to a corner where it gets out of the way of valuable content in the poster image.*/
.vjs-default-skin .vjs-big-play-button {
/* The font size is what makes the big play button...big. All width/height values use ems, which are a multiple of the font size. If the .video-js font-size is 10px, then 3em equals 30px.*/
font-size: 4em;
/* We're using SCSS vars here because the values are used in multiple places. Now that font size is set, the following em values will be a multiple of the new font size. If the font-size is 3em (30px), then setting any of the following values to 3em would equal 30px. 3 * font-size. */
/* 1.5em = 45px default */
line-height: 1.5em;
height: 1.5em;
width: 1.5em;
/* 0.06666em = 2px default */
border: 0.06666em solid #b7090b;
/* 0.3em = 9px default */
border-radius: 50%;
display: none;
/* Align center */
left: 50%;
top: 40%;
margin-left: -0.75em;
margin-top: -0.75em;
}
.video-js .vjs-play-control, .video-js .vjs-remaining-time, .video-js .vjs-volume-menu-button {
border-right: 1px solid #323232;
}
.video-js .vjs-volume-menu-button .vjs-menu-content:before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
.video-js .vjs-volume-control {
display: flex;
align-items: center;
}
.video-js .vjs-volume-menu-button .vjs-menu-content .vjs-volume-bar {
display: inline-block;
vertical-align: middle;
}
/* The default color of control backgrounds is mostly black but with a little bit of blue so it can still be seen on all-black video frames, which are common. */
.video-js .vjs-control:before {
font-family: nf-icon;
}
.video-js .vjs-control.vjs-volume-menu-button:before {
content: '\e630';
}
.video-js .vjs-control.vjs-captions-button:before {
content: '\e650';
}
.video-js .vjs-control-bar, .video-js .vjs-big-play-button, .video-js .vjs-menu-button .vjs-menu-content {
/* IE8 - has no alpha support */
background-color: #262626;
/* Opacity: 1.0 = 100%, 0.0 = 0% */
background-color: rgba(38, 38, 38, 0.9);
}
.video-js .vjs-control-bar {
background-color: rgba(38, 38, 38, 0.9);
width: auto;
left: 4em;
right: 4em;
bottom: 2em;
border-radius: 0.5em;
}
.video-js .vjs-control-bar:hover .vjs-progress-control {
opacity: 1;
top: -2.5em;
}
.video-js .vjs-control-bar .vjs-menu {
z-index: 2;
height: 100%;
}
.video-js.vjs-fullscreen .vjs-control-bar {
bottom: 4em;
}
.video-js .vjs-current-time {
display: block;
position: absolute;
right: 0;
top: -2.5em;
}
/* Slider - used for Volume bar and Progress bar */
.video-js .vjs-slider {
background-color: #2e2e2e;
background-color: rgba(46, 46, 46, 0.8);
border-radius: 1em;
margin: 0;
}
.video-js .vjs-remaining-time {
flex: 1;
text-align: left;
}
/* The slider bar color is used for the progress bar and the volume bar (the first two can be removed after a fix that's coming) */
.video-js .vjs-volume-level, .video-js .vjs-play-progress, .video-js .vjs-slider-bar {
background: #cacaca;
border-radius: 1em;
}
.video-js .vjs-play-progress {
color: #b7090b;
background: #b7090b;
font-size: 1.3em;
}
.video-js .vjs-play-progress:before {
transition: width 0.1s ease-out, height 0.1s ease-out;
content: "";
top: -0.1em;
border: 0;
background: radial-gradient(#b7090b 33%, #830607);
width: 1em;
height: 1em;
border-radius: 50%;
box-shadow: #000 0 0 2px;
}
.video-js .vjs-play-progress:hover:before {
width: 1.1em;
height: 1.1em;
border: 2px solid transparent;
}
.video-js .vjs-progress-control {
position: absolute;
left: 0;
right: 0;
width: 100%;
padding: 0 4em 0 0.4em;
top: -2.3em;
border-radius: 1em;
transition: top 150ms linear, opacity 150ms linear, transform 150ms linear, -webkit-transform 150ms linear, -moz-transform 150ms linear, -o-transform 150ms linear;
z-index: 1;
opacity: 0;
}
.video-js .vjs-progress-control:hover .vjs-progress-holder {
font-size: inherit;
}
.video-js .vjs-progress-control .vjs-mouse-display {
background: #cacaca;
}
.video-js .vjs-progress-control .vjs-mouse-display:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
border-top-color: #262626;
border-width: 0.8em;
right: 25%;
margin-left: -0.8em;
}
.video-js .vjs-time-tooltip {
background: #cacaca !important;
color: #b7090b;
}
.video-js .vjs-time-tooltip:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
border-top-color: #262626;
border-width: 0.8em;
right: 25%;
margin-left: -0.8em;
}
.video-js .vjs-play-progress, .video-js .vjs-load-progress {
height: 0.7em !important;
}
.video-js .vjs-progress-holder {
height: 0.9em;
}
/* The main progress bar also has a bar that shows how much has been loaded. */
.video-js .vjs-load-progress {
/* For IE8 we'll lighten the color */
background: #3a3a3a;
/* Otherwise we'll rely on stacked opacities */
background: rgba(46, 46, 46, 0.5);
border-radius: 1em;
height: 0.9em !important;
}
/* The load progress bar also has internal divs that represent smaller disconnected loaded time ranges */
.video-js .vjs-load-progress div {
/* For IE8 we'll lighten the color */
background: #3a3a3a;
/* Otherwise we'll rely on stacked opacities */
background: rgba(46, 46, 46, 0.75);
border-radius: 1em;
height: 0.9em !important;
}
.vjs-loading-spinner {
border: none;
opacity: 0;
visibility: hidden;
animation: vjs-spinner-fade-out 2s linear 1;
animation-delay: 2s;
}
.vjs-loading-spinner:before, .vjs-loading-spinner:after {
border: none;
}
.vjs-loading-spinner:after {
background-image: url(https://assets.nflxext.com/en_us/pages/wiplayer/site-spinner.png);
background-repeat: no-repeat;
background-position-x: 50%;
background-position-y: 50%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
}
.vjs-seeking .vjs-loading-spinner:after, .vjs-waiting .vjs-loading-spinner:after {
animation: vjs-spinner-spin 1.1s linear infinite, vjs-spinner-fade 1.1s linear 1 !important;
animation-delay: 2s;
}
.vjs-seeking .vjs-loading-spinner, .vjs-waiting .vjs-loading-spinner {
opacity: 1;
visibility: visible;
animation: vjs-spinner-fade-in 2s linear 1;
animation-delay: 2s;
}
@keyframes vjs-spinner-fade-in {
0% {
opacity: 0;
visibility: visible;
}
100% {
opacity: 1;
visibility: visible;
}
}
@keyframes vjs-spinner-fade-out {
0% {
opacity: 1;
visibility: visible;
}
100% {
opacity: 0;
visibility: visible;
}
}
</style>
Paul
Hey Paul,
Man you have amazing support, thank you!
I just wanted to point out that the Netflix theme might not be as responsive on smaller screens (< 500 px).
For example, here’s how it looks on 400px width:
If I go to lower screen sizes some buttons get cut off as well. I’m not concerned too much about that because I figured if I disable some buttons it’ll be fine, so don’t worry about it!
Also, I’m not sure if I understand correctly, but if a user taps/touches the mobile screen the video pauses/play just like on the desktop. I’ve been trying to do just that with the new version and with the settings you mentioned disabled but it doesn’t seem to work 
And just two quick questions (Sorry if the post getting too long):
I remember you mentioning something about the relationship with IOS and VideoJS, and that IOS uses its own video player when it’s full screen, right? If so, does that mean functions like “current VideoJS time (secs)” won’t work?
My use case is to implement a continue watching feature just like Netflix, and what I did is set up a condition to run every 60 seconds to update a field in the database linked to the user and set it to “VideoJs Current Time (secs)” only if “Videojs Playing is Yes.”
Works like a charm on any system other than IOS (on fullscreen I think) so I thought I’d get your attention to it in case someone else is running into the same issue.
And speaking of full screen, there is no workaround into having the Bubble icon/images for the seeking buttons as you mentioned to show on full screen, correct?
EDIT: Happy New Year and happy holiday, I hope the next year will be full of surprises for you and everyone else!
No worries, happy to help.
Yeh so that CSS may not be perfect, but I figured it was a start… I’m hoping the community might fix that one for me! If it becomes an issue though, I’ll spend a bit of time on it and figure it out.
So I tested that tapping of play/pause on my iPhone, I didn’t test with other versions of iOS or anything, what mobile do you have? If you create a blank test page with just the video player on it, do you see the same problem? Also, if you have a URL I can just access without having to log it and navigate through your site, can you send me it and I’ll try on my mobile.
The native full screen can’t be adjusted in anyway that I’m aware of but you might be able to run the “overlay” action, I’m not sure. I think I tried something like that in the past to get some sort of image to sit over the player when in full screen but I forget the outcome now.
Current videoJS time (secs) should still work in full screen. I will test that same condition today and see what’s going on with it. Happy New Year to you too!
Paul
Hi @pork1977gm ,
Hope you will see this message can you help with the questions I posted a few days back?
Can you repost it please, sorry didn’t spot it and can’t see it when I scroll up!
Ignore that, I found it, give us a bit and I’ll come back to you.
So it’s the key that is associated to whoever’s Google Drive the videos are stored within. So, if I gave you a URL and it was sitting in my Google Drive and it was 500MB in size, then you’d need to supply my key to play it. I think that will be the case anyway.
Vimeo made some changes some time back which prohibited this plugin from accessing newer types of upload files. I think they’ve modified the JSON which I was relying on to get the MP4 out of a vimeo file and load into the player. Older vimeo files still seem to work but newer ones might require their own player now.
Hey Paul, sorry for the late reply thank you so much for your comments. I am creating a blank test page so you can test out the play button not appearing on touch bug.
Thank you so much for the new update!
But I wanted to ask a really quick question and I hope you’re familiar with it, I tried my best to research and solve it myself before filling up this thread with my questions hahaha.
I was wondering if you’re familiar with an error that reads as follows: “Aborted early because there isn’t enough bandwidth to complete the request without rebuffering. Switching to playlist 2.”
Usually occurs when changing the quality settings of the video which causes it to freeze and stutter every few seconds. When it’s set to auto as well as Auto in the element tab it works fine but it causes it to be blurry more than often. The format of the videos is in m3u8 from MUX which concerns me if MUX changed something that causes some bugs/incompatibility with certain VideoJS versions. I tested it on multiple devices/locations with different wifis as well on blank pages.
There was a long explanation of when I get the error and what it causes but I had to delete it because it looked too much. So I just wanted to ask if you’re familiar with this or if someone ran into it before, and if not then I can provide a detailed explanation here 
I was also wondering if you know any better storage similar to MUX for video streaming apps just like Netflix/Hulu that are compatible with VideoJS? Surprisingly enough, Bubble storage is lighting fast with VideoJS but I was told not to use it for streaming apps because it’s not designed for it.
I have 500GB worth of videos so I’d hate to transfer all that, so I hope there’s a simpler sloution 
EDIT: This’s the video performance rating from MUX tab, not the best:
And here is a related console message that might be useful:
We shouldn’t be worried about this tho since we’re using VideoJS 4, right?
Hi Paul,
Is there any possibility that I can put my Google Drive API key in the demo site to test it?
Hi, no worries about the update.
So for the first question, this is a bug in videoJS which is currently fixed in the later videoJS v8. I have already looked into doing the work to update the plugin, but unfortunately there’s a lot of the additional plugins I use that are not yet compatible with v8, so you might get stuck with that warning for a while. 
I don’t know of any better solutions than MUX, I mean MUX are very good but it can be a little complex to set up the 2-way communications between webhooks and other API calls. Depending on what you’re needs are, I don’t see any issues with using Bubble’s S3 at all, if it works for you and it’s quick and cheaper then use it.
I’ll fix that smoothQualityChange warning, I added that recently but must have missed the warning message!
Paul
Yep, of course. If you PM me your key, I’ll add it into the demo page for you so you can test. Just let me know as soon as you want it removed. If you find that you need your users to enter their own API key (or want to allow that) then I can add an override option in the plugin options for that.
Hi Paul,
How can I PM you?
Hi @pork1977gm ,
Is there a way to prevent users from screen recording? i am using the plugin and it works great but i can’t find a solution to this and it is a deal breaker for my client.
Thanks
I’ll have a look for you. Off the top of my head I can’t remember, but when I’m back at the laptop I’ll take a look.
Please let me know if theres something that can be bone.
So there’s a checkbox in the recorder’s settings which says “Enable screen recording” - have you got that unchecked?
