Im Searching how to customize the player for live use with dash.js,
as browser player not work wel with live session i trying to delete seekbar and time indicators for now, in the future i will search for a seekbar that can manage live buffer.
But I can't find the correct attribute to set seekBar: false and every time indicator off,
I find this list https://docs.videojs.com/tutorial-components.html but the components seems to not work.
Which are the correct attribute to exclude that controls? Or maybe is a syntax problem?
http://jsbin.com/aheVeCOG/2/edit?js,output
Volume control to false work:
var video = videojs('my_video_1', {
children: {
controlBar: {
children: {
volumeControl: false
}
}
}
});
My try don't work
var video = videojs('my_video_1', {
children: {
controlBar: {
children: {
ProgressControl: false
}
}
}
});
Thanks!
Massimo
Just need to fix typo it works, use lowserCase at first character instead:
progressControl instead of ProgressControl
var video = videojs('my_video_1', {
children: {
controlBar: {
children: {
progressControl: false
}
}
}
});
Working example:
http://jsbin.com/damahev/2/edit?html,js,output
I was instructed to use the CSS side to show/hide any undesirable values.
So, I've been using the top four lines in style defn below for mine:
<style>
.video-js .vjs-current-time { display: block; }
.video-js .vjs-time-divider { display: block; }
.video-js .vjs-duration { display: block; }
.video-js .vjs-remaining-time { display: none; }
#.video-js .vjs-mute-control { display: none; }
#.video-js .vjs-volume-menu-button { display: none; }
#.video-js .vjs-volume-bar { display: none; }
#.video-js .vjs-progress-control { display: none; }
</style>
The bottom-four lines (after removing leading '#' char) should work for you.
(Note that you can peruse the linked file 'video-js.css' for current defns.
This worked for me:
this.video = videojs('some-id', {
bigPlayButton: true,
controlBar: {
fullscreenToggle: false,
pictureInPictureToggle: false,
remainingTimeDisplay: false,
volumePanel: false,
currentTimeDisplay: true,
timeDivider: true,
durationDisplay: true
}
})
To make currentTimeDisplay, timeDivider and durationDisplay to work you also need to add this CSS:
.vjs-current-time {
display: inline-block !important;
}
.vjs-time-divider {
display: inline-block !important;
}
.vjs-duration {
display: inline-block !important;
}
Related
I've got problem with converting CSS code for hiding spin box of number input for JSS. My question is how to appropriately convert this code that it will match JSS?
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance:textfield;
}
input: {
'&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
'-webkit-appearance': 'none',
'-moz-appearance': 'none',
'margin': 0
},
'&[type=number]': {
'-webkit-appearance': 'textfield',
'-moz-appearance': 'textfield'
}
}
This should work.
While using introjs.js, I am trying to set the position of a tooltip (.introjs-tooltip) but, if I use the onafterchange event, my code runs, and then the position of the tooltip is set by introjs, and my values for top and left are overwritten. How can I make my change AFTER introjs has done it's calculations for the location of the tooltip?
<div>
<div class="divStep step1">
<span>Nothing much going on here</span>
</div>
<div id="step2" class="divStep step2">
<span>This is step 2</span>
</div>
<div id="step3" class="divStep step3">
<span>This is step 3</span>
</div>
</div>
body {
background-color: #00eeee;
}
.divStep {
display: block;
height: 100px;
width: 400px;
background-color: #fff;
margin: 10px;
padding: 10px;
}
.tt-step2 {
top: 0 !important;
left: 0 !important;
background-color: #ff0000;
}
var myIntro = {
tooltipPosition: 'bottom',
steps: [
{
intro: 'Howdy! This is step 1'
},
{
element: '#step2',
intro: 'This is step 2',
onbeforechange: function(){
console.log('onbeforechange step 2');
$('.introjs-tooltip').addClass('tt-step2');
console.log('has class? ' + $('.introjs-tooltip').hasClass('tt-step2'));
},
onchange: function(){
console.log('onchange step 2');
$('.introjs-tooltip').addClass('tt-step2');
console.log('has class? ' + $('.introjs-tooltip').hasClass('tt-step2'));
},
onafterchange: function(){
console.log('onafterchange step 2');
$('.introjs-tooltip').addClass('tt-step2');
console.log('has class? ' + $('.introjs-tooltip').hasClass('tt-step2'));
}
},
{
element: '#step3',
intro: 'This is step 3'
}
]
}
function launchIntro(){
var intro = introJs();
intro.setOptions(myIntro);
intro
.onbeforechange(function(){
currentStep = this._options.steps[this._currentStep];
if(currentStep.onbeforechange) {
currentStep.onbeforechange();
}
})
.onchange(function(){
currentStep = this._options.steps[this._currentStep];
if(currentStep.onchange) {
currentStep.onchange();
}
})
.onafterchange(function(){
currentStep = this._options.steps[this._currentStep];
if(currentStep.onafterchange) {
currentStep.onafterchange();
}
})
.start();
}
launchIntro();
I came across a similar issue. Currently IntroJS library has an open issue on github.
I had an assignment to heavily customize the elements styles and adjust some behavior.
I managed to handle the situation by using MutationObserver
Here's an example snippet:
const observer = new MutationObserver((mutations) => {
const { target } = mutations[0];
document.querySelector('.introjs-tooltip').style.top = `${
document.querySelector('.introjs-helperLayer').clientHeight
- document.querySelector('.introjs-tooltip').clientHeight - 10}px`;
return null; });
observer.observe(
document.querySelector('.introjs-tooltip'),
{ attributes: true, attributeOldValue: true, attributeFilter: ['style'] },
);
Currently I can load a web font very easily using Google's Web Font loader:
WebFont.load({
google: {
families: ['Bree Serif']
}
});
However, is it possible to later unload the fonts and added elements from the DOM so they're no longer used on the page?
The documentation on the project's Github doesn't show any options or methods that offer the functionality.
You can simply use a MutationObserver to keep track of the changes made to the DOM and remove the added elements when you so desire.
Below is a simple sample implementation:
(function() {
"use strict";
var addedNodes = [];
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
Array.prototype.forEach.call(mutation.addedNodes, function(node) {
addedNodes.push(node);
});
});
observer.disconnect();
});
loader.addEventListener('click', function() {
observer.observe(document, {
childList: true,
subtree: true,
addedNodes: true
});
//Two loads simply to demonstrate that's not a problem
WebFont.load({
google: {
families: ['Bree Serif']
}
});
WebFont.load({
google: {
families: ['Indie Flower']
}
});
loader.disabled = true;
remover.disabled = false;
});
remover.addEventListener('click', function() {
addedNodes.forEach(function(node) {
node.remove();
});
addedNodes = [];
loader.disabled = false;
remover.disabled = true;
});
}());
body {
text-align: center;
background: aliceblue;
}
h1 {
font-family: 'Indie Flower';
font-size: 3em;
color: cadetblue;
}
p {
font-family: 'Bree Serif';
color: crimson;
}
input[disabled] {
display: none;
}
<script src="//ajax.googleapis.com/ajax/libs/webfont/1.5.10/webfont.js"></script>
<input id="loader" type="button" value="Click to load webfonts" />
<input id="remover" type="button" value="Remove loaded webfonts" disabled="true" />
<h1>Chapter 1</h1>
<p>Grumpy wizards make toxic brew for the evil Queen and Jack.</p>
I don't know how to center delete action icon in inline editing.
My setting action column is:
{
name: 'action',
width: 40,
align: "center",
editable: false,
formatter:'actions',
search: false,
fixed: true,
resize: false,
formatoptions: { keys: true, editbutton: false }
}
You need to play around with CSS to find the fix in your case. Try overriding jqGrid's CSS rules.
In general, if you have only 'Delete' icon in your column, following CSS rules will make it center aligned.
.ui-pg-div.ui-inline-del {
float: none !important;
}
span.ui-icon.ui-icon-trash {
margin: auto;
}
Although, its not a good practice to use '!important'.
If you want to do this for a particular grid, you can prepend grid id(say, list) to CSS rule like this:
#list .ui-pg-div.ui-inline-del{}
This is the pagination plugin. I need a bit of help. I am trying to use an image for the prev and next buttons. I keep having issues with it. Has anyone any idea how I could go about doing this? Currently if I use an image it will display the prev/next button as [object HTMLImageElement].
Thanks in advance!
var methods = {
init: function(options) {
var o = $.extend({
items: 1,
itemsOnPage: 1,
pages: 0,
displayedPages:5,
edges: 2,
currentPage: 1,
hrefTextPrefix: '#page-',
hrefTextSuffix: '',
prevText: 'prev', //this is the prev button text. I want to replace this with imgLeft
nextText: 'next', //this is the next button text. I want to replace this with imgRight
ellipseText: '…',
cssStyle: 'light-theme',
labelMap: [],
selectOnClick: true,
onPageClick: function(pageNumber, event) {
// Callback triggered when a page is clicked
// Page number is given as an optional parameter
},
onInit: function() {
// Callback triggered immediately after initialization
}
}, options || {});
methods._appendItem.call(this, o.currentPage - 1, {text: o.prevText, classes: 'prev'});
methods._appendItem.call(this, o.currentPage + 1, {text: o.nextText, classes: 'next'});
As it's been said, you can just use CSS to theme the ".prev" and ".next" classes.
Then, depending on what you want to do, you just have to add a background image to that element, change the color of the text, etc.
.prev, .next {
color: #FF0000;
font-family: Arial, sans-serif;
display: inline-block;
}
.prev {
width: 50px;
height: 30px;
background: url('/my/image.jpeg') no-repeat center;
}
...