Style text track using videojs - javascript

Is there a way to style videojs captions?
The nativeTextTracks is set to false and I can see that the plugin is rendering his own caption.
A new div created for each row of text and the style of that div is inline.
I tried to send settings to the player init but videojs documentation is a bit lacking in this respect.
var player = videojs('my_video', {
'html5': {
nativeTextTracks: false
},
textTracks: {
??? maybe something here ???
},
'fluid': true,
controlBar: {
children: {
'playToggle':{},
'currentTimeDisplay':{},
'timeDivider':{},
'durationDisplay':{},
'progressControl':{},
'fullscreenToggle':{},
}
}
});

This is an undocumented feature, but I managed to find it out by reading the TextTrackSettings source code. Basically, you need to call setValues on the settings of your player, and then to apply the settings with updateDisplay:
let player = videojs('my_video');
player.ready(function(){
var settings = this.textTrackSettings;
settings.setValues({
"backgroundColor": "#000",
"backgroundOpacity": "0",
"edgeStyle": "uniform",
});
settings.updateDisplay();
});

I've done with the css selector >.
This will override the default black background and add a black border around the letters:
.vjs-text-track-cue > div {
background: transparent!important;
text-shadow: 2px 0 black, -2px 0 black, 0 2px black, 0 -2px black,
1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black;
}

I have also faced the same issue when I was needed to add padding. I have investigated a lot and found that cue can only work on following properties:
color
opacity
visibility
text-decoration
text-shadow
background
outline
font
line-height
white-space
For example :
Ex : 1
video::cue {
color:#ccc;
}
Ex : 2
video::cue {
outline:5px solid gray;
}
So we just need to apply css for video::cue to play with Caption Track Text in any Video Player

Related

How to parse and change colors of a CSS Stylesheet on a live website via JavaScript?

Assuming the following CSS stylesheet is used on a live website. What is the best way to parse all the colors used on the stylesheet and change the values with new ones using JavaScript?
In this scenario, I can't create CSS classes to override the colors via plain CSS, so JavaScript is the only way to go. There is no manageable way to add or edit classes. Since they are dynamic and change on each new product release. And changes should happen only on Client side. With no need to store the overrides.
The goal is to re-theme an UI, overriding the existing color with a new color palette. Each old color will be converted into a new one. i.e #FFF -> #000 rgb(33,33,33) -> rgb(66,66,66)
.my-classdas90das {
color: #000000;
}
.other-classAd21 {
background: rgba(255,255,255);
border-color: #222222;
}
.a-class438I {
box-shadow: 1px 1px 1px rgba(44, 44, 44);
}
My first attempt was to loop and access the properties via:
document.styleSheets[1].cssRules[0].style
Is there any better way to do this?
If you have control over the initial colors going into your stylesheet, you can utilize CSS custom properties and change them later in JavaScript with little difficulty. Here's an example:
document.getElementById('change').addEventListener('click', () => {
document.body.style.setProperty('--color1', 'red');
document.body.style.setProperty('--color2', 'pink');
document.body.style.setProperty('--color3', 'green');
document.body.style.setProperty('--color4', 'purple');
});
:root {
background: #eee;
--color1: #555;
--color2: rgba(255, 255, 255);
--color3: #222222;
--color4: rgba(44, 44, 44);
}
div,
button {
margin: 1em;
}
.my-classdas90das {
color: var(--color1);
}
.other-classAd21 {
background: var(--color2);
border: 2px solid var(--color3);
}
.a-class438I {
box-shadow: 1px 1px 1px var(--color4);
}
<div class="my-classdas90das">
my-classdas90das
</div>
<div class="other-classAd21">
other-classAd21
</div>
<div class="a-class438I">
a-class438I
</div>
<button id="change">Change Colors</button>

Dynamically create one or more borders around image

Need to have an unknown number of borders around an image, already made a solution, just want to know whether there are better possibilities.
I have a website with many photo shows. Each show is a JSON file in which each photo is an array entry in that file, e.g.
{
"filename": "02.jpg",
"short": "text under thumbnail",
"title": "A description or explanation above the photo"
}
Normally the photos get a small white border, but sometimes I want to show the location of that photo so in the JSON file I have this additional info for that photo:
"latitude": "51 02 39.73 N",
"longitude": "114 03 47.37 W",
I put a yellow border around the photo as indication that there is location info, so a click on the photo or one of the coordinates (or keyboard M) opens googleMaps to show the location.
Recently I added some videos to some of the photos, so double click the photo (or keyboard V) to start that video. I put a turquoise border around the photo to indicate that there is a video.
In the JSON file it looks like this:
"video": "myvideo.mp4",
Of course all of a sudden I had a photo with location info AND a video, so now I needed 2 borders: a yellow one and a turquoise one...
To complicate matters, I once in a while have a photo with a soundclip and a green border, defined in the JSON file as:
"sound": "myclip.mp3",
thus a photo with 3 different colored borders could also happen.
After reading some stackoverflow box-shadow articles, I came up with the following solution in Javascript to create 1,2,3 or even more borders:
var borderStyle = "";
if (elt.longitude) {
borderStyle = "coordbrdr";
}
if (elt.sound) {
borderStyle += "soundbrdr";
}
if (elt.video) {
borderStyle += "videobrdr";
}
if (borderStyle == "") {borderStyle = "normalbrdr";}
$(elt.imgHTML).attr('class', borderStyle);
and the accompanying css:
.normalbrdr {border:6px solid white;}
.coordbrdr {border:6px solid yellow; cursor:pointer;}
.soundbrdr {border:6px solid lightgreen; cursor:pointer;}
.videobrdr {border:6px solid turquoise; cursor:pointer;}
.coordbrdrsoundbrdr {box-shadow: 0 0 0 6px yellow, 0 0 0 12px green; cursor:pointer}
.coordbrdrvideobrdr {box-shadow: 0 0 0 6px yellow, 0 0 0 12px turquoise; cursor:pointer}
.coordbrdrsoundbrdrvideobrdr {box-shadow: 0 0 0 6px yellow, 0 0 0 12px green, 0 0 0 18px turquoise; cursor:pointer}
.soundbrdrvideobrdr {box-shadow: 0 0 0 6px green, 0 0 0 12px turquoise; cursor:pointer}
So in this way I managed to build the various class values.
My question: Would there be a shorter, or better method to dynamically create different borders ??

Make a character as if it is inside the background but not

I don't feel my headline ticker is good to see for my visitors. it is in please check this link
what I need is to make the headline words inside of the background but readable enough. it is like a shadow. anyone can help please, this site must be submitted tomorrow and be soon launched.
the headline ticker I use is in javascript as below:
<script language="javascript">
//<![CDATA[
var lgth=0;
var info1="Selamat Datang di www.savageryonline.com";
var info2="SavageryOnline ... Tempat Belanja Aman dan Nyaman Bersama Keluarga!";
var info3="Belanja Super Hemat! Kualitas Super Hebat!";
dataTampil=new items(info1,info2,info3);
var ini=0;
var st=0;
var x=dataTampil[0].length;
function items() {
lgth=items.arguments.length;
for (i=0; i<lgth; i++) this[i]=items.arguments[i];
}
function newheadlinez(){
var datShowNow=dataTampil[ini].substring(0,st)+""; document.getElementById("headline").innerHTML=datShowNow; document.getElementById("headline").style.color="white"; document.getElementById("headline").style.cursor="pointer";
if(st++==x) {
st=0; setTimeout("newheadlinez()",5000); ini++; if(ini==lgth) ini=0; x=dataTampil[ini].length;
}
else setTimeout("newheadlinez()",50);
}
//]]>
</script>
these words I need to change like shadow but not and as if it is united with the background. Sorry, I can't give you screenshot for this.
"Selamat Datang di www.savageryonline.com"
"SavageryOnline ... Tempat Belanja Aman dan Nyaman Bersama Keluarga!"
"Belanja Super Hemat!
I try to change it with CSS but it doesn't work. (i'm bad in css).
UPDATE:
I fiddle out the script:
JsFiddle Link
Do you want to try shadow effect..try adding this in #topup
-webkit-box-shadow: inset 1px 1px 5px 6px rgba(0,0,0,0.65);
-moz-box-shadow: inset 1px 1px 5px 6px rgba(0,0,0,0.65);
box-shadow: inset 1px 1px 5px 6px rgba(0,0,0,0.65);
try using opacity property:
{
opacity:0.5;
}

Changing Color When Clicked

I wanted to change the color of a hyperlink when it's clicked.
I used the following code and it worked:
var current = "home";
function home()
{
current = "home";
update2();
}
function comp()
{
current = "comp";
update2();
}
function team()
{
current = "team";
update2();
}
function cars()
{
current = "cars";
update2();
}
function spons()
{
current = "spons";
update2();
}
function update2()
{
if (current == "home"){
document.getElementById('home').style.cssText='color:#FFE006;font-size:20pt;text- shadow: -1px 1px 8px #ff9c00, 1px -1px 8px #ff9c00;';
document.getElementById('comp').style.cssText='color:white;font-size:18pt;text-shadow:;';
document.getElementById('team').style.cssText='color:white;font-size:18pt;text-shadow:;';
document.getElementById('cars').style.cssText='color:white;font-size:18pt;text-shadow:;';
document.getElementById('spons').style.cssText='color:white;font-size:18pt;text-shadow:;';
} else if (current == "comp"){
document.getElementById('home').style.cssText='color:white;font-size:18pt;text-shadow:;';
document.getElementById('comp').style.cssText='color:#FFE006;font-size:20pt;text-shadow: -1px 1px 8px #ff9c00, 1px -1px 8px #ff9c00;';
document.getElementById('team').style.cssText='color:white;font-size:18pt;text-shadow:;';
document.getElementById('cars').style.cssText='color:white;font-size:18pt;text-shadow:;';
document.getElementById('spons').style.cssText='color:white;font-size:18pt;text-shadow:;';
} else if (current == "team"){
document.getElementById('home').style.cssText='color:white;font-size:18pt;text-shadow:;';
document.getElementById('comp').style.cssText='color:white;font-size:18pt;text-shadow:;';
document.getElementById('team').style.cssText='color:#FFE006;font-size:20pt;text-shadow: -1px 1px 8px #ff9c00, 1px -1px 8px #ff9c00;';
document.getElementById('cars').style.cssText='color:white;font-size:18pt;text-shadow:;';
document.getElementById('spons').style.cssText='color:white;font-size:18pt;text-shadow:;';
} else if (current == "cars"){
document.getElementById('home').style.cssText='color:white;font-size:18pt;text-shadow:;';
document.getElementById('comp').style.cssText='color:white;font-size:18pt;text-shadow:;';
document.getElementById('team').style.cssText='color:white;font-size:18pt;text-shadow:;';
document.getElementById('cars').style.cssText='color:#FFE006;font-size:20pt;text-shadow: -1px 1px 8px #ff9c00, 1px -1px 8px #ff9c00;';
document.getElementById('spons').style.cssText='color:white;font-size:18pt;text-shadow:;';
} else if (current == "spons"){
document.getElementById('home').style.cssText='color:white;font-size:18pt;text-shadow:;';
document.getElementById('comp').style.cssText='color:white;font-size:18pt;text-shadow:;';
document.getElementById('team').style.cssText='color:white;font-size:18pt;text-shadow:;';
document.getElementById('cars').style.cssText='color:white;font-size:18pt;text-shadow:;';
document.getElementById('spons').style.cssText='color:#FFE006;font-size:20pt;text-shadow: -1px 1px 8px #ff9c00, 1px -1px 8px #ff9c00;';
}
}
Actually, it worked but a problem arose. As you can see, that I tried to change the properties such as color, size and text shadow when current is set to home/spons/cars/team/comp. current changes when a function is called when a user clicks on a hyperlink.
A problem appears as I told it to do the same properties when it is :hover. Once a button is clicked, its properties are changed, and so are the other hyperlinks, to white color and 18 pt size.
Now, once the user clicks on a hyperlink, it changes the source of a frame, its own properties and other hyperlinks' properties. But once I click it and then hover onto another hyperlink, the properties of hovering don't work but the properties of the javascript work.
If you can't understand my problem then take look at http://www.xphoenix1.hpage.com/ . Once one menu button is clicked, it changes other buttons properties too and stop the hover properties.
If you are able to understand what I'm saying and have a solution to it, then please answer.
Thank You in advance
In fairness to the OP, they wanted to affect some changes that were more than just text color. And, unfortunately, most styling of the :visited state no longer works as it once did.
In addition to the font color, they're also making the font size a little bigger and adding/removing a text shadow.
Though, I agree, this JS approach is a bit over the top.
My suggestion to the OP is have the menu links actually go to separate pages, not just swap out divs. You could then move a "current" class move from link to link by whatever means you wish - even by hand if this is static HTML. Then just style it accordingly:
a.current { //styles }
This way introduces a lot less possibility for things to go wrong, and the navigation would work only with HTML & CSS - no JS required.
this is simple in css
a:hover{background-color:yellow;}
Then use
#home:visited, #comp:visited{
color:red;
}
or better, apply all the relevant anchors with a className, e.g. 'rav' (red after visited ;))
so you can do:
.rav:visited{ color:red; }
Cheers!
Write text color for hyperlink, write like this
a:visited{
color:red;
}
Updated:
Ok got it, if you want to use JQuery, the idea is that you will have the menu as <li> or or any other element and these images as a background image. when you create pics have both the white color text & yellow colored one below other (CSS spriting), onclick of the menu you add a class called selected to the current element and move the image above so the yellow color text will show, then remove selected class from all other menus. for example i have used <a> tag for example.
.menu a{
background-image:url('images/button.png');
}
.menu a.selected {
background-image:url('images/button.png'):0 -50px;
}
$(".menu a").live('click', function() {
$(".menu a").removeClass("selected");
$(this).addClass("selected");
return false;
});
check this post here

How to add border to galleria big image?

Hi I want to add a border to galleria big image. How can I give that?
I give like this
div.galleria-image img{ border: 5px solid #ccc; }
but it cuts right or bottom border and also shows a top border to the thumbail images.
this is my css file.
.galleria-container{position:relative;overflow:hidden; height:570px; margin-bottom:30px; }
.galleria-thumbnails-container { }
.galleria-container img{-moz-user-select:none;-webkit-user-select:none;-o-user-select:none;}
.galleria-stage{position:absolute;top:10px;bottom:80px;left:0px;right:10px;overflow:hidden;}
div.galleria-stage img { border: 1px solid red; }
.galleria-thumbnails-container{height:65px;bottom:0;position:absolute;left:0px;right:10px;z-index:2;}
.galleria-carousel .galleria-thumbnails-list{margin-left:30px;margin-right:30px;}
.galleria-thumbnails .galleria-image{height:50px;width:60px;background:#fff;margin:0 13px 0 0; float:left;cursor:pointer;}
.galleria-counter{position:absolute;bottom:10px;left:10px;text-align:right;color:#fff;font:normal 11px/1 arial,sans-serif;z-index:2; }
.galleria-loader{background:#000;width:20px;height:20px;position:absolute;top:10px;right:10px;z-index:2;display:none;background:url(images/classic-loader.gif) no-repeat 2px 2px; }
.galleria-info{width:50%;top:15px;left:15px;z-index:2;position:absolute;}
.galleria-info-text{background-color:#000;background-color:rgba(0,0,0,.9);padding: 12px;display:none;}
.galleria-info-title{font:bold 12px/1.1 arial,sans-serif;margin:0;color:#fff;}
.galleria-info-description{font:italic 12px/1.4 georgia,serif;margin:0;color:#bbb; }
.galleria-info-title+.galleria-info-description{margin-top:7px;}
.galleria-info-close{width:9px;height:9px;position:absolute;top:5px;right:5px;background-position:-753px -11px;opacity:.5;cursor:pointer;display:none;}
.galleria-info-link{background-position:-669px -5px;opacity:.8;position:absolute;width:20px;height:20px;cursor:pointer;background-color:#000;}
.galleria-info-link:hover,
.galleria-info-close:hover{opacity:.5; }
.galleria-image-nav{position:absolute;top:50%;margin-top:-15px;width:100%;height:31px;left:0; }
.galleria-image-nav-left,
.galleria-image-nav-right{opacity:.7;cursor:pointer;width:16px;height:31px;position:absolute;left:10px;z-index:2;}
.galleria-image-nav-right{left:auto;right:10px;background-position:-300px 0;z-index:2;}
.galleria-image-nav-left:hover,
.galleria-image-nav-right:hover{opacity:1.0;}
.galleria-thumb-nav-left,
.galleria-thumb-nav-right{cursor:pointer;display:none;background-position:-495px 11px;position:absolute;left:0;top:0;height:60px;width:23px;z-index:3;opacity:1.0;}
.galleria-thumb-nav-right{background-position:-578px 11px;border-right:none;right:0;left:auto;}
.galleria-thumbnails-container .disabled,
.galleria-thumbnails-container .disabled:hover{opacity:.6;cursor:default; }
.galleria-thumb-nav-left:hover,
.galleria-thumb-nav-right:hover{opacity:1;/*background-color:#111;*/}
.galleria-carousel .galleria-thumb-nav-left,
.galleria-carousel .galleria-thumb-nav-right{display:block; }
.galleria-thumb-nav-left,
.galleria-thumb-nav-right,
.galleria-info-link,
.galleria-info-close,
.galleria-image-nav-left,
.galleria-image-nav-right{background-image:url(images/classic-map.png);background-repeat:no-repeat;}
div.galleria-image img{ border: 5px solid #ccc; }
any body knows the solution please help me.
When you call galleria(), set the image_margin option to 2 (note: when I tried 1, the bottom margin was chopped). This is what I use:
$('#gallery').galleria({
autoplay: 5000,
data_source: slides,
pause_on_interaction: false,
transition: 'fade',
image_margin: 2
});
My site's css file has the following definition to add a 1px gray border to the large image:
.galleria-stage img {
border: 1px solid #cccccc;
}
Try adding border: 1px solid red; to div.galleria-image img
div.galleria-image img{ border: 1px
solid red; }
Edit: Seems like CSS above will results in the thumbnails having borders too.
Try this:
div.galleria-stage img { border: 1px solid red; }
You need to show the overflow of the parent div's i had this problem and i added and it worked great
.galleria-container {
overflow: visible !important;
}
.galleria-image, .galleria-stage {
overflow: visible !important;
}
.galleria-stage .galleria-images .galleria-image img {
border: 1px solid #333333;
}
It would appear that the imageMargin option needs to be set to twice what it should be.
http://galleria.io/docs/options/imageMargin/
Like I've been trying to put a 6px border around it, and the bottom kept getting cut off, until I set imageMargin to 12.
If your border is for example 4 px then you should set the image_margin variable to 8, if the border is 8px then set it to 16 (the double since you have two sides).
$('#gallery').galleria({
image_margin: 8
});

Categories