{"id":798,"date":"2025-04-12T18:04:17","date_gmt":"2025-04-12T18:04:17","guid":{"rendered":"https:\/\/awrpc.info\/?page_id=798"},"modified":"2025-04-12T18:05:22","modified_gmt":"2025-04-12T18:05:22","slug":"interactive-video-test","status":"publish","type":"page","link":"https:\/\/awrpc.info\/index.php\/interactive-video-test\/","title":{"rendered":"Interactive Video test"},"content":{"rendered":"

[et_pb_section fb_built=”1″ theme_builder_area=”post_content” _builder_version=”4.27.4″ _module_preset=”default”][et_pb_row _builder_version=”4.27.4″ _module_preset=”default” theme_builder_area=”post_content”][et_pb_column _builder_version=”4.27.4″ _module_preset=”default” type=”4_4″ theme_builder_area=”post_content”][et_pb_code _builder_version=”4.27.4″ _module_preset=”default” theme_builder_area=”post_content” hover_enabled=”0″ sticky_enabled=”0″] Interactive Video Player with Bunny Stream<\/title><!-- [et_pb_line_break_holder] --> <\/p>\n<style><!-- [et_pb_line_break_holder] --> \/* Style for video container and quiz overlay *\/<!-- [et_pb_line_break_holder] --> #video-container {<!-- [et_pb_line_break_holder] --> position: relative;<!-- [et_pb_line_break_holder] --> width: 640px;<!-- [et_pb_line_break_holder] --> margin: auto;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> #quiz-overlay {<!-- [et_pb_line_break_holder] --> position: absolute;<!-- [et_pb_line_break_holder] --> top: 20%;<!-- [et_pb_line_break_holder] --> left: 20%;<!-- [et_pb_line_break_holder] --> width: 60%;<!-- [et_pb_line_break_holder] --> background-color: rgba(0,0,0,0.7);<!-- [et_pb_line_break_holder] --> color: #fff;<!-- [et_pb_line_break_holder] --> padding: 20px;<!-- [et_pb_line_break_holder] --> display: none;<!-- [et_pb_line_break_holder] --> border-radius: 8px;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> .quiz-option {<!-- [et_pb_line_break_holder] --> background: #007BFF;<!-- [et_pb_line_break_holder] --> border: none;<!-- [et_pb_line_break_holder] --> padding: 10px 15px;<!-- [et_pb_line_break_holder] --> margin: 5px;<!-- [et_pb_line_break_holder] --> cursor: pointer;<!-- [et_pb_line_break_holder] --> border-radius: 4px;<!-- [et_pb_line_break_holder] --> color: #fff;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> <\/style>\n<p><!-- [et_pb_line_break_holder] --><\/head><!-- [et_pb_line_break_holder] --><body><!-- [et_pb_line_break_holder] --> <\/p>\n<div id=\"video-container\"><!-- [et_pb_line_break_holder] --> <video id=\"video-player\" width=\"640\" controls><!-- [et_pb_line_break_holder] --> <iframe src=\"https:\/\/iframe.mediadelivery.net\/embed\/161018\/ab363fdc-900d-4b19-a0a6-31f48669937a?autoplay=false&loop=false&muted=false&preload=true&responsive=false\" loading=\"lazy\" style=\"border:0;position:absolute;top:0;height:100%;width:100%;\" allow=\"accelerometer;gyroscope;autoplay;encrypted-media;picture-in-picture;\" allowfullscreen=\"true\"><\/iframe><!-- [et_pb_line_break_holder] --><source src=\"https:\/\/your-streaming-zone.b-cdn.net\/your_video_file.mp4\" type=\"video\/mp4\"><!-- [et_pb_line_break_holder] --> Your browser does not support the video tag.<!-- [et_pb_line_break_holder] --><\/video><!-- [et_pb_line_break_holder] --> <\/p>\n<div id=\"quiz-overlay\"><!-- [et_pb_line_break_holder] --> <pee>What is 2 + 2?<\/pee><!-- [et_pb_line_break_holder] --> <button class=\"quiz-option\" data-answer=\"4\">4<\/button><!-- [et_pb_line_break_holder] --> <button class=\"quiz-option\" data-answer=\"3\">3<\/button><!-- [et_pb_line_break_holder] --> <button class=\"quiz-option\" data-answer=\"5\">5<\/button><!-- [et_pb_line_break_holder] --> <\/div>\n<p><!-- [et_pb_line_break_holder] --> <\/div>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> <script><!-- [et_pb_line_break_holder] --> const video = document.getElementById(\"video-player\");<!-- [et_pb_line_break_holder] --> const quizOverlay = document.getElementById(\"quiz-overlay\");<!-- [et_pb_line_break_holder] --> const quizOptions = document.querySelectorAll(\".quiz-option\");<!-- [et_pb_line_break_holder] --> const quizStartTime = 10; \/\/ Time (in seconds) to show quiz<!-- [et_pb_line_break_holder] --> const quizEndTime = 15; \/\/ Time to hide quiz<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> \/\/ Check video time and display quiz overlay when needed<!-- [et_pb_line_break_holder] --> video.addEventListener(\"timeupdate\", () => {<!-- [et_pb_line_break_holder] --> if (video.currentTime >= quizStartTime && video.currentTime <= quizEndTime) {<!-- [et_pb_line_break_holder] --> quizOverlay.style.display = \"block\";<!-- [et_pb_line_break_holder] --> video.pause(); \/\/ Pause the video for focused quiz interaction<!-- [et_pb_line_break_holder] --> } else {<!-- [et_pb_line_break_holder] --> quizOverlay.style.display = \"none\";<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> \/\/ Handle quiz answer selection<!-- [et_pb_line_break_holder] --> quizOptions.forEach(button => {<!-- [et_pb_line_break_holder] --> button.addEventListener(\"click\", function() {<!-- [et_pb_line_break_holder] --> const answer = this.getAttribute(\"data-answer\");<!-- [et_pb_line_break_holder] --> const timestamp = video.currentTime;<!-- [et_pb_line_break_holder] --> const payload = {<!-- [et_pb_line_break_holder] --> event: \"quiz_answer\",<!-- [et_pb_line_break_holder] --> answer: answer,<!-- [et_pb_line_break_holder] --> timestamp: timestamp<!-- [et_pb_line_break_holder] --> };<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> \/\/ Replace with your Zapier or Make webhook URL<!-- [et_pb_line_break_holder] --> const webhookURL = \"https:\/\/hooks.zapier.com\/hooks\/catch\/XXXX\/YYYY\";<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> \/\/ Send interaction data to webhook endpoint<!-- [et_pb_line_break_holder] --> fetch(webhookURL, {<!-- [et_pb_line_break_holder] --> method: \"POST\",<!-- [et_pb_line_break_holder] --> headers: { \"Content-Type\": \"application\/json\" },<!-- [et_pb_line_break_holder] --> body: JSON.stringify(payload)<!-- [et_pb_line_break_holder] --> })<!-- [et_pb_line_break_holder] --> .then(response => response.json())<!-- [et_pb_line_break_holder] --> .then(data => console.log(\"Webhook Success:\", data))<!-- [et_pb_line_break_holder] --> .catch(error => console.error(\"Webhook Error:\", error));<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> \/\/ Resume video playback after the quiz interaction<!-- [et_pb_line_break_holder] --> quizOverlay.style.display = \"none\";<!-- [et_pb_line_break_holder] --> video.play();<!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --> <\/script><!-- [et_pb_line_break_holder] --><\/body><!-- [et_pb_line_break_holder] --><\/html><!-- [et_pb_line_break_holder] -->[\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-798","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/awrpc.info\/index.php\/wp-json\/wp\/v2\/pages\/798","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/awrpc.info\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/awrpc.info\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/awrpc.info\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/awrpc.info\/index.php\/wp-json\/wp\/v2\/comments?post=798"}],"version-history":[{"count":3,"href":"https:\/\/awrpc.info\/index.php\/wp-json\/wp\/v2\/pages\/798\/revisions"}],"predecessor-version":[{"id":801,"href":"https:\/\/awrpc.info\/index.php\/wp-json\/wp\/v2\/pages\/798\/revisions\/801"}],"wp:attachment":[{"href":"https:\/\/awrpc.info\/index.php\/wp-json\/wp\/v2\/media?parent=798"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}