How to populate videos from C# on windows phone silverlight app - c#

I am creating a windows phone quiz app. it also displays short videos as questions which the users answers on. i have been able to use this code to display videos from a local directory. but my app package file gets so large if i will have to include too many videos locally. so i decided to try loading from internet once the users needs it.
this is my XAML code:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid HorizontalAlignment="Left" Height="186" Margin="10,132,0,0" VerticalAlignment="Top" Width="436">
<Core:SMFPlayer PositionLiveBuffer="0:0:9" EstimatedLiveDuration="0:0:30" VolumeLevel="0.9">
<Core:SMFPlayer.SelectedAudioStream>
<Media:StreamMetadata/>
</Core:SMFPlayer.SelectedAudioStream>
<Core:SMFPlayer.Playlist>
<Media:PlaylistItem x:Name="media" DeliveryMethod="ProgressiveDownload" MediaSource="Assets/Kedike.wmv" MediaType="Entertainment" Title="song" FileSize="2413589" FrameRate="1045" VideoHeight="268" VideoWidth="512" Description=" vodeo" JumpToLive="True"/>
</Core:SMFPlayer.Playlist>
</Core:SMFPlayer>
</Grid>
</Grid>
This code works when the videos are loaded from a local source i.e /videos/kedike.wmv. i saw this code online and it actually was able to get a video with this:
mediasource = "http://ecn.channel9.msdn.com/o9/content/smf/smoothcontent/bbbwp7/big buck bunny.ism/manifest"
But to do this from the net, the DeliveryMehod property is set to ="AdaptiveStreaming"
i wondered what file type is that and i tried replacing the source with a youtube video link and a facebook video link. none of these works.
I need help in doing this.
Then i want to change the mediasource programatically. i.e through the xaml.cs file. i think declaring
media.MediaSource = new Uri("http://....", UriKind=Relative);
Dont know if this will work.
I tried doing this since i have been able to load videos locally but i get error that i have not initialised or created a new instance of the media element (not the windows phone xna media)
i got some other errors while trying to change some other things.
my C# CODE IS:
private void secondvideo()
{
media.MediaSource = new Uri("Videos/kedike2.wmv", UriKind.Relative);
}
i want to play a second video with this code and i get error. this is the link to where i got the code.code link

You can't just use any kind of link in MMPPF due to its limitation. You need to have the exact URL of the video.
Youtube videos' URL(the exact ones) are generally too large. If you really want to load youtube videos in MMPPF(though I think it's not legal to use Youtube videos in your own Media Player) use this which is available via NuGet.
You can use this toolkit to fetch the exact youtube video URL and use it in your own player.

Related

Select multiple images with MediaPlugin (Cross-platform)

I need to implement the possibility to pick multiple images and load them in my app, after some researches I camer across this Package called MediaPlugin and I noticed that it has a method called PickPhotosAsync() that allows users to pick multiple images from the gallery.
So I set everything up in the iOs and Android as it's said in the page on GitHub and copy & pasted the code of the MainPage.
By the time I'm writing this I tried other solutions but all of them allow me just to pick a single image and I can't figure out why it doesn't work as it's expected to.
Here's some C# code (even though it's the same of the sample given by James Montamagno)
files.Clear();
if (!CrossMedia.Current.IsPickPhotoSupported)
{
await DisplayAlert("Photos Not Supported", ":( Permission not granted to photos.", "OK");
return;
}
var picked = await CrossMedia.Current.PickPhotosAsync();
if (picked == null)
return;
foreach (var file in picked)
files.Add(file);
And here's the Xaml page
<StackLayout>
<Button x:Name="pickPhoto" Text="Carica Foto" />
<Button x:Name="takePhoto" Text="Scatta Foto" />
<Label x:Name="label" />
</StackLayout>
I will not post the entire code (since it is too much) but here is a complete tutorial on how to achieve that.
It uses a Native iOS library, and the complete implementation on Android.

UWP play a YouTube video

I am trying to find a resource that would explain how to retrieve a YouTube video URL to play in an external player. Of course, I have taken a look at the YouTube Data API, but there doesn't seem to be a way to do this.
However, I know it is possible, given that there exist YouTube client applications that are able to stream video (MetroTube is one example).
I saw the related post (How to play a YouTube video in WPF using C#), but it was posted a long time ago. I would like to avoid having to use a WebBrowser control (or WebView in UWP).
Can someone suggest an approach or point to a resource that allows this?
I have used MyToolKit.Extended in the past to integrate Youtube Videos in one of my App.
Install Nuget Package from Here
Once done, you need to call this method
internal async Task<Uri> GetYoutubeUri(string VideoID)
{
YouTubeUri uri = await YouTube.GetVideoUriAsync(VideoID, YouTubeQuality.Quality1080P);
return uri.Uri;
}
Make sure you are passing only VideoID. i.e, If your URL is
https://www.youtube.com/watch?v=UO-8CMdeSHA
you need to pass only UO-8CMdeSHA.
Once done, you will receive the actual Media Uri. You can now set this as a source to MediaPlayer. Something like below.
Uri _videoUri = await GetYoutubeUri("UO-8CMdeSHA");
if (_videoUri != null)
{
player.Source = _videoUri;
player.Play();
}
To ensure you see basic Play/Pause button and few others, Use Below in your XAML.
MediaElement x:Name="player" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" AreTransportControlsEnabled="True" />
And you should be able to play YouTube Videos.
Good Luck.

uwp youtube player stream mvvm

Solution at the end.
I have a hard time finding informations about a youtubeplayer in uwp following the MVVM pattern.
What are the differences between <MediaElement> and <WebView> in this context and what would be better/easier to use?
How do I handle the events of the Player in my VM?
VS2017 tells me that i can't use the MediaPlayerElement
Error Message
I tried other versions/builds of VS2017 but get the same error.
Are there other ways to do this?
TY
Edit:
<WebView> seems to be pretty easy. Are there any downsides using it?
<WebView x:Name="webView" Width="300"
Height="225" Source="https://www.youtube.com/watch?v=2Rg1XmzzrTM"
RelativePanel.AlignHorizontalCenterWithPanel="True"
RelativePanel.Below="linkYT"/>
Edit2:
Thanks to Aditya Sharma I got on the right Track and found this Question
So I ended up with the following:
View:
<MediaElement x:Name="ytPlayer"
AreTransportControlsEnabled="True"
Source="{Binding Test1, Mode=OneWay}"
Width="600"
AutoPlay="True"
Height="400"/>
VM:
public void doSomething()
{
...
test1 = new Uri(convertLink(currentMovie.TrailerSource));
...
}
private string convertLink(string link)
{
IEnumerable<VideoInfo> videoInfos = DownloadUrlResolver.GetDownloadUrls(link, false);
VideoInfo video = videoInfos
.First(info => info.VideoType == VideoType.Mp4 && info.Resolution == 720
);
return video.DownloadUrl;
}
Where Test1 is of Type Uri and currentMovie.TrailerSource is a string
For this to work I had to get the NuGet YouTubeExtractor.
Hope this Helps somebody get it done MVVM.
So here is the thing, We have 1. WebView and 2. MediaElement
Let's take up a deep dive into these:
WebView: is basically a phone in app browser. you can give it a link and it'll navigate to the webPage. You can use it for your youtube screening but there will be downsides:
You won't be able to use native controls like pause/play/seek locally. All the controls will be handled by the website rendered in a WebView.
You have no control on the UI as well. You'll see the basic embedded youtube UI in your app WebView that might just break your UI and might also just provide a pixelated view when scaled.
MediaElement on the other hand is quite convenient, it has a source property that takes a Uri datatype as well so the great thing is that you can pass in your Uri as the embedded link for the youtube vid, the MediaElement will handle everything for you plus, it'll give you some additional advantages like control over your UI, Play/Pause or even custom styling and autoplay/playRate options.
So In my opinion, I would say use a MediaElement over the webView as it'll provide you with more control over whats happening and also provide a native experience to the user.
You can find some more information on it here
in this question and in it's comments section.
Also, since you'll be using mvvm on windows 10, I would recommend you x:bind the Source property of the MediaElement to a Uri DataType property in a oneWay Mode in your ViewModel

Displaying image that was previously uploaded to server

For a project I'm working I would like the user (admin) to be able to change the picture on the page he is currently on. I managed to upload the image to "the server" using interlink. This basicly uploads it to a given folder on a server, in my case being: Interlink/Uploads.
But now I don't really know how can I tell my website to replace the source of the image that is currently shown with the source of the uploaded image.
Another something I would like to do is create a simple image gallery with all the images in that folder, once again I don't know how to do this.
I hope somebody can help me, Thanks.
Thomas
Edit: Just so clarify, the application is written in silverlight (XAML, C#). I apologise for any inconvenience.
I take it that the "Silverlight" portion of this question is related only to Interlink (your file uploader), and not to the page itself, which I presume is straight HTML.
If that's the case, you've got several options for changing the local image. The simplest way is simply to wait until you know that your file upload has finished (presumably Interlink has some way of notifying you that this is the case), and then run something like this bit of JavaScript:
<script type='text/javascript'>
function changeImage(newImageSource) {
document.getElementById('myTargetImage').setAttribute('src', newImageSource);
}
</script>
As far as displaying a simple image gallery with all the images in the folder, my recommendation would be to look into one of the numerous jquery plugins that handle this sort of thing, e.g.:
http://www.1stwebdesigner.com/css/fresh-jquery-image-gallery-display-solutions/
EDIT: Silverlight Options
You basically have the same options, except you're doing them in C# instead of JavaScript. For instance, when Interlink tells you that the new image has been uploaded, run this:
string imageName = "something.jpeg";
var ub = new UriBuilder(HtmlPage.Document.DocumentUri);
ub.Path = "/Interlink/Uploads/" + imageName;
img.Source = new BitmapImage(ub.Uri);
And for an image carousel, something like this:
http://3dimagecarousel.codeplex.com/
You'll just need to provide the URL's of all the images. The easiest way to do that is probably to expose a web service method that lists them all.

How to display Images from internet in a windows phone 7 app?

I am making an application which gets urls of images by parsing an RSS feed.I want to diplay that images in the application one after another when tapped on screen .How can i do it? Is it required to download all images before displaying? Please explain.
Thanks and regards
vaysage
Maybe I don't understand your question correctly but you should be able to set the Source of an Image element directly to an URI specified in your RSS feed item.
<Image x:Name="m_Image" Source="http://www.microsoft.com/silverlight/images/ms-silverlight-logo.png"/>
When changing item (by tapping) you can easily swap the source of the image from your code.
Uri uri = new Uri("...", UriKind.Absolute);
ImageSource imgSource = new BitmapImage(uri);
m_Image.Source = imgSource;
Using LowProfileImageLoader (as mentioned by Thomas Joulin and Mick N) is a good way to load images in the background and keep the UI responsive.
Parse you're RSS Feed to get the images URL's (using for exemple HTTPWebRequest)
Set the binding for the source of each of you images (since it's web based, I recommend LowProfileImageLoader which will load images in the background.
Create a SlideShow.xaml view, based on a pivot. Dynamically add Pivot items
On tap on a thumbnail, launch the SlideShow.xaml, at the specified index
You will need to get the images download in some form.
You might find these posts an interesting read.
Keep a low profile [LowProfileImageLoader helps the Windows Phone 7 UI thread stay responsive by loading images in the background] - Delay's Blog
**There's no substitute for customer feedback! [Improving Windows Phone 7 application performance now a bit easier with LowProfileImageLoader and DeferredLoadListBox updates] - Delay's Blog

Categories

Resources