I'm using Streaming Media plugin in my Ionic App .
The Video is played but how can we retrieve the video played duration while using this plugin.
playVideo(attachment){
var url = this.promotogramPath+attachment;
let options: StreamingVideoOptions = {
successCallback: (data) => { console.log('Video played',data) },
errorCallback: (e) => { console.log('Error streaming') },
orientation: 'landscape'
};
this.streamingMedia.playVideo(url, options);
}
I used this code and in successCallback function i m getting 'OK'.
How can we get the video played duration
Related
BRIEF :
I have created Google assistant application that plays music using Google Action Builder. On specific command, it triggers a webhook. Webhook contains MediaResponse
OR Media from '#assistant/conversation' Library and the code is following
conv.add(new Media({
mediaType: 'AUDIO',
start_offset: `3.000000001s`,
mediaObjects: [{
name: music,
description: 'This is example of code ',
url: `https://example.com`,
image: {
large: {
url: 'https://example.com'
},
}
}]
}));
It is running well on android and the emulator .
ISSUE :
When I pause the music (USING PAUSE BUTTON), the Media player goes away.
What should I do to keep the media player so that I can resume the music?
Any information regarding this would be appreciated & Thanks in advance.
EDITED: It works well for showing media player and plays music but if you click pause button it goes away for both above devices(Android/Test Emulator).
Just adding acknowledgment to it fixed the issue.
app.handle('media_status', (conv) => {
const mediaStatus = conv.intent.params.MEDIA_STATUS.resolved;
switch (mediaStatus) {
case 'FINISHED':
conv.add('Media has finished playing.');
break;
case 'FAILED':
conv.add('Media has failed.');
break;
case 'PAUSED' || 'STOPPED':
if (conv.request.context) {
// Persist the media progress value
const progress = conv.request.context.media.progress;
}
// Acknowledge pause/stop
conv.add(new Media({
mediaType: 'MEDIA_STATUS_ACK'
}));
break;
default:
conv.add('Unknown media status received.');
}
});
I am using Flutter-FFMPEG a Flutter library based on Mobile FFMPEG. I am creating a video from a list of .bmp images. The video works plays normally in devices media player on android or desktop.
But when I tried to share that video on social media like say Instagram it says file format not supported.
It didn't use to work on WhatsApp but after some googling, I made some changes and it works on WhatsApp and Youtube now but not on Instagram, Linkedin, etc.
void _runFFmpeg() async {
print('Run FFMPEG');
var dir = await getApplicationDocumentsDirectory();
var output = await getExternalStorageDirectory();
String videoSize = '$ImageWidth:$ImageSize';
print("${ImageWidth}x$ImageSize");
var arguments = [
"-y", // replace output file if it already exists
"-i", "${output.path}/frame_%d.bmp",
"-s", '${ImageWidth}x$ImageSize',
"-framerate", "30", // framrate
"-c:v", "libvpx",
'-ab', '128k',
'-ar', '44100',
'-strict', 'experimental',
"-vcodec", "libx264",
"-pixel_format", "yuv420p",
"-preset", "ultrafast",
"-tune", "animation",
"${output.path}/test.mp4"
];
await _flutterFFmpeg.executeWithArguments(arguments).then((rc) {
print('Process done with $rc');
});
The plugin I am using (Flutter-FFMPEG) didn't support libx264
I tried using '-profile:v' to baseline but that gives an error, saying Error setting profile to baseline.
Also, I tried to first make a .webm file and then convert that to mp4. I was also able to use '-profile:v' when converting .webm to mp4 and gave no error but the output video didn't work on Social Media platforms.
fixFFMPEG(int imageWidth, int imageSize) async {
print('Fix FFMPEG');
var output = await getExternalStorageDirectory();
var arguments2 = [
'-y',
// "-s",
// '${imageWidth}:$imageSize',
'-i',
'${output.path}/testNew.mp4',
"-framerate", "30", // framrate
"-vcodec", "h264",
"-c:v", "libx264rgb",
"-c:a", 'acc',
'-ab', '128k',
'-ar', '44100',
'-strict', 'experimental',
// '-c',
// 'copy',
// '-strict',
// '-2',
"-vprofile",
"baseline",
"-level",
"3.0",
"-an",
"-pixel_format", "yuv420p",
// '-vtag',
// 'avc1',
// "-vprofile",
// "baseline",
// "-level",
// "3.0",
// "-brand", "mp42",
'${output.path}/fixedvideo1.mp4'
];
// await _flutterFFmpeg
// .executeWithArguments(arguments2)
// .then((rc) => print("FFmpeg process2 exited with rc $rc"));
}
I'm developing an app, using Ionic 3, thats reproduce a youtube video. As I want an embedded video I use an iframe where the src is the video's url.
When I test on an Android device, i get this before the video starts playing.
Is there a way to avoid that background? or make it personalized?
Testing it using "ionic serve" makes the background completely black, so it only happens running on an android device.
Why not use a temporary <img>, as soon as the user clicks on the img, the <iframe> tag is toggled on, with Autoplay = true.
I recommend using angular youtube-player. You can detect when the video is ready to play. If the video is not ready yet, just display an image or a spinner.
Here is an example:
HTML:
<img class="video-loading-cover" src="assets/images/home/ytcover.png" height="550" width="1400" [hidden]="isVideoLoaded" alt="">
<youtube-player #youTubePlayer (ready)="playVideo($event)" (stateChange)="onPlayerStateChange($event)" (error)="hideVideo()"
width="100%" height="540px" [playerVars]="playerVars" [videoId]="videoId"></youtube-player>
TS:
#ViewChild('youTubePlayer') youTubePlayer: YT.Player;
isVideoLoaded: boolean;
videoId = 'your video id';
// optional
playerVars: YT.PlayerVars = {
autoplay: AutoPlay.AutoPlay,
loop: Loop.Loop,
playlist: 'yourPlaylist',
controls: Controls.Hide,
enablejsapi: JsApi.Enable,
origin: window.location.origin,
rel: RelatedVideos.Hide,
iv_load_policy: IvLoadPolicy.Hide,
autohide: AutoHide.HideAllControls,
showinfo: ShowInfo.Hide
};
ngOnInit() {
const tag = document.createElement('script');
tag.src = 'https://www.youtube.com/iframe_api';
document.body.appendChild(tag);
}
onPlayerStateChange(el) {
this.youTubePlayer.mute();
switch (el.data) {
case -1:
case 2:
this.youTubePlayer.playVideo();
break;
case 1:
this.isVideoLoaded = true;
break;
}
}
hideVideo(): void {
this.isVideoLoaded = false;
}
playVideo(event): void {
this.youTubePlayer.mute();
setTimeout(() => {
this.youTubePlayer.playVideo();
}, 10);
}
Note that in my example when the youtube video is loading it will call the (error)="hideVideo()" function and an image will be displayed. When it is available it will automatically hide the image and play the video.
I'm working on an ionic mobile application where I needed to read videos on streaming by providing the URI of the video online. So I used cordova-plugin-media-streamingplugin offered by cordova.
My problem is that: the window reading the video closes automatically after the video finishes, the user won't be able to play the video again in this window.
In the official documentation of the plugin [that i found here], there is an attribute called shouldAutoClosethat should be set to false to avoid that problem. But this didn't work for me.
Here is the code I used to play a video on streaming :
startVideo(item : Multimediasendtrust) {
let options = {
successCallback: () => { console.log('Finished Video') },
errorCallback: (e) => { console.log('Error: ', e) },
orientation: 'portrait',
controls: true,
shouldAutoClose: false
};
console.log('those are option ',options );
console.log('the link of the video ', item.url_media);
this.streamingMedia.playVideo(item.url_media, options); }
Can anyone help please. Thanks in advance.
I'm new on iOS, tvOS and Swift. I've been trying to play a video on tvOS App, but the video from a livestream URL which works fine on web. The TVML template and TVJS both works, even the App works if contains a single video URL(.mp4) but when I try with this streaming link it doesn´t work.
This is my TVJS
App.onLaunch = function(options){
console.log("Hello TVML!");
var resourceLoader = new ResourceLoaderJS(NativeResourceLoader.create());
var initialDoc = resourceLoader.getDocument("hello.tvml");
navigationDocument.pushDocument(initialDoc);
initialDoc.addEventListener("play", handleEvent);
initialDoc.addEventListener("select", handleEvent);
}
class ResourceLoaderJS {
constructor(nativeResourceLoader) {
this.nativeResourceLoader = nativeResourceLoader;
this.domParser = new DOMParser();
}
getDocument(name) {
var docString = this.nativeResourceLoader.loadBundleResource(name);
return this.domParser.parseFromString(docString, "application/xml");
}
}
function playVideo(title, url) {
var player = new Player();
var video = new MediaItem('video', url);
video.title = title;
player.playlist = new Playlist();
player.playlist.push(video);
player.play();
}
function handleEvent(event) {
var buttonId = event.target.getAttribute("id");
if(buttonId === "play") {
playVideo("Hello TVML!","https://new.livestream.com/accounts...");
}
}
Yes it is possible to play livestream urls in apple tv tvml. You just have to specify livestream url in the url section of the code. I was able to play .m3u8 format without any modifications to the code.
You can refer following link to get more info on creating the player:
https://developer.apple.com/library/content/samplecode/TVMLAudioVideo/Listings/client_js_application_js.html