How can I hide the play button that's in the center of the video screen in JW Player?
I'm using version 5.4 of the player and I am embedding it using their own 'JW Embedder' technique.
I've tried the following with no luck:
jwplayer("myPlayer").setup({
file: 'myMediaFile.mp4',
image: 'myPosterFile.jpg',
controlbar: 'bottom',
icons: false
});
I've read somewhere that this may have been removed with version 5.0 and must now be done with a skin. But, I also read that it returned in version 5.1 ... ?
I came acros the same problem and the solution was to set:
'controlbar': "none"
Also, I'm using JW Player 5.5.
Ley me know if it worked out.
You are looking for the "display" plugin. Hide as needed.
jwplayer().getPlugin("display").hide();
Add this to your onPause and maybe to your onReady event if you are not using autoplay:
jwplayer().getPlugin("controlbar").hide();
so it looks like this:
jwplayer("container").setup({
events: {
onPause: function(event){
jwplayer().getPlugin("controlbar").hide();
}
}
})
Reference:
http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/12540/javascript-api-reference
Check the Plugins section.
Your code should work with JWplayer 5.10 if you put everything between ' '
jwplayer("myPlayer").setup({
'file': 'myMediaFile.mp4',
'image': 'myPosterFile.jpg',
'controlbar': 'bottom',
icons: 'false'
});
For JW Player v6 - HTML5 player:
You can hide the play button in center of screen in the with CSS:
.jwplayer .jwdisplayIcon {
display: none !important;
}
Or to hide the play button in control bar:
.jwplay {
display: none;
}
It seems to be that the 'icons: false' option does work, but not with the HTML 5 version of the player. Hopefully they'll get this taken care of with any versions later than JW 5.4.
You can write a flash plugin using the Flex SDK. I have written a base class that inherits from Sprite to handle this.
import flash.display.Sprite;
import flash.display.DisplayObject;
import com.longtailvideo.jwplayer.player.IPlayer;
import com.longtailvideo.jwplayer.view.components.ComponentButton;
import com.longtailvideo.jwplayer.view.interfaces.IControlbarComponent;
public class ExtendedPlugin extends Sprite
{
protected var _player:IPlayer;
public function ExtendedPlugin()
{
}
public function hideControlbarButton(buttonName:String):void {
var controlbar:IControlbarComponent = _player.controls.controlbar;
var button:DisplayObject = controlbar.getButton(buttonName);
button.height = 0;
button.width = 0;
}
}
Then you can write your plugin by inheriting from this class.
public class MyPlugin extends ExtendedPlugin implements IPlugin
{
public function initPlugin(player:IPlayer, config:PluginConfig):void
{
_player = player;
}
}
If you wanted to hide the play and pause buttons for example you would do the following:
hideControlbarButton("play");
hideControlbarButton("pause");
You will need the correct library imports for this as well. You will then also need to reference the SWF in the jwplayer parameters.
I achieved this by adding 'icons: false' to config. However, JWplayer API reference suggests adding 'controls: false', so try this as well. Here is a working example: http://www.longtailvideo.com/support/jw-player/29241/a-chromeless-player/
It's probably quite easy to do with a skin. You can modify an existing skin downloaded from longtail. They're just zip files
Here's the documentation : http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/14/building-skins
Basically you'd just delete the 'playIcon.png' from the skin zip file in the 'display' directory. It will just not show the icon then - because it doesn't exist!
You'll probably have to delete 'background.png' also - or you'll just get a blank square.
Here is the situation I came up with:
The idea is to disable the controls completely then re-enable them when on user click.
var jwHandle = jwplayer(videoID).setup(videoConfig);//Set b/c of internal reasons
//Then when configuring
autoplay : "false",
controls : "false", //disable the controls(including play icon)
events : {
onDisplayClick : function(event){
//re-enable controls
jwHandle.setControls(true);
//play the video
jwHandle.play();
}
}
});
Using version 6.10. Other answers above did not work for me, probably because of version changes. The only other way I found is to change a skin.xml play icon to a transparent image however more involved process and falls more towards side of "hacking".
Related
Hello I have been looking for the a full screen functionality for chart in highchart. I have been referring the site and got this link.
Here in javascript you can achieve this by simply handling click event like
document.getElementById('button').addEventListener('click', function () {
chart.fullscreen.toggle();
});
I have tried the same thing for angular highcharts :
ngOnInit(){
this.progressChart = Highcharts.chart(this.donutContainer.nativeElement, this.donutOptions, () => {
/*
Do things here after chart is drawn
*/
})
}
onFullScreenClick(){
this.progressChart.fullscreen.toggle()
}
But seems like this code is not working. I somewhere read you can also use toggleFullScreen(). But that is also not feasible.
Fullscreen requires the fullscreen module, so if you did not imported and initialized that might be the reason.
import HC_fullscreen from 'highcharts/modules/full-screen.js';
HC_fullscreen(Highcharts);
I have prepared a simple demo for you to show you the possible solution. I am using the official highcharts-angular wrapper there (I am encouraging you to check it out, it might make your life easier while working with highcharts in angular), but the solution made without the wrapper should be similar.
Docs:
https://github.com/highcharts/highcharts-angular
Live demo:
(note - the fullscreen will not work inside the stack-blitz frame, but the following example will work in the real-life project)
https://stackblitz.com/edit/highcharts-angular-basic-line-abnznx?file=src/app/app.component.ts
I have a question about when mouse over a picture from a slider show, the sound (which is very short, just like a bing) will play. In normal case, I know how to use html, css and javascript to do it. I have a sound example here: https://freesound.org/people/Timbre/sounds/232210/
and let's say, the class in Drupal page.tpl.php is called picture. As I am new to Drupal, how should I make this function work by only using javascript or jquery? Any comments?
For Drupal you should add your scripts with drupal_add_js(). You can add either a file or inline js and set a number of options such as if it should appear on every page and if it should be added to the footer or header and if it requires jQuery.
You could create a js file with something like this inside:
jQuery(document).ready(function($) {
var mySound = document.createElement('audio');
mySound.setAttribute('src', '/path/to/my/sound.mp3');
//play the sound when the visitor moves the mouse over
//an element with the class 'picture'.
$('.picture').mouseover(function() {
mySound.play();
});
});
Then in your theme or module, you could use hook_page_alter to add your js:
drupal_add_js(
'/path/to/js/script.js',
array(
'type' => 'file',
'scope' => 'footer',
'group' => JS_THEME, //or JS_DEFAULT if module
'every_page' => false,
'requires_jquery' => true,
)
);
You could wrap that in some sort of if statement to only load it on the page(s) you need it.
Hope that helps!
I have recently migrated from TinyMCE v3 to v4. I have a custom image inserter which was development on v3 and can't get some elements to work on v4.
I'm having issues opening the default image dialog box. In version 3 this was completed using tinyMCE.execCommand('mceAdvImage');. I am aware mceAdvImage has been removed and have tried using tinymce.activeEditor.windowManager.open('mceImage');.
Anyone know how to do this? I'm ripping out my hair trying to find a solution.
I also faced this issue today and found a solution.
My usecase was to open image dialog on double click.
In tinyMCE.init function you need to add this (example):
tinyMCE.init({
...
ed.on('DblClick', function(e) {
if (e.target.nodeName=='IMG') {
tinyMCE.activeEditor.execCommand('mceImageDialog');
}
});
...
});
I used a command name 'mceImageDialog' but you can use whatever you want. The key to making this command work is to open image plugin.js and add these lines
Path: plugins/image/plugin.js (plugin.min.js):
...
editor.addCommand("mceImageDialog", function(ui, val) {
showDialog();
});
...
And thats it. After doubleclick on image element, the image dialog appears. For your solution you need i think only the plugin addCommand and use this command for your purposes.
Hope this helps.
I take two values (source, destination) from the user and while loading the map from A to B, I need to show some sort of activity happening. We have activity indicator for iOS to do that. But how do I use the activity indicator in Phonegap while the map is loading in the background?
I'm thinking something like
navigator.something.activityIndicatorStartRunning()
javascript method to load the map
navigator.something.activityIndicatorStopRunning()
Is this possible in Javascript?
purplecabbage has a plugin for activity indicator here
An up to date plugin providing this feature would be this
network-activity by steve228uk
This can be added to cordova by
cordova plugin add https://github.com/steve228uk/network-activity.git
or to PhoneGap by
phonegap plugin add https://github.com/steve228uk/network-activity.git
This function is show custom loading indicator while load a page/JSON in phonegap
function loading() {
$("body").addClass('ui-disabled');
$.mobile.loading(
'show',
{
text : "uploading",
textVisible : true,
textonly : false,
html : "<span class='ui-bar ui-shadow ui-overlay-d ui-corner-all' style='background-color:transparent;'><div align='center'><img src='img/loader.gif' /><br/><h2 style='color:#000000; font-size:16px;text-transform:none;'>Loading...</h2></div></span>"
});
}
This question is quite old, but I found this post telling that there is a javascript function for that:
navigator.notification.activityStart();
// Do something that might take a while...
navigator.notification.activityStop();
Enjoy
I'm using ExtJS 3.2.1 and I need a component almost identical to the bundled HtmlEditor, with one exception: it must start editing the HTML source code directly. The reason I don't use a normal TextArea is that the user should be able to preview the result of his actions before submitting.
I've tried calling toggleSourceEdit(), as per ExtJS documentation, with no success. Debugging, I see that the editor object has the sourceEditMode property set to true, and the Source Edit button seems as if it was "pressed", but clicking on it does not render the typed HTML, and clicking it again goes to the Source Mode.
I've tried calling toggleSourceEdit() after the container show() method, on the container afterLayout listener and on the editor afterRender listener. I've tried also calling it on another button that I added to the container. The result is the same on every try.
The only other option I see is updating ExtJS to 3.3.0, but I haven't seem anything related on the changelogs. Either way, it's going to be my next step. EDIT: The app had another problems when updating, we'll make a bigger effort to update later. As of right now, we are using the HtmlEditor in its original setting.
Thanks!
ran into the same problem (using 3.3.0 by the way)
stumbled upon a fix by dumb luck. i have no idea why this works, but second time is the charm. call it twice in a row to achieve the desired effect..
HTMLEditor.toggleSourceEdit(true);
HTMLEditor.toggleSourceEdit(true);
hope that helps!
Rather calling toggleSourceEdit(), try to setup the configuration while you create HtmlEditor Object
Using toggleSourceEdit() caused some problems for me. One was that this seemed to put the editor somewhere in limbo between source edit and WYSIWYG mode unless I used a timeout of 250ms or so. It also puts the focus in that editor, and I don't want to start the form's focus in the editor, especially since it's below the fold and the browser scrolls to the focused html editor when it opens.
The only thing that worked for me was to extend Ext.form.HtmlEditor and then overwrite toggleSourceEdit, removing the focus command. Then adding a listener for toggling to the source editor when the component is initialized. This is for Ext 4.1 and up. For older versions, replace me.updateLayout() with me.doComponentLayout().
var Namespace = {
SourceEditor: Ext.define('Namespace.SourceEditor', {
extend: 'Ext.form.HtmlEditor',
alias: 'widget.sourceeditor',
initComponent: function() {
this.callParent(arguments);
},
toggleSourceEdit: function (sourceEditMode) {
var me = this,
iframe = me.iframeEl,
textarea = me.textareaEl,
hiddenCls = Ext.baseCSSPrefix + 'hidden',
btn = me.getToolbar().getComponent('sourceedit');
if (!Ext.isBoolean(sourceEditMode)) {
sourceEditMode = !me.sourceEditMode;
}
me.sourceEditMode = sourceEditMode;
if (btn.pressed !== sourceEditMode) {
btn.toggle(sourceEditMode);
}
if (sourceEditMode) {
me.disableItems(true);
me.syncValue();
iframe.addCls(hiddenCls);
textarea.removeCls(hiddenCls);
textarea.dom.removeAttribute('tabindex');
//textarea.focus();
me.inputEl = textarea;
} else {
if (me.initialized) {
me.disableItems(me.readOnly);
}
me.pushValue();
iframe.removeCls(hiddenCls);
textarea.addCls(hiddenCls);
textarea.dom.setAttribute('tabindex', -1);
me.deferFocus();
me.inputEl = iframe;
}
me.fireEvent('editmodechange', me, sourceEditMode);
me.updateLayout();
}
})
}
Then to use it:
Ext.create('Namespace.SourceEditor', {
/*regular options*/
listeners: {
initialize: function(thisEditor) {
thisEditor.toggleSourceEdit();
}
}
});
htmlEditor.toggleSourceEdit(true);
one time should be enough if you do this listening to the afterrender event of the editor.