Hi, I would like to ask for assistance with a question I have with the viewing of videos in Otree.

I want to add the following feature to the slider page where I'm currently embedding a pop-up window to play videos, but I'm not sure how to modify the code.

How can I change my code if I have a lot of different types of films and I let people choose the type of movie they want to watch first, then play the video based on their preference?


{{ block title }}

{{ endblock }}
{{ block content }}
<p>Rounds: {{ round_number }}/{{ C.NUM_ROUNDS }}  Right: {{ player.correct_rounds }}</p>

<table class="table table-striped">
    <tr>
        <th><p>Target1: {{ player.target_value_1 }}</p><input type="range" name="slider1" min="-1" max="100" oninput="updateDescription1(this)" value="-1"  list="values">  <output  id="description1" style="text-align:center ; font-size: 15px"></output></th>
        <th><p>Target2: {{ player.target_value_2 }}</p><input type="range" name="slider2" min="-1" max="100" oninput="updateDescription2(this)" value="-1"  list="values">  <output  id="description2" style="text-align:center ; font-size: 15px"></output></th>
        <th><p>Target3: {{ player.target_value_3 }}</p><input type="range" name="slider3" min="-1" max="100" oninput="updateDescription3(this)" value="-1"  list="values">  <output  id="description3" style="text-align:center ; font-size: 15px"></output></th>
        <th><p>Target4: {{ player.target_value_4 }}</p><input type="range" name="slider4" min="-1" max="100" oninput="updateDescription4(this)" value="-1"  list="values">  <output  id="description4" style="text-align:center ; font-size: 15px"></output></th>
    </tr>
</table>

<datalist id="values">
    <option value="0" label="0">0</option>
    <option value="50" label="50">50</option>
    <option value="100" label="100">100</option>
</datalist>

<!-- Container for draggable video popups -->
<div id="video-container"></div>

<script>
   // Array of video sources
   const videoSources = [
       '{% static 'example/video1.mp4' %}',
       '{% static 'example/video2.mp4' %}',
       '{% static 'example/video3.mp4' %}'
       // Add more video sources as needed
   ];

   // Function to create draggable video popup
   function createVideoPopup(videoSrc) {
       // Create a popup element for the video
       let popup = document.createElement('div');
       popup.className = 'video-popup';
       popup.style.left = `${Math.random() * (window.innerWidth - 300)}px`; // Random initial left position
       popup.style.top = `${Math.random() * (window.innerHeight - 200)}px`; // Random initial top position
       popup.innerHTML = `
           <video controls autoplay loop muted>
               <source src="${videoSrc}" type="video/mp4">
               Your browser does not support the video tag.
           </video>
       `;

       // Make popup draggable
       makeDraggable(popup);

       // Remove the stop button from controls
       popup.querySelector('video').setAttribute('controlsList', 'nodownload');

       // Add popup to video-container
       document.getElementById('video-container').appendChild(popup);
   }

   // Function to make an element draggable
   function makeDraggable(element) {
       let offsetX = 0, offsetY = 0;

       element.addEventListener('mousedown', startDragging);

       function startDragging(event) {
           event.preventDefault();
           offsetX = event.clientX - element.getBoundingClientRect().left;
           offsetY = event.clientY - element.getBoundingClientRect().top;
           document.addEventListener('mousemove', drag);
           document.addEventListener('mouseup', stopDragging);
       }

       function drag(event) {
           let x = event.clientX - offsetX;
           let y = event.clientY - offsetY;
           element.style.left = x + 'px';
           element.style.top = y + 'px';
       }

       function stopDragging() {
           document.removeEventListener('mousemove', drag);
           document.removeEventListener('mouseup', stopDragging);
       }
   }

   // Function to show random video popup
   function showRandomVideoPopup() {
       let randomIndex = Math.floor(Math.random() * videoSources.length);
       createVideoPopup(videoSources[randomIndex]);
   }

   // Call showRandomVideoPopup when the page loads
   window.addEventListener('load', function() {
       showRandomVideoPopup();
   });
</script>

<style>
   /* CSS styles for the video popup */
   .video-popup {
       position: absolute;
       z-index: 1000; /* Ensure it's on top of other content */
       background: rgba(0, 0, 0, 0.8); /* Semi-transparent black background */
       padding: 20px;
       border-radius: 10px;
       box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
       cursor: move; /* Change cursor to indicate draggability */
   }

   .video-popup video {
       width: 20%;
       height: 20%;
   }

   .video-popup video::-webkit-media-controls {
       display: none !important; /* Hide all controls including the stop button */
   }
</style>

<script>
    let description1 = document.getElementById('description1');
    function updateDescription1(input) {
        let slider1 = parseInt(input.value);
        description1.innerText = `${slider1}`
    }
    let description2 = document.getElementById('description2');
    function updateDescription2(input) {
        let slider2 = parseInt(input.value);
        description2.innerText = `${slider2}`
    }
    let description3 = document.getElementById('description3');
    function updateDescription3(input) {
        let slider3 = parseInt(input.value);
        description3.innerText = `${slider3}`
    }
    let description4 = document.getElementById('description4');
    function updateDescription4(input) {
        let slider4 = parseInt(input.value);
        description4.innerText = `${slider4}`
    }
</script>

{{ next_button }}

{{ endblock }}