MediaElement -
videon esittäminen
Tässä käsitellään videon esittämistä WPF C# -sovelluksessa. Tekemäni
esimerkkisovellus on ladattavissa täältä. Se on tehty
Visual Studio 2019:ssä, ja linkitetty zip-tiedosto on suoraan Visual
Studion projektikansio pakattuna. Saat vapaasti käyttää sovelluksen
koodirivejä omiin sovelluksiisi.
Esimerkkisovelluksen ominaisuuksia:
- Tavallinen isomittainen video: sovelluksessa on
määritelty videon maksimimitoiksi enintään näytön mitat ja
sovellusikkunan mitoiksi vähän vähemmän
- Ottaa huomioon käytetyn monitorin työalueen koon
- Pystyvideo (portrait) esim. 1080x1920 ja ylösalaisin
olevat kuvat hoituvat oikein (Orientation haetaan tiedostosta)
- Keskimittainen video avautuu suoraan oikean kokoisessa
ikkunassa
- Myös pieni kuva esim. 176x144 avautuu
- Kun video alussa ladataan, siitä avautuu vain
pysäytyskuva. Katselu aloitetaan toiminäppäimestä. Voidaan koodista
helposti muuttaa heti alkamaan jos halutaan
- "Stretch" toimii myös ylöspäin eli pienimittaisesta
videosta saa "suurennoksen"
- Tässä on nyt hienot toiminäppäimet, ja ne toimivat
hyvin. Myös ääni on ok.
Käytin buttonien kuvissa ja muutamissa koodausyksityiskohdissa
lähteenä tätä (Rod Stephensin blogi).
Esimerkkikoodin sisällä on kommentteina paljon tietoa
koodausratkaisuista, mutta seuraavassa on esitetty joitain.
Videotiedostoa valitessa valintaikkuna hakeutuu paikkaan "E:\" joten
muuta koodissa se haluamaksesi.
Sovellus hakee apuohjelman ffmpeg.exe paikasta
"E:\ALBUMI\ffmpeg.exe", joten sinun tulee vaihtaa koodissa paikka
omaan paikkaasi. Ja tietysti ensin ladata netistä ffmpeg.exe
sovelluksen käyttöön.
Tässä sovellusikkunan se osuus, jossa video esitetään:
<Grid
Grid.Row="1" >
<Viewbox Stretch="Uniform"
StretchDirection="Both">
<MediaElement x:Name="itseVideo"
LoadedBehavior="Manual" ScrubbingEnabled="true">
<MediaElement.LayoutTransform>
<TransformGroup>
<RotateTransform x:Name="transsi" Angle="90" />
</TransformGroup>
</MediaElement.LayoutTransform>
</MediaElement>
</Viewbox>
</Grid>
MediaElementin sisällä oleva "RotateTransform" huolehtii siitä, että
video esitetään oikein päin. Kun kännykällä kuvaa videon, niin
videodata tallentuu tiedostoon aina vakioasentoon, mutta sen mukana
tallentuu tieto "rotate", joka kertoo missä asennossa kännykkä oli
ollut. Tämä tieto, oikeastaan "Orientation", voi olla tyhjä, 90, 180
tai 270. MediaElement ei osaa itse näyttää videota oikeassa
asennossa, vaan sille pitää kertoa mikä asento on. Tässä
sovelluksessa "Orientation" haetaan ffmpeg-apusovelluksen avulla
videotiedostosta.
MediaElement piti sijoittaa "Viewboxin" sisään, jotta
sovellusikkunaa suurennettaessa video venyy vastaavasti myös
ylimittaiseksi. Ja ominaisuus Stretch piti sijoittaa nimenomaan
sille eikä MediaElementille.
Ominaisuus ScrubbingEnabled="true" tarvittiin siihen, että videosta
saa heti alkuun halutessaan pysäytyskuvan, eli voidaan laittaa
peräkkäin komennot Play() ja Stop().
Videokuvan oikean asennon (Orientation) ja ulkomittojen (leveys x
korkeus) saamiseksi vastaamaan videotiedostoa suoritetaan
sovelluksessa (funktio nro P17) tämä komento:
ffmpeg.exe -i
"C:\tilap\DSC.mov" -hide_banner
Tuloksena oleva ilmoitusteksti otetaan sovelluksessa merkkijonoon,
ja etsitään siitä rivit, joissa on teksti "rotate " tai
"Video:". Näiltä riveiltä löytyvät Orientation-tieto ja videokuvan
mitat. Sovellusikkunan tekeminen videota vastaavaan kokoonsa oli oma
vaivansa koodata (funktio nro P07), mutta se on koodissa aika hyvin
dokumentoitu.
-----------------------------------
(sivua muokattu 18.12.2019)