cabin / videojs-sublime-skin Goto Github PK
View Code? Open in Web Editor NEWA Video.js skin modeled on SublimeVideo.
License: MIT License
A Video.js skin modeled on SublimeVideo.
License: MIT License
Why should i use bower AND npm?
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,
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>
Hey, just wanted to let you know about this issue we found while integrating this awesome skin into a video player:
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.
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,
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.
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
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!
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; }
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
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!
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; }
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}
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
it would be nice to know which versions of videojs support this skin
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.