Iam want the way to add subtitles and resolution options in my Jwpalyer
code
<script type="text/javascript">
//Note: JW Player 7 now requires a license key. Please make sure to include this on your page if you are self-hosting.
//jwplayer.key = "Ywok59g9j93GtuSU7+axNzjIp/TBfiK4s0vvYg==";
var videoPlayer = jwplayer('my_video').setup({
file: 'http://content.jwplatform.com/videos/IMUjQRAB-kNspJqnJ.mp4',
image:'http://assets-jpcust.jwpsrv.com/thumbs/F5K02Tmh-720.jpg',
width: '640',
height: 360,
//autostart: true,
skin: {
name: "flat"
},
//timeSliderAbove: true,
//Adding your brand: Logo & Right-click
logo: {
file: './jw-logo/logo_flat.png',
logoBar: './jw-logo/logo_bar.png',
position: 'top-left',
link: 'http://codecanyon.net/user/facetheme'
},
abouttext: "Flat Skin Retina for JW7",
aboutlink: "http://codecanyon.net/user/facetheme",
});
videoPlayer.on('ready',function() {
jwLogoBar.addLogo(videoPlayer);
});
</script>
I searched a lot but could not find enough answers and I hope to get enough answers here
Related
Hi community I would like to solve a problem, I am currently using plyr.io as a player, the detail is that when you want to watch a video on a cell phone in full screen, the player is maximized in portrait mode, there will be some way that by automatically maximizing it is in landscape mode only on the mobile, even when minimize return to portrait, even if the cell phone is in portrait mode.
This is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Plyr</title>
<!-- Plyr style -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.5.6/plyr.css" />
</head>
<body>
<!-- Plyr -->
<script src="//cdnjs.cloudflare.com/ajax/libs/plyr/3.5.6/plyr.min.js"></script>
<video id="player" poster="https://i.imgur.com/YC9U2uc.jpg" controls crossorigin>
</video>
</body>
<script type="text/javascript">
const player = new Plyr('#player');
player.source = {
type: 'video',
title: 'Sintel',
sources: [{
src: '//iandevlin.github.io/mdn/video-player-with-captions/video/sintel-short.webm',
type: 'video/mp4',
}
],
tracks: [{
kind: 'captions',
label: 'English',
srclang: 'en',
src: '//iandevlin.github.io/mdn/video-player-with-captions/subtitles/vtt/sintel-en.vtt',
default: false,
},
{
kind: 'captions',
label: 'German',
srclang: 'de',
src: '//iandevlin.github.io/mdn/video-player-with-captions/subtitles/vtt/sintel-de.vtt',
},
],
};
</script>
</html>
I have tried with CSS code, but it is not very good, because it only rotates the video, it does not rotate the controls or the poster, which when applied to maximize it applies:
transform: rotate(90deg) scale(1.75);
I think the best would be with JavaScript,Thank you in advance.
Source: https://plyr.io/
You can try with this:
screen.orientation.lock('landscape');
as described here:
https://developer.mozilla.org/en-US/docs/Web/API/Screen/orientation
plyr.io specific, use enterfullscreen and exitfullscreen events along with screen orientation:
player.on('enterfullscreen', event => {
screen.orientation.lock('landscape');
});
player.on('exitfullscreen', event => {
screen.orientation.lock('portrait');
});
var winwidth=$(window).width();
var winheight=$(window).height();
const player = Plyr.setup('#player');
player.forEach (item => {
item.on('enterfullscreen', event => {
$(".plyr__video-wrapper").css({"transform": "rotate(90deg)", "height": winwidth, "width": winheight, "margin-left": "0px", "margin-right": "0px"});
})
item.on('exitfullscreen', event => {
$(".plyr__video-wrapper").css({"transform": "rotate(0deg)", "height": "100%", "width": "100%", "margin-left": "auto", "margin-right": "auto"});
})
});
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.
Version jqGrid used here:
#license Guriddo jqGrid JS - v5.2.0 - 2016-11-27 Copyright(c) 2008, Tony Tomov, tony#trirand.com
The first block of code below is an entire self contained implementation of jqGrid. It is in fact mostly taken from one of the examples on the jqGrid site. In it I added a snippet, the part between the comment lines with the clip markings.
That added snipped adds a custom editfunc. It works nicely (in the example it is of course more or less a stub, only doing an alert). Also, searching works, with all of its default parameters. For both, select a row and click on the respective icon of Edit or Search.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- The jQuery library is a prerequisite for all jqSuite products -->
<script type="text/ecmascript" src="./lib/jquery/jquery.min.js"></script>
<!-- This is the Javascript file of jqGrid -->
<script type="text/ecmascript" src="./lib/jqGrid-js-free/js/jquery.jqGrid.js"></script>
<!-- This is the localization file of the grid controlling messages, labels, etc.-->
<!-- We support more than 40 localizations -->
<script type="text/ecmascript" src="./lib/jqGrid-js-free/js/i18n/grid.locale-en.js"></script>
<!-- A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom -->
<link rel="stylesheet" type="text/css" media="screen" href="./lib/jquery-ui/jquery-ui.css" />
<!-- The link to the CSS that the grid needs -->
<link rel="stylesheet" type="text/css" media="screen" href="./lib/jqGrid-js-free/css/ui.jqgrid.css" />
<meta charset="utf-8" />
<title>jqGrid without PHP - Loading Data - JSON Live</title>
</head>
<body>
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
<script type="text/javascript">
$(document).ready(function () {
$("#jqGrid").jqGrid({
colModel: [
{
label: 'Title',
name: 'Title',
width: 150,
formatter: formatTitle
},
{
label: 'Link',
name: 'Link',
width: 80,
formatter: formatLink
},
{
label: 'View Count',
name: 'ViewCount',
width: 35,
sorttype:'integer',
formatter: 'number',
align: 'right'
},
{
label: 'Answer Count',
name: 'AnswerCount',
width: 25
}
],
viewrecords: true, // show the current page, data rang and total records on the toolbar
width: 780,
height: 200,
rowNum: 15,
datatype: 'local',
pager: "#jqGridPager",
caption: "Load live data from stackoverflow"
});
fetchGridData();
function fetchGridData() {
var gridArrayData = [];
// show loading message
$("#jqGrid")[0].grid.beginReq();
$.ajax({
url: "http://api.stackexchange.com/2.2/questions?order=desc&sort=activity&tagged=jqgrid&site=stackoverflow",
success: function (result) {
for (var i = 0; i < result.items.length; i++) {
var item = result.items[i];
gridArrayData.push({
Title: item.title,
Link: item.link,
CreationDate: item.creation_date,
ViewCount: item.view_count,
AnswerCount: item.answer_count
});
}
// set the new data
$("#jqGrid").jqGrid('setGridParam', { data: gridArrayData});
// hide the show message
$("#jqGrid")[0].grid.endReq();
// refresh the grid
$("#jqGrid").trigger('reloadGrid');
}
});
}
function formatTitle(cellValue, options, rowObject) {
return cellValue.substring(0, 50) + "...";
};
function formatLink(cellValue, options, rowObject) {
return "<a href='" + cellValue + "'>" + cellValue.substring(0, 25) + "..." + "</a>";
};
/*---- 8< ------*/
// editfunc here works (an alert is popped up), although the format of the function parameters is not according to spec:
// searchfunc also works (it is the default)
$('#jqGrid').jqGrid( 'navGrid', '#jqGridPager',{
add:false, del:false, view:false,
editfunc: function(){alert('EDIT');}
});
/*---- >8 ------*/
});
</script>
</body>
</html>
Now take the same file, remove the small snippet between the snip lines, and replace it with the following snippet, that looks more like something I need to implement:
/*---- 8< ------*/
// editfunc does NOT work as desired here (no alert)
// search function works, WITH the parameters as specified here
// from the file jquery.jqGrid.js (): navGrid : function parameters: (elem, p, pEdit, pAdd, pDel, pSearch, pView)
// (=jqGrid-free #license Guriddo jqGrid JS - v5.2.0 - 2016-11-27 Copyright(c) 2008, Tony Tomov, tony#trirand.com)
$('#jqGrid').jqGrid( 'navGrid', '#jqGridPager',
{ add:false, del:false, view:false }, // p
{ editfunc: function(r){alert('EDIT');} }, // pEdit (does NOT work)
{ }, // pAdd
{ }, // pDel
{ multipleSearch: true, closeAfterSearch:true, closeOnEscape:true, searchOnEnter:true, showQuery:true }, // pSearch (works with these options)
{ } // pView
);
/*---- >8 ------*/
Here, alas the editfunc does not work at all, I get the default edit function. Search now works though, as desired with the custom specified parameters.
In short: I cannot seem to get both a customized editfunc and search with custom parameters working!
I cannot see anything wrong with the second snippet. It is btw. also per some examples on the jqGrid wiki.
Any hints to get both working together would be appreciated.
The problem is very easy: you placed editfunc in the wrong place in your last snippet. The editfunc should be specified as the property of the second parameter of navGrid (together with add:false, del:false, view:false). You used the editfunc correctly in the first part of your code, but you placed it in the second part of the code on the wrong place. You can fix your code by usage
$('#jqGrid').jqGrid( 'navGrid', '#jqGridPager',
{ add:false, del:false, view:false, editfunc: function(r){alert('EDIT');} }, // p
{ }, // pEdit
{ }, // pAdd
{ }, // pDel
{ multipleSearch: true, closeAfterSearch:true, closeOnEscape:true,
searchOnEnter:true, showQuery:true }, // pSearch (works with these options)
{ } // pView
);
By the way, you placed the code of commercial product Guriddo jqGrid JS in the directory jqGrid-js-free, which sounds strange. Guriddo jqGrid JS can't be used for free. You can see the current prices here. I started development of free jqGrid fork of jqGrid, which can be used completely free of charge, exactly because of that. Free jqGrid implemented many new features, which can be helpful for you. The demo https://jsfiddle.net/OlegKi/odvxefra/3/ is a small modification of your code, which displays
I used additionally
url: "https://api.stackexchange.com/2.2/questions",
// add sending of custom parameters to the URL
postData: {
order: "desc",
sort: "activity",
tagged: "jqgrid",
site: "stackoverflow"
},
datatype: "json",
// below prmNames remove sending all standard jqGrid paranmeters
prmNames: {
page: null,
rows: null,
sort: null,
order: null,
search: null,
nd: null,
id: "question_id"
},
jsonReader: {
root: "items",
repeatitems: false,
id: "question_id"
},
loadonce: true,
forceClientSorting: true,
sortname: "creation_date",
sortorder: "desc"
The data will be loaded from the same URL "http://api.stackexchange.com/2.2/questions?order=desc&sort=activity&tagged=jqgrid&site=stackoverflow", sorted locally by creation_date property in the desc order and displayed in the grid. One can use other properties in the custom formatter by adding the properties in additionalProperties. For example you can add additionalProperties: ["owner", "is_answered", "score", "last_activity_date"] to save the properties locally and to have access to the properties inside of, for example, custom formatter.
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#
How to add a context menu in aurigma uploader. I want to add select all and deselect all option.
I have read this documentation ( http://www.aurigma.com/docs/us8/JA_AllMembers_T_J_$au_contextMenu.htm ) and I have tried this below coding. But, nothing appear in aurigma uploader plugin?
<script type="text/javascript">
var uploader = $au.uploader({
id: 'Uploader1',
width: '950px',
height: '500px',
licenseKey: 'XXXXX-XXXXX-XXXXX-XXXXX-XXXXX-XXXXXX',
enableDescriptionEditor: false,
enableRotation: false,
activeXControl: {
codeBase: 'Scripts/Uploader8.cab',
codeBase64: 'Scripts/Uploader8_x64.cab'
},
javaControl: {
codeBase: 'Scripts/Uploader8.jar'
},
uploadSettings: {
actionUrl: 'upload.php',
//redirectUrl: 'gallery.php',
filesPerPackage: 1
},
converters: [
{ mode: '*.*=SourceFile' }
],
folderPane: {
height: 370
},
uploadPane: {
viewMode: 'List'
},
contextMenu: {
addFilesText: "Add files",
uncheckAllText: "Uncheck all"
},
detailsViewColumns: {
infoText: ''
},
paneItem: {
showFileNameInThumbnailsView: true
},
imageEditor: {
enableCrop: false
}
});
var ip = $au.installationProgress(uploader);
ip.progressImageUrl('Images/installation_progress.gif');
ip.progressCssClass('ip-progress');
ip.instructionsCssClass('ip-instructions');
uploader.writeHtml();
</script>
Disclaimer: I work for Aurigma.
The “check all” feature is enabled by default. If you open a folder in the folder view and expand the context menu, you will see this option there. It allows you to add all files in the folder to the upload list. The property ContextMenu.CheckAllText is used to change caption for the menu item.
Are you expecting some other behavior for this menu item or you don’t see it in the context menu?