Videos für die eigene Webseite
Wie kann man Videos in die eigene Webseite einbinden?
Aufgabe:
Ich möchte nicht alle Videos unter Youtube einstellen, sondern in meiner eigenen Webseite hochladen und anzeigen.
Lösung:
Man muss nur .mp4 Videos erstellen mit den richtigen Einstellungen. Diese Videos kann jeder Browser automatisch anzeigen, sofern diese im Internet erreichbar sind mit einer Adresse.
Das heißt, man muß nur Videos erstellen, auf die Webseite hochladen und die Anzeige mit einem Video-Tag auf der Webseite einbinden.
Erläuterung:
Seit HTML5 können Videos im Internet mit jedem Browser angezeigt werden, sofern diese eine bestimmte Mindestvorraussetzung aufweisen.
Die Standard-Einstellung für Videos über das Internet sollte sein, dass das Format
.mp4 als Dateiendung aufweist.
Bei der Aufnahme von Videos muss die Einstellung des Codec H264 eingestellt sein.
Hier ein Beispiel eines Videos auf einer eigenen Webseite.
Es handelt sich dabei um ein einfaches MP4 Video, welches auf die Webseite hochgeladen wurde.
https://rue25.de/Details?d=2191&a=4&f=25&l=0&v=d&t=Brennende-F%C3%BC%C3%9Fe:-Ursache-und-Heilung
Das dargestellte Beispiel-Video ist ein Video mit 500MB Dateigröße und der Endung .mp4, aufgenommen mit einer Olympus Tough TG 850 Kamera
Und anschliessend mit der Video Bearbeitungssoftware Magix Delux zusammengeschnitten und als H264 ausgegeben.
Wichtig ist hier auch, dass es ein sehr großes Video mit 0,5 GB ist und einer Video Darstellungdauer von 10 Minuten.
HTML5
Unter HTML5 kann man das .mp4 Video direkt einbinden durch das Video-HTML-Tag wie hier:
<videowidth="320"height="240"controls>
<sourcesrc="https://rue25.de/Daten/Videos/2/Videos_2191/Video_2191_1.mp4”type="video/mp4">
Test Video
</video>
|
Oder direkt die URL in der Browser Adresszeile eingeben
https://rue25.de/Daten/Videos/2/Videos_2191/Video_2191_1.mp4
ASP.Net Controls
Bei Verwendung von ASP.Net Ajax Controls verwende ich selbst das Serverseitige radMediaPlayer Control von Telerik.
Dadurch werden die Bedienelemente verbessert dargestellt.
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
..
<telerik:RadMediaPlayer ID="ctlMediaPlayer"
Width="854px" Height="480px"
runat="server"
Visible="false"
HDActive="false"
HDSource=""
BackColor="Black"
BorderColor="Black"
BorderWidth="2px"
Skin="Glow"
>
</telerik:RadMediaPlayer>
..
|
Laden des Video Controls zur Laufzeit Serverseitig
Private Function fl_Anzeigen_Video() As Boolean
'------------< fl_Anzeigen_Video >------------
'--< Datensatz holen >--
'*pruefe ob in Files eintraege vorliegen
Dim dt As DataTable = clsDB.getDataTable("SELECT TOP 1* FROM tblWeb_Videos WHERE IDDetail= " & _IDDetail)
'< kontrolle >
If dt Is Nothing Then
Return False
Exit Function
ElseIf dt.Rows.Count = 0 Then
Return False
Exit Function
End If
'</ kontrolle >
Dim sPfad = "~/Daten/Videos/"
Dim intTeiler As Integer = _IDDetail / 1000
Dim row As DataRow
row = dt.Rows(0)
'----< Init >----
Dim sFilename As String = fx.dbText(row("Filename"))
Dim sFilename_withPath As String = sPfad & intTeiler & "/Videos_" & _IDDetail & "/Video_" & _IDDetail & "_1.mp4"
Dim sDescription As String = fx.dbText(row("Text" & _IDLanguage))
'Dim sImage As String = "~/Daten/Images/" & intTeiler & "/Image_" & _IDDetail & "_1.jpg"
'----</ Init >----
'< anzeigen >
ctlMediaPlayer.Source = sFilename_withPath
ctlMediaPlayer.Title = lblTitle.Text
'Response.Write(sFilename_withPath)
'"~/Daten/Videos/2/Videos_1977/video2.mp4" '
ctlMediaPlayer.Visible = True
'</ anzeigen >
'< Abschluss >
Return True
'</ Abschluss >
'------------</ fl_Anzeigen_Downloads >------------
End Function
|
Einstellungen der Aufnahmesoftware
Magix Deluxe
Einstellung der Ausgabe mit H263
Bei
H264 einstellen in Software
Beim Aufnahme-Verfahren muss darauf geachtet werden, dass die Aufnahme mit dem Codec H264 erstellt wird.
Bei der Aufnahme Software Bandicam zum Beispiel, muss der Codec von MPEG-4 auf H264 (CPU) umgeschaltet werden
Einstellungen unter: Bandicam->Erweiterte Optionen->Video Formate Einstellungen->Video->Codec
Video Darstellung in den Browsern:
Die Anzeige der Seite mit dem Video funktioniert unter allen gängigen Webbrowsern ohne Probleme und ohne zusätzliche Addins.
Hier dargestellt im Vergleich jeweils die Webseite nach dem Öffnen der Seite.
Alle Videos werden automatisch mit dem Start der .mp4 Datei angezeigt
- Google Chrome
- Microsoft Edge
- Microsoft IE Internet Explorer
- Mozilla Firefox
