{"id":137,"date":"2026-06-17T22:33:59","date_gmt":"2026-06-17T20:33:59","guid":{"rendered":"https:\/\/schalte.studio-dome.de\/?page_id=137"},"modified":"2026-06-18T00:03:36","modified_gmt":"2026-06-17T22:03:36","slug":"stream","status":"publish","type":"page","link":"https:\/\/schalte.studio-dome.de\/","title":{"rendered":"stream"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"137\" class=\"elementor elementor-137\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-681f19d e-flex e-con-boxed e-con e-parent\" data-id=\"681f19d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-107be96 elementor-widget elementor-widget-html\" data-id=\"107be96\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"player-wrapper\" id=\"player-wrapper\" style=\"position: relative; width: 100%; aspect-ratio: 16\/9; background: #000; overflow: hidden;\">\r\n  <!-- Poster -->\r\n  <div id=\"stream-poster\" style=\"position: absolute; inset: 0; background: url('https:\/\/pub-e6983a66a13d4c3292e3019165efd565.r2.dev\/Partner_Braunschweig.png') center\/cover no-repeat; z-index: 2; transition: opacity 0.4s;\"><\/div>\r\n  \r\n  <!-- Offline-Hinweis (optional) -->\r\n  <div id=\"offline-label\" style=\"position: absolute; inset: 0; display: none; flex; align-items: center; justify-content: center; z-index: 3; pointer-events: none; opacity: 0; transition: opacity 0.3s;\">\r\n    <span style=\"background: rgba(0,0,0,0.6); color: #fff; padding: 8px 16px; border-radius: 4px; font-family: sans-serif; font-size: 14px;\">Stream offline<\/span>\r\n  <\/div>\r\n\r\n  <video \r\n    id=\"live-stream\"\r\n    style=\"width: 100%; height: 100%; object-fit: cover; display: block;\"\r\n    playsinline\r\n    autoplay\r\n  ><\/video>\r\n\r\n  <!-- Custom Controls -->\r\n  <div id=\"custom-controls\" style=\"position: absolute; bottom: 0; left: 0; right: 0; padding: 12px; background: linear-gradient(transparent, rgba(0,0,0,0.7)); display: flex; align-items: center; gap: 12px; z-index: 4; opacity: 0; transition: opacity 0.3s;\">\r\n    <button id=\"btn-play\" style=\"background: none; border: none; color: #fff; font-size: 18px; cursor: pointer; width: 32px;\">\u25b6<\/button>\r\n    \r\n    <button id=\"btn-mute\" style=\"background: none; border: none; color: #fff; font-size: 16px; cursor: pointer; width: 32px;\">\ud83d\udd0a<\/button>\r\n    \r\n    <input type=\"range\" id=\"volume\" min=\"0\" max=\"1\" step=\"0.05\" value=\"1\" style=\"width: 80px; accent-color: #fff; cursor: pointer;\">\r\n    \r\n    <div style=\"flex: 1;\"><\/div>\r\n    \r\n    <button id=\"btn-fullscreen\" style=\"background: none; border: none; color: #fff; font-size: 16px; cursor: pointer; width: 32px;\">\u26f6<\/button>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/hls.js@latest\"><\/script>\r\n<script>\r\n  const wrapper = document.getElementById('player-wrapper');\r\n  const video = document.getElementById('live-stream');\r\n  const poster = document.getElementById('stream-poster');\r\n  const offlineLabel = document.getElementById('offline-label');\r\n  const controls = document.getElementById('custom-controls');\r\n  const btnPlay = document.getElementById('btn-play');\r\n  const btnMute = document.getElementById('btn-mute');\r\n  const btnFullscreen = document.getElementById('btn-fullscreen');\r\n  const volumeSlider = document.getElementById('volume');\r\n\r\n  const streamUrl = 'https:\/\/videodelivery.net\/2063b6f41f6a3d283df608c2d7f8d548\/manifest\/video.m3u8';\r\n  let hls = null;\r\n  let retryTimer = null;\r\n  let controlsTimeout = null;\r\n\r\n  function showPoster() {\r\n    poster.style.opacity = '1';\r\n    offlineLabel.style.opacity = '1';\r\n  }\r\n\r\n  function hidePoster() {\r\n    poster.style.opacity = '0';\r\n    offlineLabel.style.opacity = '0';\r\n  }\r\n\r\n  function updatePlayButton() {\r\n    btnPlay.textContent = video.paused ? '\u25b6' : '\u23f8';\r\n  }\r\n\r\n  function updateMuteButton() {\r\n    btnMute.textContent = video.muted || video.volume === 0 ? '\ud83d\udd07' : '\ud83d\udd0a';\r\n  }\r\n\r\n  function showControls() {\r\n    controls.style.opacity = '1';\r\n    clearTimeout(controlsTimeout);\r\n    controlsTimeout = setTimeout(() => {\r\n      if (!video.paused) controls.style.opacity = '0';\r\n    }, 3000);\r\n  }\r\n\r\n  function stopStream() {\r\n    if (hls) { hls.destroy(); hls = null; }\r\n    video.removeAttribute('src');\r\n    video.load();\r\n    showPoster();\r\n    updatePlayButton();\r\n  }\r\n\r\n  function startStream() {\r\n    if (hls) return;\r\n    offlineLabel.style.opacity = '0';\r\n\r\n    if (Hls.isSupported()) {\r\n      hls = new Hls({ manifestLoadingMaxRetry: 2, levelLoadingMaxRetry: 2, fragLoadingMaxRetry: 2 });\r\n      hls.loadSource(streamUrl);\r\n      hls.attachMedia(video);\r\n\r\n      video.addEventListener('playing', hidePoster, { once: true });\r\n\r\n      hls.on(Hls.Events.ERROR, (e, data) => {\r\n        if (data.fatal) {\r\n          stopStream();\r\n          retryTimer = setTimeout(startStream, 8000);\r\n        }\r\n      });\r\n\r\n    } else if (video.canPlayType('application\/vnd.apple.mpegurl')) {\r\n      video.src = streamUrl;\r\n      video.addEventListener('playing', hidePoster, { once: true });\r\n    }\r\n\r\n    \/\/ Autoplay mit Ton versuchen\r\n    video.play().catch(() => {\r\n      video.muted = true;\r\n      video.play().catch(() => {});\r\n    });\r\n  }\r\n\r\n  \/\/ Events\r\n  video.addEventListener('playing', () => { updatePlayButton(); showControls(); });\r\n  video.addEventListener('pause', updatePlayButton);\r\n  video.addEventListener('ended', () => { stopStream(); retryTimer = setTimeout(startStream, 8000); });\r\n  video.addEventListener('error', () => { stopStream(); retryTimer = setTimeout(startStream, 8000); });\r\n  video.addEventListener('volumechange', updateMuteButton);\r\n\r\n  wrapper.addEventListener('mousemove', showControls);\r\n  wrapper.addEventListener('mouseleave', () => { if (!video.paused) controls.style.opacity = '0'; });\r\n\r\n  btnPlay.addEventListener('click', () => {\r\n    if (video.paused) video.play(); else video.pause();\r\n  });\r\n\r\n  btnMute.addEventListener('click', () => {\r\n    video.muted = !video.muted;\r\n    if (video.muted) video.volume = 0; else video.volume = volumeSlider.value || 1;\r\n  });\r\n\r\n  volumeSlider.addEventListener('input', (e) => {\r\n    video.volume = e.target.value;\r\n    video.muted = false;\r\n    updateMuteButton();\r\n  });\r\n\r\n  btnFullscreen.addEventListener('click', () => {\r\n    if (document.fullscreenElement) document.exitFullscreen();\r\n    else wrapper.requestFullscreen();\r\n  });\r\n\r\n  \/\/ Start\r\n  startStream();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Stream offline \u25b6 \ud83d\udd0a \u26f6<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ocean_post_layout":"full-screen","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"on","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"off","ocean_display_header":"off","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"on","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"off","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"off","ocean_display_footer_bottom":"off","ocean_custom_footer_template":"","footnotes":""},"class_list":["post-137","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/schalte.studio-dome.de\/index.php?rest_route=\/wp\/v2\/pages\/137","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/schalte.studio-dome.de\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/schalte.studio-dome.de\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/schalte.studio-dome.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/schalte.studio-dome.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=137"}],"version-history":[{"count":73,"href":"https:\/\/schalte.studio-dome.de\/index.php?rest_route=\/wp\/v2\/pages\/137\/revisions"}],"predecessor-version":[{"id":212,"href":"https:\/\/schalte.studio-dome.de\/index.php?rest_route=\/wp\/v2\/pages\/137\/revisions\/212"}],"wp:attachment":[{"href":"https:\/\/schalte.studio-dome.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=137"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}