My problem was, changing quality during video playing.
When i used setPlaybackQuality in onReady event function, quality was changed, but during video playing it was not possible. Although onPlaybackQualityChange event returns quality which i wanted but in fact didn't changed video quality.
player[playaID] = new YT.Player('content_'+playaID, {
height: playaHeight,
width: playaWidth,
videoId: playaVID,
playerVars: {
'autoplay':0,
'controls':0,
'showinfo':0,
'fs': 1,
'rel': 1,
'modestbranding':0
},
events: {
'onReady': onPlayerReady(playaID),
'onStateChange':onPlayerStateChange(playaID,event),
'onPlaybackQualityChange':onPlayerQualityChange(playaID,event)
}
});
SOLLUTION:
If you want to change quality during video playing:
1: you must stop video player.stopVideo()
2: set quality - player.setPlaybackQuality('hd720')
3: play video - player.playVideo()
below is mine function for setting quality.
var setQuality=function(playaID,q){
var curSeek = player[playaID].getCurrentTime(); // current video time
var status = player[playaID].getPlayerState(); // video status
if(status!=-1 && status!=5){ // if not started, does not to be stoped
player[playaID].stopVide();
}
player[playaID].setPlaybackQuality(q);
player[playaID].seekTo(curSeek);
if(status!=1){
player[playaID].paseVideo(); // if was paused
}else{
player[playaID].playVideo(); // if was playing
}
}
Related
uploadImage(filePath: string, camera: boolean = false) {
try {
let options: CameraOptions;
if (camera) {
options = {
quality: 40,
destinationType: this._camera.DestinationType.DATA_URL,
encodingType: this._camera.EncodingType.JPEG,
mediaType: this._camera.MediaType.PICTURE,
correctOrientation: true
}
} else {
options = {
destinationType: this._camera.DestinationType.DATA_URL,
sourceType: this._camera.PictureSourceType.PHOTOLIBRARY,
encodingType: this._camera.EncodingType.JPEG,
mediaType: this._camera.MediaType.PICTURE
}
}
this._camera.getPicture(options).then((imageData) => {
const photo = `data:image/jpeg;base64,${imageData}`;
const fileRef = this._afs.ref(filePath);
const task = fileRef.putString(photo, 'data_url');
task.snapshotChanges().pipe(
finalize(() => {
// execute other actions
fileRef.getDownloadURL().subscribe(url => {
if (url) {
this.fileUploadUrl.next(url);
}
})
let toast = this.toastCtrl.create({
message: 'Image upload successfully',
position: 'bottom',
duration: 3000
});
toast.present();
})
).subscribe();
})
} catch (e) {
console.error(e);
let toast = this.toastCtrl.create({
message: 'Image upload cancelled',
position: 'bottom',
duration: 3000
});
toast.present();
}
}
After a picture a taken (from actual iOS device) sometimes it crashes, sometimes it works fine. If I use the front camera, it always work.
But if I use the back camera, after a picture a selected, it flashes a white screen and then the app restarts. I suspect if it’s something to do with the image size or resolution. Sometimes if I take a very low res picture with the back camera (like in a low light environment), it uploads just fine. I researched a bit online, some people suggest running the app with production mode with --prod flag, but it is not solving it.
I also tried to lower the quality value to a lower number, but that still doesn’t work with the back camera.
I am pretty sure the plugin is added correctly and the privacy settings are also correct otherwise it won't allow me to take pictures.
Yes, you are right. When taking picture using camera with DataURL (i.e Base64). we may face memory issue because of the picture size and quality. You have quality of '40' with is fine. For Width and height you can set around 300px.
The more the image size will increase the size of the image which will impact the memory.
It's not the proper solution for your query, but after wasting my nights on the same I tried to reduce the image and tried to maintain it less than 2mb and it worked quite well.You can reduce the image size by giving the targetWidth and targetHeight. I kept both of them below 500.
const options: CameraOptions = {
quality: 30, // picture quality
destinationType: this.camera.DestinationType.DATA_URL,
sourceType: this.camera.PictureSourceType.CAMERA,
encodingType: this.camera.EncodingType.PNG,
mediaType: this.camera.MediaType.PICTURE,
cameraDirection: this.camera.Direction.FRONT,
allowEdit: true,
correctOrientation :false,
targetWidth: 400,
targetHeight: 400,
}
Is there a way to avoid the iOS video compression when selecting a video from the gallery with camera.getPicture()?
var options = {
sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
mediaType: 1
}
navigator.camera.getPicture(videoGallerySuccess, videoGalleryError, options);
The user has to wait for the video compression to be finished when selecting a video.
I would like to avoid this and instead do my own compression whenever the user has submitted a form for example.
In Cordova Camera Plugin you need to define a quality of the final video/photo. According documentation, default value for all media types is 50. To prevent a loss of resolution (and potentially video processing) set quality to 100.
var options = {
sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
mediaType: 1,
quality: 100
}
navigator.camera.getPicture(videoGallerySuccess, videoGalleryError, options);
I used YouTubePlayerSupportFragment to play a YouTube video, but it plays the video for 2 or 3 second and stops automatically. I can't find what's wrong.
Below is my code for fragment translation
mYoutubePlayerFragment = new YouTubePlayerSupportFragment();
mYoutubePlayerFragment.initialize(
"key",
mListnnerYouTube);
FragmentManager fragmentManager = getChildFragmentManager();
FragmentTransaction fragmentTransaction = fragmentManager
.beginTransaction();
fragmentTransaction.replace(R.id.fragment_youtube_player,
mYoutubePlayerFragment);
fragmentTransaction.commit();
and my onInitializationSuccess
#Override
public void onInitializationSuccess(Provider arg0, YouTubePlayer player,
boolean wasRestored) {
// TODO Auto-generated method stub
activeplayer = player;
activeplayer.setPlayerStyle(YouTubePlayer.PlayerStyle.DEFAULT);
if (!wasRestored) {
// player.cueVideo("nCgQDjiotG0");
player.loadVideo("nCgQDjiotG0");
}
I used YouTubePlayerSupportFragment in fragment
error message
YouTube video playback stopped due to unauthorized overlay on top of player. The YouTubePlayerView is obscured by com.viewpagerindicator.CirclePageIndicator{420b9758 V.ED.... ......I. 0,412-720,465 #7f0a005c app:id/indicator}. The view is inside the YouTubePlayerView, with the distance in px between each edge of the obscuring view and the YouTubePlayerView being: left: 0, top: 412, right: 0, bottom: 0..
You're most likely displaying something on top of the player view, which is forbidden by the YouTube SDK.
Check the logs, you should see a warning from the YouTube SDK that specifies why the video playback has been stopped. If a View is covering part of the player, the log will specify its ID and its position on the screen.
When taking a video in the app the video is not saved to camera roll.
I have set the flag saveToPhotoAlbum: true.
My code
opt = {
limit: 1,
saveToPhotoAlbum: true,
quality: 1
};
navigator.device.capture.captureVideo(
that.captureVideoOnSuccess,
that.onCaptureFail,
opt
);
A similar code works for getPicture with no problems
navigator.camera.getPicture(
that.uploadPhoto,
that.onCaptureFail, {
destinationType: Camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.CAMERA,
mediaType: Camera.MediaType.PICTURE,
saveToPhotoAlbum: true
}
);
Any idea how to over come this?
Any solution will be welcome - by config, js code, Objective-C
Thanks
Here is my solution (based on https://groups.google.com/forum/#!topic/phonegap/245nKJoqqak)
In plugins/org.apache.cordova.media-capture/src/ios/CDVCapture.m
Method - (CDVPluginResult*)processVideo:(NSString*)moviePath forCallbackId:(NSString*)callbackId
Uncomment the lines under
/* don't need, it should automatically get saved
I don't know why those line are comment out...
When playing embedded youtube videos, I don't want to display a poor resolution thumbnail when completed. Instead I'd like to have a high-resolution image of the last frame. Is this possible?
Either I can pause on the last frame or maybe there's a way to create a high-resolution thumbnail of the last frame?
You can use the YouTube Player API to detect when playback has ended, and at that point do some DOM manipulation to swap out the player and swap in an img tag pointing to one of the video's thumbnails. There normally would not be a thumbnail for the last frame in the video, though, so you would have to choose a different thumbnail.
If you just want to disable the related videos that are shown when a video ends, you can use the rel=0 player parameter, but that will leave you with a black screen.
Video player gives a callback "onStateChange" with the status YT.PlayerState.PAUSED before calling the callback with status YT.PlayerState.ENDED, you can try here.
I am also doing the same thing. I am just displaying an overlay to cover the video with replay button, But still it appears at the end of the video and then overlay appears (some glitch is observed)
I ran into this same problem and after spending a bunch of time playing around with it, the best solution for me was to just pause the video a fraction of second before the end, thus keeping it on that frame. Something like this:
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
playerVars: { 'autoplay': 1, 'controls': 0,'loop': 1, 'showinfo': 0, 'disablekb': 1, 'version': 3, 'vq': 'large', 'wmode':'opaque','rel': 0 },
videoId: 'YOURVIDEOID',
events: {
'onReady': onPlayerReady,
'onStateChange': onStateChange,
'onytplayerStateChange': onStateChange }
});
}
var done = false;
function onStateChange(event){
var videoDuration = player.getDuration();
if (event.data == YT.PlayerState.PLAYING && !done) {
// pause 0.1 seconds before the end
setTimeout(pauseVideo, (videoDuration-0.1)*1000);
done = true;
}
}
function pauseVideo() {
player.pauseVideo();
}
After the video starts (which we catch using onStateChange), we can get the video duration from the YouTube Player API (using player.getDuration), and then use setInterval to time a function that pauses the video 0.1 seconds (or whichever value we choose) before the end.
After running into to this issue too I ended up with this, which has been working pretty consistent for me so far:
var player;
var curTimer;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
videoId: 'The Video ID',
playerVars: { 'rel':0, 'enablejsapi':1, 'autohide':1, 'wmode':'opaque'}
});
player.addEventListener('onReady', 'onPlayerReady');
player.addEventListener('onStateChange', 'onPlayerStateChange');
}
function onPlayerStateChange(event) {
var videoDuration = event.target.getDuration();
var curTime = event.target.getCurrentTime();
if ( curTime ) {
/** Video Already Started */
/** Get video time remaining. */
videoDuration = videoDuration-curTime;
/** Remove old 'setTimeout' function */
removeTimeout(curTimer);
}
/**
Note: The '.25' is time subtracted to stop video on last frame.
Adjust this as needed.
*/
/** Add/Re-Add 'setTimeout' function with video time remaining. */
curTimer = setTimeout(pauseVideo, (videoDuration-.25)*1000);
}
function removeTimeout(elTimer){
/** Remove old timer */
clearTimeout(elTimer);
}
function stopVideo() {
player.stopVideo();
}
Explanations and/or notes are within the comments.
var thumb = true;
function onStateChange(event) {
if (thumb && event.data == YT.PlayerState.PLAYING) {
thumb = false;
player.pauseVideo();
return;
}
if (event.data != YT.PlayerState.ENDED) {
return;
}
player.setPlaybackQuality('highres');
player.seekTo(player.getDuration() - 1, true);
player.playVideo();
thumb = true;
}