I have two questions using JWPLAYER. I have searched in many places but didn't get the answer, especially regarding audio streaming in JWPLAYER.
Question1:
I am working on transcoding the video files into m3u8 and ts chunks using aws-elastic-transcoder and successfull streaming videos.
Now, I want to stream the audio files.
Does audio files follow the same process of dividing into m3u8 and ts chunks. What extra configurations does it need. What audio files are supported, I also need audio HD quality toggling in audio. How do I achieve it?
Question2:
I want to customize my JWPLAYER, especially AUDIO player. I want to add different buttons into the control-bar.
A shuffle button
An image in the control bar
A download button
A button to show the current queue list.( How to add an audio file
HLS to queue)
A repeat button
A settings Button
So, basically I want to customize the complete player. How can I achieve this. How can I change the whole JWPLAYER HTML.
Please give any reference URL if available.
Here are my options,
JWOptions = {
id: "myPlayer2",
"playlist": [{
"file": "https://s3.amazonaws.com/mypath1/index.m3u8",
"image": "assets/img/bg1.jpg",
"title": "Sintel Trailer",
"mediaid": "ddra573"
}, {
"file": "https://s3.amazonaws.com/mypath2/index.m3u8",
"image": "assets/img/bg2.jpg",
"title": "Big Buck Bunny Trailer",
"mediaid": "ddrx3v2"
}],
width: 800,
height: 40,
}
Thank You.
about 1): you can convert in AAC (m4a) audio files like for video. You can use AAC-LC codec for non high quality, and HE-AAC for high quality audio. jwPlayer setup is the same of video, it works, but you can setup better according to your needs.
about 2): you can add an item to the controlbar like in this example http://codepen.io/fdambrosio/pen/XRpBvW but I think that adding 4 or 5 more items does not fit well into the default jwplayer controlbar, because in mobile/small size the controlbar is minimal and jwplayer shows items with different style thank desktop.
HTML:
<body>
<div id='radioplayer'></div>
</body>
CSS:
#change-speed {font-size: 16px; color: white; padding-left: 5px; margin-right: 5px;}
JS:
var playerInstance = jwplayer("radioplayer");
playerInstance.setup({
file:'//video.radioradicale.it:1935/store-86/_definst_/mp4:2015/01/MQ781257.mp4/playlist.m3u8',
width:544,
height: 306,
androidhls: true,
autostart: true,
});
var tag;
jwplayer("radioplayer").on('ready', function(){
if (jwplayer("radioplayer").getProvider().name == "html5" | jwplayer("radioplayer").getProvider().name == "shaka") {
console.log('1X');
var normale = document.createElement("div");
normale.id = "change-speed";
normale.setAttribute('class','jw-reset jw-text jw-icon-inline');
normale.innerHTML = "1x";
document.getElementsByClassName('jw-controlbar-right-group')[0].appendChild(normale);
tag = document.querySelector('video');
tag.defaultPlaybackRate = 1.0;
tag.playbackRate = 1.0;
$('#change-speed').on('click', function() {
console.log('test');
speed_bfr = tag.playbackRate;
console.log(speed_bfr, 'prima');
switch(speed_bfr) {
case 1.0:
console.log('1.0');
normale.innerHTML = "1.5x";
tag.playbackRate = 1.5;
break;
case 1.5:
console.log('1.5');
normale.innerHTML = "1x";
tag.playbackRate = 1.0;
break;
}
});
}
});
You can also add only one button (ex. download) over poster image, as described here: https://developer.jwplayer.com/jw-player/demos/basic/add-download-button/
Otherwise you can develop your custom controlbar, or adding buttons near the player, using JwPlayer API: https://developer.jwplayer.com/jw-player/docs/javascript-api-reference/
Related
I have a phone / iPad application. It would be useful to export text, images, or other data to other apps or other devices.
I can export the colour data as text using UIpasteboard.general.string. This works nicely. The Universal pasteboard lets me paste into other devices.
I can export an image using UIpasteboard.general.image. I have a PNG image in my bundle resources. I can the paste it into Preview or some other image viewer. I would like to be able to paste it as a file but I can't see how to do that at the other end.
I have also a PDF manual in the Bundle. It would be nice to export that too. Like the previous image, it would be nice to paste it as a file but I cannot see how this is done.
Before I get into the code, is UIpasteboard the right way to do this? Or is there some other approach I ought to be using rather than trying to fix this. What do other apps do?
Grid(horizontalSpacing: 3, verticalSpacing:3) {
GridRow {
Text("Text: ").gridColumnAlignment(.trailing).foregroundColor(.gray)
Button {
let pasteboard = UIPasteboard.general
pasteboard.string = toString(sw: sd.mySwatch)
} label: {
Text("Current swatch").lineLimit(1).frame(width:buttonW)
}.buttonStyle(.bordered)
}
GridRow {
Text("Text: ").gridColumnAlignment(.trailing).foregroundColor(.gray)
Button {
var reply: String = ""
for sw in sd.swatches {
reply = reply + toString(sw: sw)
}
UIPasteboard.general.string = reply
} label: {
Text("All swatches").lineLimit(1).frame(width:buttonW)
}.buttonStyle(.bordered)
}
GridRow {
Text("Image: ").gridColumnAlignment(.trailing).foregroundColor(.gray)
Button {
UIPasteboard.general.image = UIImage(contentsOfFile: Bundle.main.path(forResource: "Macbeth", ofType: "png")!)
} label: {
Text("Macbeth.png").lineLimit(1).frame(width:buttonW)
}.buttonStyle(.bordered)
}
GridRow {
Text("PDF: ").gridColumnAlignment(.trailing).foregroundColor(.gray)
Button {
UIPasteboard.general.url = Bundle.main.url(forResource: "ByEye", withExtension: "pdf")!
} label: {
Text("ByEye.pdf").lineLimit(1).frame(width:buttonW)
}.buttonStyle(.bordered)
}
}
That is my code. The first three options work. The last one does not because the URL is a private one for the application. I might be able to copy the file to a public directory so the URL worked but that seems like the wrong way to go about it.
Postscript:
This actually works well enough for now. I can copy stuff to the pasteboard, then paste it into an e-mail or other message to myself. This lets me get stuff out of the app without creating temporary files the I have to clean up.
I did not find a solution for the PDF or other files. I was hoping for something like this...
UIPasteboard.general.file = UIImage(contentsOfFile: Bundle.main.path(forResource: "manual", ofType: "pdf")!)
...but nothing like that exists as far as I can tell.
Can any one help me through react native gifted chat? I want to share files like (.pdf, docs, .txt, .jpg.) How to do that?
You have to use renderCustomView (Function) - Custom view inside the bubble prop.
And add some meta information into your message data like this is a SPECIAL message and finally test in renderCustomView if you are in the case of a special message.
https://github.com/FaridSafi/react-native-gifted-chat/blob/master/App.tsx#L128
https://github.com/FaridSafi/react-native-gifted-chat/blob/master/example-expo/CustomView.tsx
react-native-gifted-chat already includes support for images and videos, using the properties video and image of IMessage, just past pass the the link of the resource
{
_id: 1,
text: 'My message',
createdAt: new Date(Date.UTC(2016, 5, 11, 17, 20, 0)),
user: {
_id: 2,
name: 'React Native',
avatar: 'https://facebook.github.io/react/img/logo_og.png',
},
image: 'https://facebook.github.io/react/img/logo_og.png',
// You can also add a video prop:
video: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
// Mark the message as sent, using one tick
sent: true,
// Mark the message as received, using two tick
received: true,
// Mark the message as pending with a clock loader
pending: true,
// Any additional custom parameters are passed through
}
For the rest of types you have to implement your own logic, using one of the render functions, i think you could renderMessageImage with a link to the icon of the resources and add a description, also you should handle the click event to start download
i am trying to create a toolbar with buttons. and the button i want to have is an image rather title. The current non working code is:
let imageName = "yourImage.png"
self.myUIBarButtonBack = UIBarButtonItem(image: UIImage(named: imageName), style:.plain, target: self, action: #selector(onClickBarButton))
I have 2 questions:
1. where should i place the yourImage.png in my application
2. is this code sufficient to render image or i need to do things like putting it into imageView component and make it visible etc. ?
The best approach is to add images in xcassets. This is the best way you can organize images. The concept of App slicing applies here.
You don't need to put the image in image view in the case of bar button item.
Try changing the rendring option as Original Image instead of Default.
One way is create custom button and assign to toolbar like navigationbar
self.navigationItem.hidesBackButton = true
let button = UIButton.init(type: .custom)
button.setImage(UIImage.init(named: "back_icon"), for: UIControlState.normal)
button.addTarget(self, action:#selector(onClickBackBarItem), for: UIControlEvents.touchUpInside)
button.frame = CGRect.init(x: 0, y: 0, width: 25, height: 25)
let barButton = UIBarButtonItem.init(customView: button)
self.navigationItem.leftBarButtonItem = barButton
I'm using ember-emojione to display and insert emoji.
Out of four rendering options that EmojiOne offers:
PNG sprites
PNG individual images
SVG sprites
SVG individual images
...only PNG sprites suit me. Individual images take too much time to load and emoji display sequentially. SVG sprites are awesome, but rerendering the preview area causes SVG sprite emoji to flicker. Only PNG sprite emoji never flicker and display simultaneously.
Unfortunately, EmojiOne offers spritesheets only in three sizes: 64, 128 and 512 px. We need to display emoji in 20 px size.
Resizing emoji displayed via PNG sprites is problematic.
ember-emojione readme suggests this hack to resize PNG sprite emoji:
.emojione {
transform: scale(0.3125);
margin: -22px;
}
It works, but it has some disadvantages:
In certain cases, emoji appear blurred.
Text selection blows up:
The solution is to use emoji spritesheets tailored to desired size. The Deveo/emojione-png-sprites repo offers such spritesheets.
But when I include those spritesheets instead of default ones, ember-emojione emoji picker component displays incorrectly.
Question: how do I use ember-emojione with emojione-png-sprites correctly?
emojione-png-sprites relies on Sass mixins, so you'll need ember-cli-sass. If you don't want to install ember-cli-sass, you can alternatively precompile mixin invocations manually and insert resulting CSS into your app.
Decide which spritesheets to include from emojione-png-sprites.
We're gonna use 20px emoji. For retina, we'll also need double and triple size spritesheets. As 40px and 60px aren't available, we're gonna use next available ones: 48px and 64px.
Include spritesheets and the Sass file into your repo. Run these commands in your Ember app root:
bower i -S emojione-png-sprite-20=https://raw.githubusercontent.com/Deveo/emojione-png-sprites/v0.3.0/dist/sprite-20.png
bower i -S emojione-png-sprite-48=https://raw.githubusercontent.com/Deveo/emojione-png-sprites/v0.3.0/dist/sprite-48.png
bower i -S emojione-png-sprite-64=https://raw.githubusercontent.com/Deveo/emojione-png-sprites/v0.3.0/dist/sprite-64.png
bower i -S emojione-png-sprite-style=https://raw.githubusercontent.com/Deveo/emojione-png-sprites/v0.3.01/dist/style.scss
It's very important that you use a specific release version of the files, so that your dependencies are locked. Otherwise, if the repo has a breaking change, an innocent bower install will break your project.
Tell ember-emojione not to include default EmojiOne CSS and spritesheets. In your app's ember-cli-build.js:
module.exports = function (defaults) {
var app = new EmberApp(defaults, {
"ember-emojione": {
shouldImportCss: false,
shouldIncludePngSprite: false,
shouldIncludeSvgSprite: false,
shouldIncludePngImages: false,
shouldIncludeSvgImages: false
}
});
// ...
Import PNG sprites into your app.
Install broccoli-funnel:
npm install -D broccoli-funnel
In your app's ember-cli-build.js:
var Funnel = require("broccoli-funnel");
module.exports = function (defaults) {
var app = new EmberApp(defaults, {
// ...
}
});
const funnels = [
// PNG sprites
new Funnel(app.bowerDirectory + "/emojione-png-sprite-20", {
include: ['index.png'],
getDestinationPath () {
return "assets/emojione-png-sprites/sprite-20.png";
}
}),
new Funnel(app.bowerDirectory + "/emojione-png-sprite-48", {
include: ['index.png'],
getDestinationPath () {
return "assets/emojione-png-sprites/sprite-48.png";
}
}),
new Funnel(app.bowerDirectory + "/emojione-png-sprite-64", {
include: ['index.png'],
getDestinationPath () {
return "assets/emojione-png-sprites/sprite-64.png";
}
}),
];
if (app.env === "development" || app.env === "test") {
app.import(app.bowerDirectory + "/timekeeper/lib/timekeeper.js");
}
return app.toTree(funnels);
};
In your app's Sass, include the mixin and invoke it:
#import "bower_components/emojione-png-sprite-style/index.scss";
#include sprity-emojione(20, "/assets/emojione-png-sprites", (2: 48, 3: 64));
This will break the looks of ember-emojione components. The addon contains a mixin that restores the looks:
#import 'node_modules/ember-emojione/app/styles/ember-emojione';
#include ember-emojione-cancel-scale;
I am having two problems with KOgrid.
1) I could not get scroll bars in the kogrid .It is very difficult to do data entry without scroll bars.
2) I also could not get kogrid to working wihout specifying hard coded height and width.In my application I can not have a fixed height and width.
Did anybody else had the same issue ?
I tried a workaround suggestion from this thread ( using jQuery fix as last line in my viewmodel).
KO Grid Display Isseues, On resize Gird shows one row. Images also included
that just increased that size of the grid but it did not display any data . However, when I resize the page data shows up.
Below are my HTML and kogrid options ( I tried with and without paging options, Ideally I do not want to use paging )
<div data-bind="koGrid: gridOptions"
style="height: 800px; background-color: none;width: 1850px;">
</div>
self.gridOptions = {
data: self.mydatarray,
footerVisible: true,
displaySelectionCheckbox: true,
afterSelectionChange: self.RowSelectionChange,
rowHeight: 50,
selectWithCheckboxOnly: true,
enableSorting: false,
multiSelect: true,
selectedItems: self.SelectedRows,
enableColumnResize: true,
showFilter: false,
canSelectRows: true,
enablePaging: true,
pagingOptions: {
currentPage: ko.observable(1),
pageSize: ko.observable(3),
pageSizes: ko.observableArray([3, 6, 9])
},
rowTemplate: errrowtmpl,
columnDefs: [
{ field: 'Customer', displayName: 'Customer', cellTemplate: Customersddedittmpl, headerCellTemplate: headercelltmpl },
...
...
{ field: 'GenNotes', displayName: 'GenNotes', cellTemplate: simpleedittmpl, headerCellTemplate: headercelltmpl }
]
}
Please let me know if you need any more information
Thanks
Kenner Dev
I found a solution to the problems I am facing.
1) I used Jquery to add scroll bar. I added code line below as last line of my data loading function. I am not sure id this breaks any other KOGrid functionality.In my application I did some basic testing and it seems to be working fine.
$("div.kgViewport").css("overflow", "scroll");
2) I still dont know how to solve this problem 100%. It still does not work unless fixed width and height are mentioned in style. In my app I used vw and vh as opposed fixed width and height to solve the problem of making it work on all screen sizes.
<div data-bind="koGrid: gridOptions"
style="height: 73vh;overflow:scroll;width: 96vw;"></div>