cabin / videojs-sublime-skin Goto Github PK

it would be nice to know which versions of videojs support this skin

• When we play video for first time, progress bar doesn't work as expected.
• But when first attempt has completed, it works as expected. Means we could click anywhere in progress-bar and video starts from there.
• I think, if progress bar is not working for the first time then there is no point in showing it. Or it will be good to see if it's working so.

From Ben Mueller:

I didn’t realize this before today, but your sublime skin doesn’t actually support audio-only mode in Video.js. Another dev on our team had extended your CSS to include the audio-only case. His modifications work with skin version 1, and are in fact in a production release.

In limited testing, the modifications appear to work in 1.0.3 as well (though further testing is needed). I figured that you might like to have the CSS we’re using so you could, if you so chose, extend the sublime skin to cover audio. (I don’t know if this is precisely the CSS you’d want, but it should be at least a good starting point.

div.audio .vjs-sublime-skin .vjs-big-play-button {  line-height: 30px; margin: -15px; top: 50%; left: 50%; height: 30px; width: 30px; }
div.audio .vjs-sublime-skin .vjs-big-play-button:before { border-width: 15px 0 15px 30px; }

div.audio .vjs-sublime-skin.vjs-has-started .vjs-control-bar {
 display: block !important;
 visibility: visible !important;
 opacity: 1 !important;
 background-color: rgba(7, 20, 30, 1) !important;
}

div.audio .vjs-sublime-skin .vjs-progress-control { right: 55px; }
div.audio .vjs-sublime-skin .vjs-volume-control { right: 20px; }
div.audio .vjs-sublime-skin .vjs-fullscreen-control { display: none; }

Hi Zak/Cabin,

Awesome work! I really love your theme, especially now when Sublime Video is not useable anymore. I just created a very simple demo for your theme. Please see repo

https://github.com/timchunght/videojs-sublime-skin-demo

Feel free to fork or link to my repo. I just think the demo might help others to test it out without having to try out different versions of videojs. :)

I really look forward to v5 support! Thanks.

Best,
Tim

I think we need to set display:none for big play button classes after video starts.
Because for now, it is set only to opacity 0 and the button remain at the center of screen as entity.

Like this
.vjs-sublime-skin.vjs-has-started .vjs-big-play-button{ display: none}

VideoJS Version: 5.19.2
Videojs Sublime Skin Version: 1.0.3

Use exactly as said in the readme file. The result shown below

Why should i use bower AND npm?

On Internet Explorer 9 & 10 the link for video full screen is only active on the white borders.
The center of the button is not.

Adding rgba(255,255,255,0) on .vjs-sublime-skin .vjs-fullscreen-control class seems to resolve the issue

Hello,
I can't see anywhere that the production has stopped but let me give it a try. There is no button to choose or list subtitles a/k/a <track> tag in HTML. Is there any possibilities for implementing one? Regards!

I think it is very important that will have a current time and duration of the video in this skin, if we think like a user, i really want to know this infomations.

Subj.

For example code:

<div class="vjs-quality-button vjs-menu-button vjs-control" tabindex="0">
<div class="vjs-control-content">
<span class="vjs-control-text">480p</span>
<div class="vjs-menu">
<ul class="vjs-menu-content">
<li class="vjs-menu-item vjs-selected" data-val="large">480p</li>
<li class="vjs-menu-item" data-val="medium">360p</li>
<li class="vjs-menu-item" data-val="small">240p</li>
<li class="vjs-menu-item" data-val="auto">auto</li>
</ul>
</div>
</div>
</div>

Thank you greatly for the superb look - videojs-sublime-skin is a sensation with version 4.

Although new to video.js I'm enjoying the responsive features in video.js v5 -- and, although i hesitated before writing here, and also considered having a go at deducing how to mod/merge etc. to get videojs-sublime-skin to work with video.js v5, a bit of a play-around and I became kinda certain I'd ultimately fail.

So, here I am asking if/when it may b4 possible to have videojs-sublime-skin work with video.js v5?

in absolutely any event thank you very much!

The following patch increases the width of the volume bar for easier access on touch devices:

--- videojs-sublime-skin.css    2015-04-14 10:28:18.034587045 -0400
+++ new.css 2015-04-14 10:35:43.469347716 -0400
@@ -45,7 +45,7 @@
   .vjs-sublime-skin .vjs-progress-control {
     position: absolute;
     top: 0;
-    right: 95px;
+    right: 135px;
     bottom: 0;
     left: 50px; }
     .vjs-sublime-skin .vjs-progress-control .vjs-progress-holder {
@@ -132,15 +132,15 @@
     top: 50%;
     right: 55px;
     height: 14px;
-    width: 22px; }
+    width: 60px; }
   .vjs-sublime-skin .vjs-volume-bar {
     background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcCAQAAACw95UnAAAAMElEQVRIx2NgoBL4n4YKGUYNHkEG4zJg1OCRYDCpBowaPJwMppbLRg0eNXjUYBLEAXWNUA6QNm1lAAAAAElFTkSuQmCC);
-    background-size: 22px 14px;
+    background-size: 60px 14px;
     height: 100%;
     width: 100%; }
   .vjs-sublime-skin .vjs-volume-level {
     background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcAQAAAAAyhWABAAAAAnRSTlMAAHaTzTgAAAAZSURBVHgBYwAB/g9EUv+JokCqiaT+U4MCAPKPS7WUUOc1AAAAAElFTkSuQmCC);
-    background-size: 22px 14px;
+    background-size: 60px 14px;
     height: 100%; }
   .vjs-sublime-skin .vjs-current-time,
   .vjs-sublime-skin .vjs-time-divider,

it should be hidden on configuration or add vjs-hidden:display:none; ? because in css file, there is node display hidden or none for .vjs-hidden

The following patch hides new controls/buttons in Video.js 4.12 and allows the use of a post image for the video tag:

--- videojs-sublime-skin.css    2015-04-14 10:28:18.034587045 -0400
+++ new.css 2015-04-14 10:30:53.037430131 -0400
@@ -156,6 +156,8 @@
   .vjs-sublime-skin .vjs-playback-rate,
   .vjs-sublime-skin .vjs-subtitles-button,
   .vjs-sublime-skin .vjs-captions-button,
+  .vjs-sublime-skin .vjs-chapters-button,
+  .vjs-sublime-skin .vjs-caption-settings,
   .vjs-sublime-skin .vjs-mute-control {
     display: none; }

@@ -214,5 +216,6 @@ body.vjs-full-window {
     max-height: 100%;
     padding: 0;
     width: 100%; }
-  .video-js.vjs-using-native-controls .vjs-poster {
+  .video-js.vjs-using-native-controls .vjs-poster,
+  .vjs-sublime-skin.vjs-has-started .vjs-poster {
     display: none; }

Hey, just wanted to let you know about this issue we found while integrating this awesome skin into a video player:

owncloud/files_videoplayer#10

Maybe you want to use the same solution (adding a gradient) as it really helps with light backgrounds as you can see in the screenshot.

Here's the CSS or I can prepare a pull request if you're interested.

/* add a gradient to the video controls */
.vjs-control-bar:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: -moz-linear-gradient(top, rgba(76,76,76,0) 0%, rgba(19,19,19,0.5) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(76,76,76,0) 0%,rgba(19,19,19,0.5) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(76,76,76,0) 0%,rgba(19,19,19,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004c4c4c', endColorstr='#80131313',GradientType=0 ); /* IE6-9 */
}

Hi,
I was to display total time duration and current time of video in the skin by modifying related css settings as shown in the picture:

But I am currently facing an issue of time display overlapping when total time is more than an hour.

See this:

current time and total time of video overlaps for long duration videos.

Can anyone help me to counter this problem?
Can it be done with CSS only or I'll have to use JavaScript to change witdh etc. according to time.

Regards,