Kello ja Hokkeli


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)