I'm trying to hide a video while it's loading (e.g. the black window with just a loading spinner). The only class I've found that sort of made sense is the .vjs-has-started one but the loading screen still shows with the following CSS. I also didn't see anything in the javascript api that meets this need (sorry if I missed something).
.video-js {
display: none;
visibility: hidden;
}
.video-js.vjs-has-started {
display: block;
visibility: visible;
}
I've also tried adding .vjs-playing into the mix both in place of an in conjunction with .vjs-has-started. Any thoughts on getting this to work or a answer about why it won't currently would help. If I need to I can work on adding this to video.js if it's not already there but I first wanted to get your definitive answer on the current state of video.js for this functionality.
I added the vjs-waiting class to be able to accomplish this now vjs-waiting can be used in css to show and hide the content see the pull-request for more details.
Example:
.vjs-waiting {
visibility: hidden;
background: transparent;
}
.vjs-loading-spinner {
display: none !important;
}
Reference - https://github.com/videojs/video.js/pull/1351
You could use the vjs-waiting
.vjs-waiting {visibility: hidden;}
Hey I have been struggling with this too, Docs are not intuitive at all!
Im implementing Video JS in React Hooks, so I solved with loadingSpinner set to false;
useEffect(() => {
let player = videojs('my-player',{
autoplay: 'muted',
sources: [
{
src: videoUrl, // m3u8 format
type: "application/x-mpegURL"
}
],
controlBar: false,
loadingSpinner: false
});
player.play()
return () => {
player.dispose()
}
}, [])
Hope it helps! =)
Related
In vuetify they have helper classes for typography.
for example, .display-4 goods for h1. here the full list.
When I choose display-1 for some element, In all resolutions the class gets the same font size (34px).
I was expecting to:
.display-4 will have font size of 34px in screen wide of 1024px.
.display-4 will have font size of 18px in screen wide of 300px.
According to this I have two questions, why is that? and how to make my font size elements be responsive using vuetify?
Update
Vuetify version 1.5
Take a look at display helpers example to see how to use a class when hitting a breakpoint. That being said, you can use dynamic class binding and breakpoint object in Vuetify.
Example:
:class="{'subheading': $vuetify.breakpoint. smAndDown, 'display-2': $vuetify.breakpoint. mdAndUp}"
Vuetify version 2
breakpoint object
Display
My solution changes font-sizes globally in the variables.scss file:
This is assuming you're using Vuetify 2 and #vue/cli-service 3.11 or later.
Step 1:
In src/scss/ create _emptyfile.sass and _font-size-overrides.scss.
In the _emptyfile.sass you can add this comment:
// empty file to workaround this issue: https://github.com/vuetifyjs/vuetify/issues/7795
Step 2:
In the _font-size-overrides.scss file:
/**
* define font-sizes with css custom properties.
* you can change the values of these properties in a media query
*/
:root {
--headings-size-h1: 28px;
--headings-size-h2: 22px;
#media #{map-get($display-breakpoints, 'lg-and-up')} {
--headings-size-h1: 32px;
--headings-size-h2: 26px;
}
}
Step 3:
In the variables.scss file (where you override the Vuetify variables):
/**
* Override Vuetify variables as you normally would
* NOTE: remember to provide a fallback for browsers that don't support Custom Properties
* In my case, I've used the mobile font-sizes as a fallback
*/
$headings: (
'h1': (
'size': var(--headings-size-h1, 28px),
),
'h2': (
'size': var(--headings-size-h2, 22px),
)
);
Step 3:
In the vue.config.js file:
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `#import "#/scss/_emptyfile.sass"` // empty file to workaround this issue: https://github.com/vuetifyjs/vuetify/issues/7795
},
scss: {
prependData: `#import "#/scss/variables.scss"; #import "#/scss/_font-size-overrides.scss";`,
}
}
},
};
font-sizes globally in the variables.scss file
html {
font-size: 90%;
#media only screen and (min-width: 600px) {
font-size: 94%;
}
#media only screen and (min-width: 1000px) {
font-size: 98%;
}
#media only screen and (min-width: 1200px) {
font-size: 100%;
}
}
This question already has an answer here:
Define variables in Sass based on classes
(1 answer)
Closed 6 years ago.
i am making color changer for my web, is it possible to make variable like this :
.red { $color: red; $background: red; }
.green { $color: green; $background: green; }
.blue { $color: blue; $background: blue; }
thanks
There's nothing inherently wrong with your SASS here - at least in principle - but syntatically it's a tad skewed. Also, what your trying to do though requires so client side run-time code for it to be implemented.
First up though you don't actually need the variables - but we'll run with it. So change your sass to
$red: #ff1a1a;
$green: #5cd65c;
$blue: #1a75ff;
.blue { background-color: $blue; }
.green { background-color: $green }
.red { background-color: $red }
assuming this generates a CSS file and your importing this into your HTML page you'll need a little bit of Javascript to apply the appropriate colour class to the element you want to take on this property.
Assuming you have 3 elements ( buttons ) with unique ID's, which when clicked will change the background colour of an element id=foo you could have something like
var changeColor = function(col) {
document.getElementById("foo").className = col
}
document.getElementById('buttonblue').addEventListener('click',
function() {
changeColor('blue');
}, false);
document.getElementById('buttongreen').addEventListener('click',
function() {
changeColor('green');
}, false);
// ... etc etc for each color button you have
This is far from clean or modularised code, but hopefully it outlines the principle of the process which you need to follow
Here's a working codePen with the example: http://codepen.io/anon/pen/rewoOY
USING VIDEO.JS in Adobe Muse
Currently I have poster image configured to display at beginning of video,
when video has concluded I'd like the poster image to re-appear. Thanks for any help!
In the future the best way to do this will be through css. I just added an issue for it.
.video-js.vjs-ended .vjs-poster {
display: block;
}
For now there's two ways using javascript that should work.
var myPlayer = videojs(myId);
myPlayer.on('ended', function(){
this.posterImage.show();
});
// or
myPlayer.on('ended', function(){
this.trigger('loadstart');
});
You'll want to test both for your specific use case.
This worked for me! Video JS 6.6
var video_player;
$(document).ready(function()
{
// 'videoplayer' is the ID of our <video> tag
videojs("my-video", {}, function()
{
video_player = this;
video_player.on('ended', function()
{
video_player.posterImage.show();
$(this.posterImage.contentEl()).show();
$(this.bigPlayButton.contentEl()).show();
video_player.currentTime(0);
video_player.controlBar.hide();
video_player.bigPlayButton.show();
video_player.cancelFullScreen();
});
video_player.on('play', function()
{
video_player.posterImage.hide();
video_player.controlBar.show();
video_player.bigPlayButton.hide();
});
});
});
You should use the following as specified here
var player = videojs('#example_video_1', {}, function() {
this.on('ended', function() {
player.exitFullscreen();
player.hasStarted(false);
});
});
For video.js version 7.8.1 in 2020, following #chukwuma-nwaugha answer, I ended up with this:
var options = {};
var player = videojs('example_video_1', options, function onPlayerReady() {
this.on('ended', function() {
if (player.isFullscreen()) {
player.exitFullscreen();
}
player.hasStarted(false);
});
});
This worked for me:
/* Show poster when paused or stopped */
.video-js.vjs-default-skin.vjs-paused .vjs-poster {
display:none !important;
}
.video-js.vjs-default-skin.vjs-ended .vjs-poster {display:block !important;}
I am using VideoJS 5.12.6. None of the solutions above worked for me. I ended up using:
myPlayer.on('ended', function(){
$('body .vjs-poster').fadeIn();
});
I upvoted #heff's reply following the downvote as CSS is working in July 2018.
After the class:
.vjs-has-started .vjs-poster {
display: none;
}
Add the class:
vjs-ended .vjs-poster {
display: inline-block;
}
That will restore the poster to its default visible state. The vjs-ended class must come after the vjs-has-started class unless you want to increase the class specificity.
This is working for me on two separate projects. I love the way Video.js allows me to do so much in CSS without having to struggle with JavaScript.
You can use css to display poster image :
.video-js.vjs-ended .vjs-poster {
display: block;
}
Please note : you must remove poster attribute from html video tag :
<video id="my-video" style="position: unset"
class="video-js vjs-theme-fantasy"
controls
preload="auto"
poster="MY_VIDEO_POSTER.jpg"
data-setup="{}">
To be like that :
<video id="my-video" style="position: unset"
class="video-js vjs-theme-fantasy"
controls
preload="auto"
data-setup="{}">
I've been working on building out some Less files to help speed up my CSS workflow, and also to help produce more efficient, cleaner CSS.
The way I see it:
Mixins are a great way to help speed up the workflow, but they have the drawback of potentially making the outputted CSS longer than necessary.
Extending classes is the ideal solution for ensuring the amount of duplicate style declarations is minimized, helping clean that up...
So, to help balance things out I wrote out a set of standard, commonly used styles, using dummy classes (they are stored in a file which is imported by reference, so the styles are only output if they get extended).
I set all of my Mixins to extend these classes wherever possible, which worked great for the most part.
However, I realized my pitfall once I got to my media queries... I can't extend those classes within the media query, which would be fine normally, I would just remember not to do so.. But since the Mixins also now use my extends, I can now no longer use them inside media queries either.
I'm not willing to avoid using the Mixins inside of the media queries because of this, but I'd really love to be able to find a way to keep extending classes within them to keep my output as clean as possible.
The only idea I've thought of so far is to add an extra parameter to every Mixin to specify wether it should extend or not, but that's less than ideal.
My hope is that someone can come up with a much more clever solution, that would allow me to maintain the benefit of Mixins which extend base style classes, but also maintain easy usability, without over complicating things. Might be a tall order, but here's hoping.
In case my explanation was hard to follow, this is what I would have hoped to be able to do, but is not currently possible:
Ideal Input
// extensions.less
.block {
display: block;
}
// mixins.less
#import (reference) "extensions";
.mixin {
&:extend(.block);
margin: auto;
}
// styles.less
#import "mixins";
.element1 {
.mixin();
}
.element2 {
.mixin();
}
#media only screen and (max-width: 768px) {
.element3 {
.mixin();
}
.element4 {
.mixin();
}
}
Ideal Output
// styles.css
.element1, .element2 {
display: block;
}
.element1 {
margin: auto;
}
.element2 {
margin: auto;
}
#media only screen and (max-width: 768px) {
.element3, .element4 {
display: block;
}
.element3 {
margin: auto;
}
.element4 {
margin: auto;
}
}
In short, yes, currently it is somewhat possible but requires some additional wrapping for a top level classes:
// extensions.less
.block {
display: block;
}
// mixins.less
#import (reference) "extensions";
.mixin() {
&:extend(.block);
margin: auto;
}
// styles.less
#media all { // !
#import "mixins";
.element1 {
.mixin();
}
.element2 {
.mixin();
}
}
#media only screen and (max-width: 768px) {
#import (multiple) "mixins";
.element3 {
.mixin();
}
.element4 {
.mixin();
}
}
.element1 and .element2 (and any other class to extend .block) have to be put into #media all because currently:
Top level extend matches everything including selectors inside nested media
So if .element1 and .element2 stay in the global scope they leak into every other #media .block declaration.
(Hmm, actually for me this "top level extend matches everything" thing looks questionable and contradicts another "extend inside a media declaration should match only selectors inside the same media declaration" rule (obviously because global scope = #media all thus they should work identically)).
I have a website that I have added some basic Mootools animation to. Here is the page of the website i have a question on:
http://www.humsdrums.com/portfolio/webdesign.html
You will notice that when you mouse over the large images, they fade and a magnifying glass tweens down. Here is the Mootools class called "Magnify" I made for this:
var Magnify = new Class({
Implements : [Options, Events],
options : {
},
initialize : function (item, image, options)
{
this.setOptions(options);
this.div = document.id(item);
this.img = $$(image);
this.tweenBackground = new Fx.Tween(this.div,{
duration:'250',
property:'background-position'
});
this.div.addEvent('mouseenter', this.reveal.bind(this));
this.div.addEvent('mouseleave', this.hide.bind(this));
},
reveal : function()
{
this.tweenBackground.cancel();
this.tweenBackground.start('175px -78px', '175px 90px');
this.img.tween('opacity', .15);
console.log('mouse over');
},
hide :function ()
{
this.tweenBackground.cancel();
this.tweenBackground.start('175px 90px', '175px -78px');
this.img.tween('opacity', 1);
}
});
I then need to initialize an instance of the class for each element i want to do this by grabbing the css id.
window.addEvent('domready', function()
{
var magnify1 = new Magnify('p1', '#p1 img');
var magnify2 = new Magnify('p2', '#p2 img');
var magnify3 = new Magnify('p3', '#p3 img');
var magnify4 = new Magnify('p4', '#p4 img');
});
What I want to be able to do is simple give each element I want to have this functionality a CSS class of "magnify so I don't have to use individual ID's and add another instance of the Mootools class every time.
If I the element a CSS class and put it into my Mootools class, it breaks. Even if it didn't break, it seems like Mootools would simply make all elements with that CSS class animate at the same time when only one is moused over.
How would I detect which instance of the "magnify CSS class is being moused over? My only thoughts were to find a way to grab all the elements with the "magnify" CSS class, put them into an array and then check to see if the item being hovered over equals one of the items in the array. I don't know how to do that or if that is the best way.
Any help or suggestions would be great! Let me know if you want to see more code or if I can explain something better.
you need to code to patterns more. first of all - you have a relationship of 2 elements - a containing div and an image.
your event is actually on the parent el but you also need to reference and animate the inner element (the image).
your selector is simply div.item-port > img if you want to grab all images. div.item-port > img ! div.item-port will grab the parent divs instead of those that have an image as direct child only. etc.
then you need to decide what element to attach the event to. you have many choices in your markup.
before you even get there, you have a a href which wraps BOTH your elements. that allows you to use a cross-browser :hover pseudo.
you can very easily do in pure css:
div.port-item {
/* defaults you already have and then ... */
background-position: 175px -78px;
-webkit-transition: all 0.2s ease-out 0s;
-moz-transition: all 0.2s ease-out 0s;
-ms-transition: all 0.2s ease-out 0s;
-o-transition: all 0.2s ease-out 0s;
transition: all 0.2s ease-out 0s;
}
.portfolio-item a:hover div.port-item {
background-position: 175px 90px;
}
.portfolio-item a:hover img {
opacity: .15; // etc for cross-browser
}
only if you want to recover when the browser does not support transitions, you should instantiate your js class. http://jsfiddle.net/wMnzb/4/
var Magnify = new Class({
Implements: [Options],
options: {
parent: 'div'
},
initialize: function (images, options) {
this.setOptions(options);
this.elements = document.getElements(images);
this.attachEvents();
},
attachEvents: function () {
var selector = this.options.parent;
this.elements.each(function (el) {
var parent = el.getParent(selector);
parent.set('tween', {
duration: '250',
link: 'cancel'
});
parent.addEvents({
mouseenter: function () {
this.tween('background-position', '175px 90px');
el.fade(0.15);
},
mouseleave: function () {
this.tween('background-position', '175px -78px');
el.fade(1);
}
});
});
}
});
new Magnify('div.port-item > img');
simplified as much as is feasible, but you get the idea - completely ambiguous from ids and any such repetitive specificity.