Avatar billede lach Juniormester
06. oktober 2018 - 21:05 Der er 12 kommentarer

Videofremviser

Hej.
Jeg har en side i asp hvor man kan uploade små videoklps i forskellige formater.
Findes der en måde hvor man kan åbne videofremviser som kan afspille disse formater, en måde hvor man kan ligge codes ind.
Eller hvad gør man? og er mit spg. i den rette kategori?
Avatar billede keysersoze Guru
07. oktober 2018 - 01:00 #1
ASP fungerer på serveren - en afspiller ligger på klienten så du skal have fat i almindelig HTML. Se fx https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video og https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats
Avatar billede lach Juniormester
07. oktober 2018 - 14:34 #2
Det vil sige at man skal finde alle disse plugins, i html som kan understøtte forskellige videoer formater?
Eller findes der et der kan alle? Dem du har vist virker så kun i Mozilla browsere?
Avatar billede eurositi Ekspert
07. oktober 2018 - 22:27 #3
Der skal ikke downloades plugins. Disse formater er understøttet direkte i browseren. Hvis andre formater skal afspilles, skal siden enten loade en speciel webplayer, som brugeren selv skal godkende, eller også må brugeren først downloade videoen til sin lokale PC.
Ift. browserunderstøttede formater kan du bruge siden Caniuse.com: https://caniuse.com/#search=webm

Apples Safari er den store modspiller ift. understøttelse af åbne (ikke-licensbehæftede) mediestandarder. Hvis du ikke har Apple-brugere (eller er ligeglad med dem), kan du bruge VP9 video og Opus audio i en WebM container. Men hvis du vil være sikker på fuld browserunderstøttelse, skal du bruge den kommercielle mediestandard H.264 video og AAC audio i en MP4 container.
Avatar billede lach Juniormester
07. oktober 2018 - 22:34 #4
Så må jeg lige spørge hvad en web container er .?
Avatar billede eurositi Ekspert
07. oktober 2018 - 22:53 #5
Jeg går ud fra, at du har videoerne liggende i diverse filformater? Disse filformater kaldes også containere, fordi de teknisk set sammenholder videosporet og lydsporet (og nogle gange flere ting). WebM og MP4 er de mest almindelige i vore dage. Men f.eks. Flash hjemmesider benyttede ofte containeren FLV, og Silverlight benyttede WMV og ASF.

WebM indeholder video af typen VP8 eller VP9 samt lyd i typen Vorbis eller Opus.
MP4 indeholder (som regel) video i typen H.264 og lyd i typen AAC.

Andre filtyper (MKV, MXF eller MOV) kan indeholde mange typer af video og lyd, men generelt kan ingen af disse afspilles direkte i en browser. Disse containere er også udviklet til andre formål end lige netop streaming.

En web container er noget andet end en mediecontainer: https://en.wikipedia.org/wiki/Web_container
Avatar billede lach Juniormester
08. oktober 2018 - 19:26 #6
Tak for god forklaring.
Men når de ikke kan afspilles direkte i browseren, hvad er så løsningen?
Er det nødvendig at brugeren eks. installerer quick time player osv?
Avatar billede keysersoze Guru
10. oktober 2018 - 13:10 #7
Hvis man helt vil undgå problemer med formater osv skal du kigge på en ekstern løsning, fx youtube, vimeo eller 23video, men ellers kan du langt hen ad vejen nøjes med et video-tag som jeg linkede til i #1.
Avatar billede lach Juniormester
11. oktober 2018 - 18:15 #8
Vil indrømme, jeg er måske ikke helt med.
Men har prøvet dette:
<video controls
      muted
      src="video/test2.mp4"
      width="300"
      height="200">
    Din browser understøtter ikke dette plug-in.
</video>

Det virker dog ikke.
Avatar billede eurositi Ekspert
11. oktober 2018 - 18:37 #9
Ligger din test2.mp4 video i en undermappe, der hedder "video"? Ellers skal du fjerne dette præfiks fra src.
<video controls
      muted
      src="test2.mp4"
      width="300"
      height="200">
Din browser understøtter ikke Video-tagget.
</video>

... Altså hvis du har videoen i de pågældende to formater. Safari understøtter ikke WebM. Alle andre browsere gør.

Prøv også dette (lav for testens skyld gerne både en mp4 og en webm version af din video) og læg dem i samme mappe som HTML'en. Så burde dette virke:
<video controls>
  <source src="test2.webm" type="video/webm">
  <source src="test2.mp4" type="video/mp4">
  <p>Din browser understøtter ikke HTML5 video-tagget. Her er et <a href="test2.mp4">link til videoen</a> i stedet.</p>
</video>

Ovenstående vil:
- Afspille WebM-versionen af videoen, hvis browserenunderstøtter det (det gør Internet Explorer og Safari ikke), ellers vil den afspille MP4-versionen.
- Give mulighed for at downloade videoen
- Controls-elementet vil loade de standard kontrolfunktioner som den aktuelle browser benytter til video.
- Afspille videoen i fuld størrelse (fordi der ikke er angivet højde og bredde)
Avatar billede lach Juniormester
12. oktober 2018 - 17:25 #10
Hm. næ det virker godt nok ikke.:-(
Den skriver "ugyldig kilde". og din browser understøtter ikke HTML5

Jeg tester i Windows 10 edge.
Avatar billede keysersoze Guru
12. oktober 2018 - 18:16 #11
Prøv at kom med et link så vi kan se hvad der foregår.
Avatar billede eurositi Ekspert
12. oktober 2018 - 21:50 #12
Min Edge browser afspiller MP4-filen uden problemer. Min helt simple HTML5-kode ser således ud. HTML-filen med denne kode samt de to videofiler ligger i samme mappe:

<html>
<body>
<video controls>
  <source src="New_record.webm" type="video/webm">
  <source src="Viana_crowd.mp4" type="video/mp4">
  <p>Din browser understøtter ikke HTML5 video-tagget. Her er et <a href="Viana_crowd.mp4">link til videoen</a> i stedet.</p>
</video>
</body>
</html>


Edge og Internet Explorer afspiller kun MP4-filen. Hvis din Edge ikke engang afspiller MP4-filen, er der noget galt med dit setup.
Firefox og Chrome afspiller WebM-filen. De kan selvfølgelig også afspille MP4-filen, men de vælger selvfølgelig den første video.

Tjek hvilken version af Edge, du har installeret ved at klikke på Indstillinger i Edge (scroll evt. ned i bunden). Den opdateres gennem Windows Update, som du også kan søge manuelt i.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Kurser inden for grundlæggende programmering

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester