{"id":2905,"date":"2024-07-08T15:21:56","date_gmt":"2024-07-08T15:21:56","guid":{"rendered":"http:\/\/landing.anderskisling.dk\/?page_id=2905"},"modified":"2024-07-31T11:08:44","modified_gmt":"2024-07-31T11:08:44","slug":"wavevideo","status":"publish","type":"page","link":"https:\/\/landing.anderskisling.dk\/index.php\/wavevideo\/","title":{"rendered":"Wavevideo"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2905\" class=\"elementor elementor-2905\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e2ff7c8 e-con-full e-flex e-con e-parent\" data-id=\"e2ff7c8\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c41dd06 elementor-widget elementor-widget-html\" data-id=\"c41dd06\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n  .custom-video-player-ak2024 {\n    width: 100%;\n    position: relative;\n  }\n  .custom-video-player-ak2024 .video-container {\n    width: 100%;\n    padding-bottom: 56.25%; \/* 16:9 aspect ratio *\/\n    position: relative;\n    background-color: #000;\n  }\n  .custom-video-player-ak2024 .video {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n  .custom-video-player-ak2024 .progress-bar {\n    width: 100%;\n    height: 10px;\n    margin-top: 10px;\n    background-color: #ddd;\n    position: relative;\n    cursor: pointer;\n  }\n  .custom-video-player-ak2024 .progress {\n    height: 100%;\n    background-color: #4CAF50;\n    width: 0;\n  }\n  .custom-video-player-ak2024 .buffer {\n    height: 100%;\n    background-color: #8BC34A;\n    width: 0;\n    position: absolute;\n    top: 0;\n  }\n  .custom-video-player-ak2024 .progress-handle {\n    width: 20px;\n    height: 20px;\n    background-color: #4CAF50;\n    border-radius: 50%;\n    position: absolute;\n    top: 50%;\n    transform: translate(-50%, -50%);\n    cursor: pointer;\n  }\n  .custom-video-player-ak2024 .time-code {\n    text-align: center;\n    font-size: 12px;\n    margin-top: 5px;\n  }\n  .custom-video-player-ak2024 .loading-indicator {\n    text-align: center;\n    font-size: 12px;\n    margin-top: 5px;\n    color: #3498db;\n  }\n  .custom-video-player-ak2024 .custom-controls {\n    display: flex;\n    justify-content: center;\n    margin-top: 10px;\n  }\n  .custom-video-player-ak2024 .custom-controls button {\n    margin: 0 5px;\n    padding: 5px 10px;\n    background-color: #4CAF50;\n    color: white;\n    border: none;\n    cursor: pointer;\n  }\n<\/style>\n\n<div id=\"custom-video-player-ak2024\" class=\"custom-video-player-ak2024\">\n  <div class=\"video-container\">\n    <video id=\"videoA-ak2024\" class=\"video\" loop>\n      <source src=\"http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/07\/teststrip.mp4\" type=\"video\/mp4\">\n    <\/video>\n    <video id=\"videoB-ak2024\" class=\"video\" style=\"display: none;\" loop>\n      <source src=\"http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/07\/video-b.mp4\" type=\"video\/mp4\">\n    <\/video>\n    <video id=\"videoC-ak2024\" class=\"video\" style=\"display: none;\" loop>\n      <source src=\"http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/07\/video-c.mp4\" type=\"video\/mp4\">\n    <\/video>\n    <video id=\"videoD-ak2024\" class=\"video\" style=\"display: none;\" loop>\n      <source src=\"http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/07\/video-d.mp4\" type=\"video\/mp4\">\n    <\/video>\n  <\/div>\n  <div class=\"progress-bar\">\n    <div class=\"buffer\"><\/div>\n    <div class=\"progress\"><\/div>\n    <div class=\"progress-handle\"><\/div>\n  <\/div>\n  <div id=\"timeCode-ak2024\" class=\"time-code\">00:00.000<\/div>\n  <div id=\"loadingIndicator-ak2024\" class=\"loading-indicator\"><\/div>\n  <div class=\"custom-controls\">\n    <button id=\"playPauseBtn-ak2024\">Afspil\/Pause<\/button>\n    <button id=\"rewindBtn-ak2024\">Spol tilbage 3s<\/button>\n    <button id=\"forwardBtn-ak2024\">Spol frem 3s<\/button>\n    <button id=\"loopBtn-ak2024\">Loop Til\/Fra<\/button>\n    <button id=\"switchVideoA-ak2024\">A<\/button>\n    <button id=\"switchVideoB-ak2024\">B<\/button>\n    <button id=\"switchVideoC-ak2024\">C<\/button>\n    <button id=\"switchVideoD-ak2024\">D<\/button>\n  <\/div>\n<\/div>\n\n<script>\n(function() {\n  const playerContainer = document.getElementById('custom-video-player-ak2024');\n  const videoA = playerContainer.querySelector('#videoA-ak2024');\n  const videoB = playerContainer.querySelector('#videoB-ak2024');\n  const videoC = playerContainer.querySelector('#videoC-ak2024');\n  const videoD = playerContainer.querySelector('#videoD-ak2024');\n  const playPauseBtn = playerContainer.querySelector('#playPauseBtn-ak2024');\n  const rewindBtn = playerContainer.querySelector('#rewindBtn-ak2024');\n  const forwardBtn = playerContainer.querySelector('#forwardBtn-ak2024');\n  const loopBtn = playerContainer.querySelector('#loopBtn-ak2024');\n  const switchVideoABtn = playerContainer.querySelector('#switchVideoA-ak2024');\n  const switchVideoBBtn = playerContainer.querySelector('#switchVideoB-ak2024');\n  const switchVideoCBtn = playerContainer.querySelector('#switchVideoC-ak2024');\n  const switchVideoDBtn = playerContainer.querySelector('#switchVideoD-ak2024');\n  const progressBar = playerContainer.querySelector('.progress-bar');\n  const progress = playerContainer.querySelector('.progress');\n  const progressHandle = playerContainer.querySelector('.progress-handle');\n  const bufferBar = playerContainer.querySelector('.buffer');\n  const timeCode = playerContainer.querySelector('#timeCode-ak2024');\n  const loadingIndicator = playerContainer.querySelector('#loadingIndicator-ak2024');\n\n  const videos = [videoA, videoB, videoC, videoD];\n  let currentVideoIndex = 0;\n\n  function switchToVideo(index) {\n    loadingIndicator.textContent = 'Loading 0%';\n    const wasPlaying = !videos[currentVideoIndex].paused;\n    const currentTime = videos[currentVideoIndex].currentTime;\n\n    videos.forEach((video, idx) => {\n      if (idx === index) {\n        video.style.display = 'block';\n        video.muted = false;\n      } else {\n        video.style.display = 'none';\n        video.muted = true;\n      }\n      video.currentTime = currentTime;\n    });\n\n    currentVideoIndex = index;\n\n    if (wasPlaying) {\n      videos[currentVideoIndex].play().then(() => {\n        loadingIndicator.textContent = '';\n      }).catch(error => {\n        console.error('Error playing video:', error);\n        loadingIndicator.textContent = '';\n      });\n    } else {\n      loadingIndicator.textContent = '';\n    }\n  }\n\n  function syncVideos() {\n    const currentTime = videos[currentVideoIndex].currentTime;\n    const playbackRate = videos[currentVideoIndex].playbackRate;\n    const loop = videos[currentVideoIndex].loop;\n\n    videos.forEach((video, index) => {\n      if (index !== currentVideoIndex) {\n        video.currentTime = currentTime;\n        video.playbackRate = playbackRate;\n        video.loop = loop;\n      }\n    });\n  }\n\n  function updateProgressAndTime() {\n    const currentVideo = videos[currentVideoIndex];\n    const progressPercent = (currentVideo.currentTime \/ currentVideo.duration) * 100;\n    progress.style.width = `${progressPercent}%`;\n    progressHandle.style.left = `${progressPercent}%`;\n\n    const totalSeconds = Math.floor(currentVideo.currentTime);\n    const minutes = Math.floor(totalSeconds \/ 60);\n    const seconds = totalSeconds % 60;\n    const milliseconds = Math.floor((currentVideo.currentTime % 1) * 1000);\n\n    timeCode.textContent = \n      `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}.${milliseconds.toString().padStart(3, '0')}`;\n\n    \/\/ Update buffer bar\n    if (currentVideo.buffered.length > 0) {\n      const bufferedEnd = currentVideo.buffered.end(currentVideo.buffered.length - 1);\n      const duration = currentVideo.duration;\n      const bufferedPercent = (bufferedEnd \/ duration) * 100;\n      bufferBar.style.width = `${bufferedPercent}%`;\n    }\n  }\n\n  function updateLoadingIndicator(video) {\n    if (video.buffered.length > 0) {\n      const lastBufferedRange = video.buffered.length - 1;\n      const duration = video.duration;\n      let percentLoaded = 0;\n\n      if (duration > 0) {\n        percentLoaded = (video.buffered.end(lastBufferedRange) \/ duration) * 100;\n      }\n\n      \/\/ Ensure the percentage is between 0 and 100\n      percentLoaded = Math.min(Math.max(percentLoaded, 0), 100);\n\n      \/\/ Round to two decimal places\n      percentLoaded = Math.round(percentLoaded * 100) \/ 100;\n\n      loadingIndicator.textContent = `Loading ${percentLoaded.toFixed(2)}%`;\n\n      if (percentLoaded >= 100) {\n        loadingIndicator.textContent = '';\n      }\n    }\n  }\n\n  function seekVideo(e) {\n    const rect = progressBar.getBoundingClientRect();\n    const pos = (e.clientX - rect.left) \/ rect.width;\n    videos[currentVideoIndex].currentTime = pos * videos[currentVideoIndex].duration;\n    syncVideos();\n  }\n\n  playPauseBtn.addEventListener('click', function() {\n    if (videos[currentVideoIndex].paused) {\n      videos[currentVideoIndex].play();\n    } else {\n      videos[currentVideoIndex].pause();\n    }\n  });\n\n  rewindBtn.addEventListener('click', function() {\n    videos[currentVideoIndex].currentTime = Math.max(videos[currentVideoIndex].currentTime - 3, 0);\n    syncVideos();\n  });\n\n  forwardBtn.addEventListener('click', function() {\n    videos[currentVideoIndex].currentTime = Math.min(videos[currentVideoIndex].currentTime + 3, videos[currentVideoIndex].duration);\n    syncVideos();\n  });\n\n  loopBtn.addEventListener('click', function() {\n    const newLoopState = !videos[currentVideoIndex].loop;\n    videos.forEach(video => video.loop = newLoopState);\n    this.textContent = newLoopState ? 'Loop Fra' : 'Loop Til';\n  });\n\n  switchVideoABtn.addEventListener('click', () => switchToVideo(0));\n  switchVideoBBtn.addEventListener('click', () => switchToVideo(1));\n  switchVideoCBtn.addEventListener('click', () => switchToVideo(2));\n  switchVideoDBtn.addEventListener('click', () => switchToVideo(3));\n\n  progressBar.addEventListener('click', seekVideo);\n\n  progressHandle.addEventListener('mousedown', function(e) {\n    e.preventDefault();\n    document.addEventListener('mousemove', seekVideo);\n    document.addEventListener('mouseup', function() {\n      document.removeEventListener('mousemove', seekVideo);\n    }, { once: true });\n  });\n\n  videos.forEach(video => {\n    video.addEventListener('timeupdate', updateProgressAndTime);\n    video.addEventListener('progress', () => updateLoadingIndicator(video));\n    video.addEventListener('waiting', () => {\n      loadingIndicator.textContent = 'Loading...';\n    });\n    video.addEventListener('canplay', () => {\n      updateLoadingIndicator(video);\n    });\n  });\n\n  \/\/ Start playing the first video\n  videos[currentVideoIndex].play().catch(error => {\n    console.error('Error playing initial video:', error);\n  });\n\n  \/\/ Synchronize videos periodically\n  setInterval(syncVideos, 1000);\n})();\n<\/script>\t\t\t\t<\/div>\n\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>00:00.000 Afspil\/Pause Spol tilbage 3s Spol frem 3s Loop Til\/Fra A B C D<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"_kad_post_transparent":"","_kad_post_title":"hide","_kad_post_layout":"fullwidth","_kad_post_sidebar_id":"","_kad_post_content_style":"unboxed","_kad_post_vertical_padding":"hide","_kad_post_feature":"hide","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"class_list":["post-2905","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/2905","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/comments?post=2905"}],"version-history":[{"count":15,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/2905\/revisions"}],"predecessor-version":[{"id":4392,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/2905\/revisions\/4392"}],"wp:attachment":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/media?parent=2905"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}