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
Related
I want to setup my raspberry pi 3 that is running Windows 10 IoT to display a webpage, specifically this page. My issue is, that looking at IoTBrowser sample code, and I can't figure out how to remove the buttons and address bar and get the webpage to autoload. So I'm asking if anyone has code I can use for it?
The instructions I was trying to follow for removing all the display elements except for the webpage its self can be found here, but it really confuses me.
My issue is, that looking at IoTBrowser sample code, and I can't
figure out how to remove the buttons and address bar and get the
webpage to autoload.
You can remove all buttons and address bar except webView in xaml and utilize OnNavigatedTo method to achieve autoload purpose. Then what you need are a few lines code like this:
In MainPage.xaml :
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<WebView x:Name="webView"/>
</Grid>
In MainPage.xaml.cs :
protected override void OnNavigatedTo(NavigationEventArgs e)
{
var address = "https://www.windowsondevices.com";
webView.Navigate(new Uri(address));
}
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.
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.
I am doing this to do simple animation between my activities:
<translate
android:duration="#android:integer/config_longAnimTime"
android:fromXDelta="0"
android:fromYDelta="0"
android:interpolator="#android:anim/linear_interpolator"
android:toXDelta="-100%"
android:toYDelta="0" />
And this to call it:
StartActivity (typeof(detalheVinho));
OverridePendingTransition (Resource.Animator.animRight, Resource.Animator.animRight2);
But i need to animate like it was being read like a book i need to make the activities roll like pages in a book and not just sliding.
I serched the entire google for libraries or a way so does anyone knows a way?
I notice xamarin does have the viewflipper in layout toolbox. I will try attempt this myself and edit my post if i manage. Link below seems like a good place to start.
http://www.learn-android-easily.com/2013/06/android-viewflipper-example.html
Okay, I'm attempting to load an image to an Image control on my page. Now as far as I know, I know how to do this (the method I'm using has worked before). But for some reason it's not working this time. The image is not being loaded.
Okay, let's start with the XAML. You can see it here.. Please note my excellent artistic skills. You can see that the top image is the left one on the screen and the bottom image is the right one. As you can also see, the image on the right is loaded in the XAML from a file in the Assets/Images folder. It should also be noted that we can take from this that the image loads okay - there aren't errors with the image. We can also see that the images are not blocked by anything (when the program runs, the right image shows just fine).
So the left image, 'image1' is the one that I'm loading from the code behind. Here is the code behind for that page. As you can see, there's not a lot. Yes I do use a view model, but it doesn't interface with the image at all (its only exposed properties are an Entity (for a selected item) and an ObservableCollection of entities (for the ItemsSource of a control)). As you can also see, I'm attempting to load the same image as is used for the static image (so I can say for sure that the image is okay for Silverlight).
If you're wondering about the BitmapCreateOptions line, that was something that someone suggested to me to add. I have tried removing it, but that doesn't seem to cause any difference.
The next question is - have I attempted to use the event handler for the failure? Yes I have. The error I get is 'AG_E_NETWORK_ERROR'.
I'm not sure what exactly this is about - I'm not loading from a network.
Can anyone offer assistance? Thanks.
I can't help but notice that in your XAML, you have a "../" at the start of the image path, but this is missing from the path you're using in code-behind. Could this be the problem?
Have You tried to call BeginInit and EndInit before and after setting the uri?
BitmapImage bmpImg = new BitmagImage();
bmpImg.BeginInit();
bmpImg.UriSource = new Uri(...);
bmpImg.EndInit();
Or use the constructor that takes an Uri. msdn