I am using the video.js player for my website. I want to change the position of control bar elements.
Presently, it shows play/pause, volume, progress bar and full screen.
How can I able to change order?
I have my code below:
var videojs = videojs('video-player', {
techOrder: ["youtube", "html5"],
preload: 'auto',
controls: true,
autoplay: true,
fluid: true,
controlBar: {
CurrentTimeDisplay: true,
TimeDivider: true,
DurationDisplay: true
},
plugins: {
videoJsResolutionSwitcher: {
default: 'high',
dynamicLabel: true
}
}
}).ready(function() {
var player = this;
......
I could able resolve by making changes as below:
var videojs = videojs('video-player', {
techOrder: ["youtube", "html5"],
preload: 'auto',
controls: video.player.controls,
autoplay: video.player.autoplay,
fluid: true,
controlBar: {
children: [
"playToggle",
"volumeMenuButton",
"durationDisplay",
"timeDivider",
"currentTimeDisplay",
"progressControl",
"remainingTimeDisplay",
"fullscreenToggle"
]
},
plugins: {
videoJsResolutionSwitcher: {
default: 'high',
dynamicLabel: true
}
}
}).ready(function() {
var player = this;
I thought it will help somebody in future.
Taken idea from JS Bin
For the latest version (v7.15.4), some of Sankar's options listed below have changed. After some hunting around I was able to find a list here on the video.js website under the Default Component Tree.
Also when enabling them, make sure that if you have a theme that it doesn't hide some of the options.
Related
I am using FullCalendar to display events from two sources. I have one source to display them as background events and the other set to display as block events.
This works fine, but then I am using the eventClick callback. When I check the info.event.display property of the event clicked on, it returns as auto. In this callback I need to check this property to determine whether to do something or not.
This also is a problem with the eventDidMount callback. I was using that but have disabled it for now.
IE: In this case I only want a modal to appear if the display type is block.
Code:
let calendarEl = document.getElementById('calendar')
let loader = document.querySelector('.calendar-wrapper .loader')
let tooltip
let calendar = new Calendar(calendarEl, {
plugins: [dayGridPlugin],
firstDay: 1,
contentHeight: "auto",
aspectRatio: 1.5,
eventSources: [
{
url: '/api/trips.json',
display: 'background'
},
{
url: '/parks/visits.json',
display: 'block'
}
],
startParam: 'start',
endParam: 'end',
showNonCurrentDates: true,
loading: function (isLoading) {
if (isLoading) {
loader.style.display = 'flex'
} else {
loader.style.display = 'none'
}
},
headerToolbar: {
start: 'title',
center: 'prevYear,nextYear',
end: 'today prev,next'
},
// eventDidMount: function(info) {
// console.log(info.event);
// tooltip = new tippy(info.el, {
// theme: 'light-border',
// trigger: 'mouseenter',
// allowHTML: true,
// content: info.event.extendedProps.tooltipcontent,
// interactive: false,
// interactiveBorder: 0,
// animation: 'shift-away',
// moveTransition: 'transform 0.2s ease-out',
// zIndex: 99999,
// inertia: true,
// placement: 'top',
// touch: 'hold'
// })
// },
eventClick: function(info) {
console.log(info)
info.jsEvent.preventDefault()
let modal = document.querySelector('#modal-container')
modal.innerHTML = info.event.extendedProps.modalcontent
// tooltip.hide()
MicroModal.show('modal-visit')
}
})
Any suggestions?
It's because "background" is a property of the event source, not the event. Whilst that rule may then be applied when rendering, to control how the event appears, the event itself doesn't automatically have the value "background" set as the value for its own "display" property (because an individual event can potentially override the event source value for any given property).
Fortunately the event will contain a reference to the event source and, although the path to the information is convoluted (but fortunately discoverable by logging the event object to the Console), you can get the "display" property of the event source from it:
eventClick: function(info) {
alert(info.event.source.internalEventSource.ui.display);
}
Live demo: https://codepen.io/ADyson82/pen/BaQVyRO
I am using JW player. when player starts loading it shows 'Loading symbol' but if i set controls: false the loading icon also not appear while video start. is there any way to hide only bottom controls
Reference
var playerInstance = jwplayer("player1");
playerInstance.setup({
file:"",
width: "100%",
displaytitle: false,
controls: false,
primary: 'html5',
mute:'false',
autostart: true,
advertising: {
client: "vast",
tag: ''
}
});
Have you tried using .jw-controlbar { display: none } in a style tag in your head tag? https://developer.jwplayer.com/jw-player/css-skinning-reference.html#
I'm trying to use bootstrap-markdown and everything works fine except I can't call the plugin via JavaScript. For instance:
$("#content").markdownEditor({
autofocus: false,
savable: false,
iconlibrary: 'fa',
resize: 'vertical',
additionalButtons: custom_buttons, // an array defining custom commands
onPreview: function (e) {
var content = e.getContent();
console.log('content', content);
}
});
Does anyone has any ideas what might be the case? Couldn't find anything useful on the web or repo's github page. And yes I've already included markdown.js and to-markdown.js which weren't mentioned in the docs at all but it was quick find anyway.
All I need now is to call the editor, add a couple of custom toolbar buttons (image upload, code block insert etc.) and be done with it.
Code snippets, links & live fiddles are much appreciated :)
For some reason, changing the order of script references fixed this.
Here's the order now:
lib/markdown.js
lib/bootstrap-markdown.js ,
lib/to-markdown.js
And here's my initialization:
$(function () {
var custom_buttons = [[
{
name: "insertCode",
data: [{
name: "cmdInsertCode",
toggle: "toggle",
title: "Insert Code",
icon: "fa fa-fire",
callback: function (e) {
var selected = e.getSelection(),
content = e.getContent();
// e.replaceSelection(chunk);
// var cursor = selected.start;
//e.setSelection(cursor, cursor + chunk.length);
console.log('cmdInsertCode clicked');
}
}]
}
]];
$("#content").markdown({
autofocus: false,
savable: false,
iconlibrary: 'glyph',
resize: 'vertical',
additionalButtons: custom_buttons,
onShow: function (e) {
console.warn('e:editor shown');
}
});
});
Kudos :godmode:
I'm using Flow Player in ASP.NET Web Forms (VS 2010) and want to set some of its properties, like autoPlay, dynamically (read from a config file). But autoPlay don’t seem to be set dynamically. For example, the following code with autoPlay set to true (or false) works correctly:
function initialize() {
player = flowplayer("flowPlayer", "<%=HttpType %>://releases.flowplayer.org/swf/flowplayer.commercial-3.2.15.swf", {
key: '#$b9299630d834a59dcb9',
clip: {
autoPlay: true,
autoBuffering: true,
scaling: 'fit',
onFinish: function () {
}
},
canvas: {
// configure background properties
background: '#000000',
// remove default canvas gradient
backgroundGradient: 'none'
}
});
}
However, obtaining the value AutoPlay from code-behind (which would obtain a value from a config file) doesn’t work. Is there a better way to set the value dynamically? I can’t find online documentation that addresses setting these value dynamically:
function initialize() {
player = flowplayer("flowPlayer", "<%=HttpType %>://releases.flowplayer.org/swf/flowplayer.commercial-3.2.15.swf", {
key: '#$b9299630d834a59dcb9',
clip: {
autoPlay: <%=AutoPlay%>,
autoBuffering: true,
scaling: 'fit',
onFinish: function () {
}
},
canvas: {
// configure background properties
background: '#000000',
// remove default canvas gradient
backgroundGradient: 'none'
}
});
}
Thanks!
<body/>
<div id="player" class="fixed-controls"></div>
HTML
<script>
$(function() { // make sure the DOM is ready
$("#player").flowplayer({
ratio: 5/12,
rtmp: "rtmp://s3b78u0kbtx79q.cloudfront.net/cfx/st",
playlist: [
[
{ webm: "http://stream.flowplayer.org/bauhaus.webm" },
{ mp4: "http://stream.flowplayer.org/bauhaus.mp4" },
{ flash: "mp4:bauhaus" }
]
]
}).one('ready', function(ev, api) {
api.resume();
});
});
Now I know what you guys were thinking when you read the title. Your probable thinking that im talking about jQuery UI draggable. But im actually talking about the plugin i'm making for the community. I am trying to create a target for my plugin. It works as you can see here:
http://jsfiddle.net/XvZLn/24/
As you can see it works fine.
First, let me explain whats suppose to happen. Well what I want, is if the element is dropped in the target...the targ.on() gets launched. This is the onTarget feature in my plugin. This and the offTarget(targ.off()) are not working in my plugin.
This is what I have in my plugin:
var targ = {
on: o.target.onTarget,
off: o.target.offTarget
};
Then my plugin setup code is:
$(document).ready(function() {
$('#drag').jDrag({
revert: false,
revertDuration: 500,
ghostDrop: false,
ghostRevert: false,
ghostOpacity: '0.50',
instantGhost: false,
activeClass: false,
handle: false,
grid: false,
cookies: false,
cookieExdate: 365,
radialDrag: false,
radius: 100,
circularOutline: false,
strictMovement: false,
distance: 0,
not: false,
containment: false,
target: {
init: '#container',
lock: false,
onTarget: function() {
$(this).hide();
},
offTarget: function() {}
},
onPickUp: function() {},
onDrop: function() {}
});
});
I don't see why it wont work.
This is my actually plugin if you want to take a look in it:
http://jsfiddle.net/ZDUZL/89/
Try:
onTarget: function() {
console.log(this);
$(this).hide();
},
You'll see that "this" isn't referring to the element, but rather the object that holds the function.
Pass the element as an argument:
if (locker === false) {
if (statement) {
targ.on(this);
lock = false;
} else {
targ.off();
lock = false;
}
}
http://jsfiddle.net/ZDUZL/91/