{"id":1055,"date":"2017-05-18T09:04:52","date_gmt":"2017-05-18T08:04:52","guid":{"rendered":"https:\/\/www.melon-media.de\/blog\/?p=1055"},"modified":"2020-04-08T07:24:10","modified_gmt":"2020-04-08T06:24:10","slug":"html5-video-in-typo3-einbinden","status":"publish","type":"post","link":"https:\/\/www.melon-media.de\/blog\/html5-video-in-typo3-einbinden\/","title":{"rendered":"Binde ein HTML5 Video in TYPO3 schnell ein"},"content":{"rendered":"

Wer sein HTML5 Video lieber selber hosten m\u00f6chte und nicht auf Plattformen wie YouTube oder Vimeo ver\u00f6ffentlichen m\u00f6chte, der bekommt mit den TYPO3 7.6 Boardmitteln bereits M\u00f6glichkeiten ein Video schnell und einfach als Inhaltselement einzubinden.<\/p>\n

<\/p>\n

Zugegeben, das Thema ist schon etwas \u00e4lter, aber wir haben immer wieder die Erfahrung gemacht, dass veraltete Informationen \u00fcber TYPO3 im Internet den Eindruck erwecken, das der TYPO3 Standard keine M\u00f6glichkeiten bietet, ein HTML5 Video „einfach“ hochzuladen.<\/p>\n

HTML5 Video, was ist das?<\/h2>\n

Die Welt spricht von HTML5 Video, was bedeutet es aber, wenn das Video als HTML5 bereitgestellt werden soll? In erster Linie soll\u00a0es ger\u00e4teunabh\u00e4ngig verf\u00fcgbar\u00a0sein. Egal ob mit einem Android Smartphone oder einem Windows PC, auf allen Ger\u00e4ten soll das Video gleichwertig aussehen.\u00a0Leider haben sich die Browser-Hersteller hier „noch“ nicht auf ein Format einigen k\u00f6nnen, was unter Wikipedia gut nachzulesen ist<\/a>.\u00a0Demzufolge haben die Website-Betreiber das nachsehen, und sollten\u00a0das gew\u00fcnschte\u00a0Video im MP4, OGG und\u00a0WEBM Format bereitstellen.<\/p>\n

Einbindung von HTML5 Video in TYPO3<\/h2>\n

Kommen wir zu Redakteurs-Arbeit in TYPO3. Wie macht man diese Einbindung nun in TYPO3 7.6? Mit folgender Beschreibung \ud83d\ude09<\/p>\n

    \n
  1. Ihr legt ein Inhaltselement auf der Seite eurer Wahl an vom Typ „Text & Media“.<\/li>\n<\/ol>\n

    \"\"<\/a><\/p>\n

     <\/p>\n

      \n
    1. Danach k\u00f6nnt ihr den Reiter Media ausw\u00e4hlen und hier den Knopf „Add media file“ ausw\u00e4hlen.\"Eine<\/a><\/li>\n
    2. In dem danach erscheinenden Popup Fenster w\u00e4hlt ihr den Ordner\u00a0aus, indem eure Videos liegen sollen.<\/li>\n
    3. Danach scrollt ihr\u00a0in den Abschnitt\u00a0\u201cUpload files\u201d und klickt dort auf\u00a0\u201cDateien ausw\u00e4hlen\u201d und markiert die MP4, OGG or WEBM Datei\u00a0von eurem\u00a0Computer.<\/li>\n
    4. Nach diesem Schritt m\u00fcsst ihr nur noch auf den Knopf\u00a0\u201cUpload files\u201d klicken und das Popup Fenster sollte danach schlie\u00dfen. Wenn ihr wollt, dann k\u00f6nnt ihr in dem danach erscheinenden Fenster, noch
      \n      \"Metadaten<\/a><\/li>\n
    5. Da ihr ja in dem Inhaltselement eine \u00c4nderung vorgenommen\u00a0habt, m\u00fcsst ihr diese \u00c4nderung noch abspeichern. Und schon: Fertig!<\/li>\n<\/ol>\n

       <\/p>\n","protected":false},"excerpt":{"rendered":"

      Wer sein HTML5 Video lieber selber hosten m\u00f6chte und nicht auf Plattformen wie YouTube oder Vimeo ver\u00f6ffentlichen m\u00f6chte, der bekommt mit den TYPO3 7.6 Boardmitteln bereits M\u00f6glichkeiten ein Video schnell und einfach als Inhaltselement einzubinden.<\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":""},"categories":[1,4],"tags":[],"yoast_head":"\nBinde ein HTML5 Video in TYPO3 schnell ein - melon|media Blog<\/title>\n<meta name=\"description\" content=\"Wir beschreiben, wie ihr ein Video als HTML5 Video in TYPO3 7.6 als Redakteur einbindet. Ebenso erfahrt ihr die aktuellen Voraussetzungen daf\u00fcr.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.melon-media.de\/blog\/html5-video-in-typo3-einbinden\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Binde ein HTML5 Video in TYPO3 schnell ein - melon|media Blog\" \/>\n<meta property=\"og:description\" content=\"Wir beschreiben, wie ihr ein Video als HTML5 Video in TYPO3 7.6 als Redakteur einbindet. Ebenso erfahrt ihr die aktuellen Voraussetzungen daf\u00fcr.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.melon-media.de\/blog\/html5-video-in-typo3-einbinden\/\" \/>\n<meta property=\"og:site_name\" content=\"melon|media Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/melonmedia\" \/>\n<meta property=\"article:published_time\" content=\"2017-05-18T08:04:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-04-08T06:24:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.melon-media.de\/blog\/wp-content\/uploads\/2017\/05\/create_content_element_for_video-300x234.png\" \/>\n<meta name=\"twitter:card\" content=\"summary\" \/>\n<meta name=\"twitter:creator\" content=\"@melonmedia\" \/>\n<meta name=\"twitter:site\" content=\"@melonmedia\" \/>\n<meta name=\"twitter:label1\" content=\"Gesch\u00e4tzte Lesezeit\">\n\t<meta name=\"twitter:data1\" content=\"2\u00a0Minuten\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.melon-media.de\/blog\/#organization\",\"name\":\"melon|media\",\"url\":\"https:\/\/www.melon-media.de\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/melonmedia\",\"https:\/\/twitter.com\/melonmedia\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.melon-media.de\/blog\/#logo\",\"inLanguage\":\"de\",\"url\":\"https:\/\/www.melon-media.de\/blog\/wp-content\/uploads\/2016\/01\/2L0JROF6.png\",\"width\":250,\"height\":250,\"caption\":\"melon|media\"},\"image\":{\"@id\":\"https:\/\/www.melon-media.de\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.melon-media.de\/blog\/#website\",\"url\":\"https:\/\/www.melon-media.de\/blog\/\",\"name\":\"melon|media Blog\",\"description\":\"TYPO3 und Online-Marketing aus Hamburg\",\"publisher\":{\"@id\":\"https:\/\/www.melon-media.de\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.melon-media.de\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.melon-media.de\/blog\/html5-video-in-typo3-einbinden\/#primaryimage\",\"inLanguage\":\"de\",\"url\":\"https:\/\/www.melon-media.de\/blog\/wp-content\/uploads\/2017\/05\/create_content_element_for_video.png\",\"width\":567,\"height\":443},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.melon-media.de\/blog\/html5-video-in-typo3-einbinden\/#webpage\",\"url\":\"https:\/\/www.melon-media.de\/blog\/html5-video-in-typo3-einbinden\/\",\"name\":\"Binde ein HTML5 Video in TYPO3 schnell ein - melon|media Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.melon-media.de\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.melon-media.de\/blog\/html5-video-in-typo3-einbinden\/#primaryimage\"},\"datePublished\":\"2017-05-18T08:04:52+00:00\",\"dateModified\":\"2020-04-08T06:24:10+00:00\",\"description\":\"Wir beschreiben, wie ihr ein Video als HTML5 Video in TYPO3 7.6 als Redakteur einbindet. Ebenso erfahrt ihr die aktuellen Voraussetzungen daf\\u00fcr.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.melon-media.de\/blog\/html5-video-in-typo3-einbinden\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.melon-media.de\/blog\/html5-video-in-typo3-einbinden\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.melon-media.de\/blog\/html5-video-in-typo3-einbinden\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.melon-media.de\/blog\/\",\"url\":\"https:\/\/www.melon-media.de\/blog\/\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"position\":2,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.melon-media.de\/blog\/html5-video-in-typo3-einbinden\/\",\"url\":\"https:\/\/www.melon-media.de\/blog\/html5-video-in-typo3-einbinden\/\",\"name\":\"Binde ein HTML5 Video in TYPO3 schnell ein\"}}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.melon-media.de\/blog\/html5-video-in-typo3-einbinden\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.melon-media.de\/blog\/html5-video-in-typo3-einbinden\/#webpage\"},\"author\":{\"@id\":\"https:\/\/www.melon-media.de\/blog\/#\/schema\/person\/abee9501380d2bc6bc77326084b2f983\"},\"headline\":\"Binde ein HTML5 Video in TYPO3 schnell ein\",\"datePublished\":\"2017-05-18T08:04:52+00:00\",\"dateModified\":\"2020-04-08T06:24:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.melon-media.de\/blog\/html5-video-in-typo3-einbinden\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.melon-media.de\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.melon-media.de\/blog\/html5-video-in-typo3-einbinden\/#primaryimage\"},\"articleSection\":\"TYPO3\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.melon-media.de\/blog\/html5-video-in-typo3-einbinden\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.melon-media.de\/blog\/#\/schema\/person\/abee9501380d2bc6bc77326084b2f983\",\"name\":\"melonmedia Team\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.melon-media.de\/blog\/#personlogo\",\"inLanguage\":\"de\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/330a87875b87208793e5210dd17cff4d?s=96&d=mm&r=g\",\"caption\":\"melonmedia Team\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/www.melon-media.de\/blog\/wp-json\/wp\/v2\/posts\/1055"}],"collection":[{"href":"https:\/\/www.melon-media.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.melon-media.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.melon-media.de\/blog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.melon-media.de\/blog\/wp-json\/wp\/v2\/comments?post=1055"}],"version-history":[{"count":4,"href":"https:\/\/www.melon-media.de\/blog\/wp-json\/wp\/v2\/posts\/1055\/revisions"}],"predecessor-version":[{"id":1578,"href":"https:\/\/www.melon-media.de\/blog\/wp-json\/wp\/v2\/posts\/1055\/revisions\/1578"}],"wp:attachment":[{"href":"https:\/\/www.melon-media.de\/blog\/wp-json\/wp\/v2\/media?parent=1055"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.melon-media.de\/blog\/wp-json\/wp\/v2\/categories?post=1055"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.melon-media.de\/blog\/wp-json\/wp\/v2\/tags?post=1055"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}