{"id":6817,"date":"2024-05-13T13:50:36","date_gmt":"2024-05-13T11:50:36","guid":{"rendered":"https:\/\/helpdesk.kontainer.com\/article\/video-streaming-guide\/"},"modified":"2026-01-28T10:03:57","modified_gmt":"2026-01-28T09:03:57","slug":"video-streaming-guide","status":"publish","type":"article","link":"https:\/\/helpdesk.kontainer.com\/de\/article\/video-streaming-guide\/","title":{"rendered":"Video Streaming Guide"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full\" src=\"https:\/\/helpdesk.kontainer.com\/wp-content\/uploads\/2024\/05\/Kontainer-streaming_video.gif\" alt=\"Video streaming on website from Kontainer\" width=\"800\" height=\"389\" \/><\/p>\n<p><span style=\"color: #bfa27b;\"><strong>Enterprise- or Add-on Feature<\/strong><\/span><\/p>\n<p>Stream videos straight from Kontainer to websites and webshops. Find out more and get started today. <a href=\"http:\/\/calendly.com\/kontainer_\/support\">Book\u00a0a meeting with customer success<\/a>.<\/p>\n<p>Once the video streaming tool is activated, you are good to go. Follow the simple steps below to get a custom embed link or set up a video format template.<\/p>\n<hr \/>\n<p>&nbsp;<\/p>\n<h2>Activate Video CDN<\/h2>\n<p>Find your video file and open it in gallery mode. Make sure the info bar on the right side of the image is open, or open it by clicking on the &#8222;i&#8220; icon in the top menu bar.<\/p>\n<p>At the bottom of the info menu, you&#8217;ll find the option to activate <strong>Video CDN<\/strong>.<\/p>\n<p>Once you have ticked the <strong>Activate<\/strong> box, Kontainer will start converting the video file to be available in different sizes. This can take a few minutes, so feel free to get on with other tasks and refresh the window to check when the conversion is complete.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full\" src=\"https:\/\/helpdesk.kontainer.com\/wp-content\/uploads\/2024\/05\/Kontainer-video-streaming_Activate-CDN.png\" alt=\"Activate video CDN for Kontainer video streaming\" width=\"800\" height=\"389\" \/><\/p>\n<p>&nbsp;<\/p>\n<h2>Embed settings<\/h2>\n<p>When the conversion is complete, you&#8217;ll get a URL you can copy and an <strong>Embed settings<\/strong> option to customize your IFRAME or HTML embed link.<\/p>\n<p>Options include:<\/p>\n<ul>\n<li>Autoplay<\/li>\n<li>Looped video<\/li>\n<li>Muted sound<\/li>\n<li>Hiding controls<\/li>\n<li>Sizes<\/li>\n<li>Enable download (needs to be activated before you open the <strong>Embed settings<\/strong>)<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full\" src=\"https:\/\/helpdesk.kontainer.com\/wp-content\/uploads\/2024\/05\/Kontainer-video-streaming_Embed-settings.png\" alt=\"Embed settings for Kontainer video streaming\" width=\"800\" height=\"389\" \/><\/p>\n<p>To make this quicker and easier for colleagues and external users, you can set up presets.<\/p>\n<p>&nbsp;<\/p>\n<h2>Presets<\/h2>\n<p>Under <strong>Resources<\/strong> and <strong>Video presets<\/strong>, you can set up your own quick selection formats with the same options as the Embed settings.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full\" src=\"https:\/\/helpdesk.kontainer.com\/wp-content\/uploads\/2024\/05\/Kontainer-video-streaming_Presets.png\" alt=\"Preset settings for Kontainer video streaming\" width=\"800\" height=\"389\" \/><\/p>\n<p>&nbsp;<\/p>\n<h2>Copy IFRAME or HTML link<\/h2>\n<p>When you&#8217;re happy with your settings, you simply copy the IFRAME or HTML link and paste it into your website.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full\" src=\"https:\/\/helpdesk.kontainer.com\/wp-content\/uploads\/2024\/05\/Kontainer-video-streaming_Copy-link.png\" alt=\"Copy final link within the Embed settings of Kontainer video streaming tool\" width=\"800\" height=\"389\" \/><br \/>\nIt&#8217;s as easy as that.<\/p>\n<p>Let us know how you get on and if you have any questions. <a href=\"mailto:support@kontainer.com\">Click here to email Customer Success<\/a>.<\/p>\n<h2><\/h2>\n<hr \/>\n<h2>Supported file types<\/h2>\n<p>The following file types are supported in our Video Streaming Tool:<\/p>\n<p style=\"font-weight: 400;\">&#8218;3gp&#8216;,<br \/>\n&#8218;asf&#8216;,<br \/>\n&#8218;avi&#8216;,<br \/>\n&#8218;avs&#8216;,<br \/>\n&#8218;dv&#8216;,<br \/>\n&#8218;dvd&#8216;,<br \/>\n&#8218;f4v&#8216;,<br \/>\n&#8218;flic&#8216;,<br \/>\n&#8218;flv&#8216;,<br \/>\n&#8218;hevc&#8216;,<br \/>\n&#8218;m1v&#8216;,<br \/>\n&#8218;m2ts&#8216;,<br \/>\n&#8218;m2v&#8216;,<br \/>\n&#8218;m4v&#8216;,<br \/>\n&#8218;m4p&#8216;,<br \/>\n&#8218;mjpeg&#8216;,<br \/>\n&#8218;mkv&#8216;,<br \/>\n&#8218;mov&#8216;,<br \/>\n&#8218;mp2&#8216;,<br \/>\n&#8218;mp4&#8216;,<br \/>\n&#8218;mp4v&#8216;,<br \/>\n&#8218;mpeg&#8216;,<br \/>\n&#8218;mpg&#8216;,<br \/>\n&#8218;mpe&#8216;,<br \/>\n&#8218;mpv&#8216;,<br \/>\n&#8218;mts&#8216;,<br \/>\n&#8218;mxf&#8216;,<br \/>\n&#8218;ogv&#8216;,<br \/>\n&#8218;psp&#8216;,<br \/>\n&#8218;rm&#8216;,<br \/>\n&#8217;swf&#8216;,<br \/>\n&#8218;ts&#8216;,<br \/>\n&#8218;vcd&#8216;,<br \/>\n&#8218;vob&#8216;,<br \/>\n&#8218;webm&#8216;,<br \/>\n&#8218;wmv&#8216;,<br \/>\n&#8218;wtv&#8216;,<\/p>\n<hr \/>\n<p>&nbsp;<\/p>\n<h2>Available Video Player Controls<\/h2>\n<p data-start=\"349\" data-end=\"594\">Developers can control the video player programmatically by sending it messages via postMessage. The player can receive these messages and perform actions like play, pause, change volume, or go fullscreen \u2014 all without the user needing to click on the player itself.<\/p>\n<p data-start=\"596\" data-end=\"815\">This works even if the video is embedded in another page or inside an iframe.<\/p>\n<p data-start=\"684\" data-end=\"747\">Below, you can find a list of available controls for the Video Player:<\/p>\n<h3 data-start=\"158\" data-end=\"182\">Playback Controls<\/h3>\n<ul data-start=\"183\" data-end=\"280\">\n<li data-start=\"183\" data-end=\"214\">\n<p data-start=\"185\" data-end=\"214\"><strong data-start=\"185\" data-end=\"193\">Play<\/strong><br \/>\n<code>window.postMessage({ type: 'kontainer-video-player', action: 'play' });<\/code><\/p>\n<\/li>\n<li data-start=\"183\" data-end=\"214\">\n<p data-start=\"185\" data-end=\"214\"><strong data-start=\"217\" data-end=\"226\">Pause<\/strong><br \/>\n<code>window.postMessage({ type: 'kontainer-video-player', action: 'pause' });<\/code><\/p>\n<\/li>\n<li data-start=\"249\" data-end=\"280\">\n<p data-start=\"251\" data-end=\"280\"><strong data-start=\"251\" data-end=\"259\">Stop<\/strong><br \/>\n<code>window.postMessage({ type: 'kontainer-video-player', action: 'stop' });<\/code><\/p>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h3 data-start=\"282\" data-end=\"303\">Audio Controls<\/h3>\n<ul data-start=\"304\" data-end=\"495\">\n<li data-start=\"304\" data-end=\"335\">\n<p data-start=\"306\" data-end=\"335\"><strong data-start=\"306\" data-end=\"314\">Mute<\/strong><br \/>\n<code>window.postMessage({ type: 'kontainer-video-player', action: 'mute' });<\/code><\/p>\n<\/li>\n<li data-start=\"336\" data-end=\"371\">\n<p data-start=\"338\" data-end=\"371\"><strong data-start=\"338\" data-end=\"348\">Unmute<\/strong><br \/>\n<code>window.postMessage({ type: 'kontainer-video-player', action: 'unmute' });<\/code><\/p>\n<\/li>\n<li data-start=\"372\" data-end=\"416\">\n<p data-start=\"374\" data-end=\"416\"><strong data-start=\"374\" data-end=\"389\">Toggle Mute <\/strong><br \/>\n<code>window.postMessage({ type: 'kontainer-video-player', action: 'toggleMute' });<\/code><\/p>\n<\/li>\n<li data-start=\"417\" data-end=\"495\">\n<p data-start=\"419\" data-end=\"495\"><strong data-start=\"419\" data-end=\"445\">Set Volume (0.0 \u2013 1.0)<\/strong><br \/>\n<code>window.postMessage({ type: 'kontainer-video-player', action: 'setVolume', data: { volume: 0.5 } });<\/code><\/p>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h3 data-start=\"497\" data-end=\"520\">Playback Position<\/h3>\n<ul data-start=\"521\" data-end=\"599\">\n<li data-start=\"521\" data-end=\"599\">\n<p data-start=\"523\" data-end=\"599\"><strong data-start=\"523\" data-end=\"557\">Seek (jump to time in seconds)<br \/>\n<\/strong><code>window.postMessage({ type: 'kontainer-video-player', action: 'seek', data: { time: 60 } });<\/code><\/p>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h3 data-start=\"601\" data-end=\"627\">Fullscreen Controls<\/h3>\n<ul data-start=\"628\" data-end=\"781\">\n<li data-start=\"628\" data-end=\"671\">\n<p data-start=\"630\" data-end=\"671\"><strong data-start=\"630\" data-end=\"644\">Fullscreen<br \/>\n<\/strong><code>window.postMessage({ type: 'kontainer-video-player', action: 'fullscreen' });<\/code><\/p>\n<\/li>\n<li data-start=\"672\" data-end=\"724\">\n<p data-start=\"674\" data-end=\"724\"><strong data-start=\"674\" data-end=\"693\">Exit Fullscreen<\/strong><br \/>\n<code>window.postMessage({ type: 'kontainer-video-player', action: 'exitFullscreen' });<\/code><\/p>\n<\/li>\n<li data-start=\"725\" data-end=\"781\">\n<p data-start=\"727\" data-end=\"781\"><strong data-start=\"727\" data-end=\"748\">Toggle Fullscreen<\/strong><br \/>\n<code>window.postMessage({ type: 'kontainer-video-player', action: 'toggleFullscreen' });<\/code><\/p>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h3 data-start=\"783\" data-end=\"803\">Video Quality<\/h3>\n<ul data-start=\"804\" data-end=\"951\">\n<li data-start=\"804\" data-end=\"951\">\n<p data-start=\"806\" data-end=\"873\"><strong data-start=\"806\" data-end=\"821\">Set Quality<\/strong><br \/>\n<code>window.postMessage({ type: 'kontainer-video-player', action: 'setQuality', data: { quality: 720 } });<\/code><\/p>\n<ul data-start=\"876\" data-end=\"951\">\n<li data-start=\"876\" data-end=\"890\">\n<p data-start=\"878\" data-end=\"890\"><code data-start=\"878\" data-end=\"881\">0<\/code> = Auto<\/p>\n<\/li>\n<li data-start=\"893\" data-end=\"951\">\n<p data-start=\"895\" data-end=\"951\">Or specific resolutions like <code data-start=\"924\" data-end=\"929\">360<\/code>, <code data-start=\"931\" data-end=\"936\">480<\/code>, <code data-start=\"938\" data-end=\"943\">720<\/code>, etc.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h3 data-start=\"953\" data-end=\"987\">Targeting a Specific Player by ID<\/h3>\n<ul data-start=\"988\" data-end=\"1082\">\n<li data-start=\"988\" data-end=\"1082\">\n<p data-start=\"990\" data-end=\"1082\"><strong data-start=\"990\" data-end=\"1035\">Send action to a specific player instance<\/strong><br \/>\n<code>window.postMessage({ type: 'kontainer-video-player', action: 'play', targetPlayerId: 'player_12345' });<\/code><\/p>\n<p>Note: The playerId can be set via URL parameter ?playerId=your_custom_id or will be generated based on video source.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h3 data-start=\"1084\" data-end=\"1107\">Usage in iFrames<\/h3>\n<ul data-start=\"1108\" data-end=\"1177\">\n<li data-start=\"1108\" data-end=\"1177\">\n<p data-start=\"1110\" data-end=\"1177\">Same commands, but post messages to the iframe\u2019s <code data-start=\"1159\" data-end=\"1174\">contentWindow<\/code>.<\/p>\n<p>Example:<br \/>\n<code>const iframe = document.getElementById('your-iframe-id');<\/code><code><\/code><\/p>\n<p><code>iframe.contentWindow.postMessage({ type: 'kontainer-video-player', action: 'play' });<\/code><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Enterprise- or Add-on Feature Stream videos straight from Kontainer to websites and webshops. Find out more and get started today. Book\u00a0a meeting with customer success. Once the video streaming tool is activated, you are good to go. Follow the simple steps below to get a custom embed link or set up a video format template. [&hellip;]<\/p>\n","protected":false},"author":10,"featured_media":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","article-category":[111,110],"article-tag":[117,118,122],"class_list":["post-6817","article","type-article","status-publish","format-standard","hentry","article-category-ausgewaehlte-funktionen","article-category-download-export-freigabe","article-tag-dam","article-tag-add-on-funktion","article-tag-enterprise-feature"],"_links":{"self":[{"href":"https:\/\/helpdesk.kontainer.com\/de\/wp-json\/wp\/v2\/article\/6817","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/helpdesk.kontainer.com\/de\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/helpdesk.kontainer.com\/de\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/helpdesk.kontainer.com\/de\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/helpdesk.kontainer.com\/de\/wp-json\/wp\/v2\/comments?post=6817"}],"version-history":[{"count":1,"href":"https:\/\/helpdesk.kontainer.com\/de\/wp-json\/wp\/v2\/article\/6817\/revisions"}],"predecessor-version":[{"id":6818,"href":"https:\/\/helpdesk.kontainer.com\/de\/wp-json\/wp\/v2\/article\/6817\/revisions\/6818"}],"wp:attachment":[{"href":"https:\/\/helpdesk.kontainer.com\/de\/wp-json\/wp\/v2\/media?parent=6817"}],"wp:term":[{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/helpdesk.kontainer.com\/de\/wp-json\/wp\/v2\/article-category?post=6817"},{"taxonomy":"article-tag","embeddable":true,"href":"https:\/\/helpdesk.kontainer.com\/de\/wp-json\/wp\/v2\/article-tag?post=6817"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}