Spaces:
Runtime error
Runtime error
File size: 9,999 Bytes
3b6aa17 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 |
function my_func() {{
var snapshots = "{}";
var referenceVideoSnapshots = "{}";
// Split the string by ";"
var segments = snapshots.split(";");
var referenceVideoSegments = referenceVideoSnapshots.split(";");
var index = 0;
// step 1. the generated demo video list
//#component-37 > div.wrap.svelte-w5wajl > video
//match selector on ModelScope: #component-45 > div.wrap.svelte-w5wajl > video
//match selector on localhost: #component-47 > div.wrap.svelte-lcpz3o > div:nth-child(1) > video
var specificVideos = document.querySelectorAll('[id^="component-"] > div.wrap > video');
// If no videos found by modelScope rule, try localhost rule
if (specificVideos.length === 0) {{
specificVideos = document.querySelectorAll('[id^="component-"] > div.wrap > div:nth-child(1) > video');
}}
// Loop through the NodeList of specific video elements
specificVideos.forEach(function(video) {{
//var videoSelector = "#component-37 > div.wrap > div:nth-child(" + index + ") > video";
//var videoElement = document.querySelector(videoSelector);
var videoElement = video;
if (videoElement) {{
videoElement.poster = segments[index];
//videoElement.autoplay = true;
videoElement.id = "myvideo_" + index;
videoElement.setAttribute("playsinline", "");
videoElement.setAttribute("muted", "");
}} else {{
console.error('Video element not found');
}}
index = index + 1;
}});
// step 2: reference video list
// for local rule to match reference videos:
//#component-24 > div.gallery.svelte-13hsdno > button:nth-child(1) > div > video
//#component-24 > div.gallery.svelte-13hsdno > button:nth-child(2) > div > video
// for modelscope
//#component-24 > div.gallery.svelte-13hsdno > button:nth-child(1) > video
var referenceVideos = document.querySelectorAll('[id^="component-"] > div.gallery > button > video');
// If no videos found by modelScope rule, try localhost rule
if (referenceVideos.length === 0) {{
referenceVideos = document.querySelectorAll('[id^="component-"] > div.gallery > button > div > video');
}}
index = 0;
referenceVideos.forEach(function(video) {{
var videoElement = video;
if (videoElement) {{
videoElement.poster = referenceVideoSegments[index];
//videoElement.autoplay = true;
videoElement.id = "refvideo_" + index;
videoElement.setAttribute("playsinline", "");
videoElement.setAttribute("muted", "");
// Add a click event listener to the video element
videoElement.addEventListener('click', function() {{
setTimeout(() => {{
// Select the video element, and create an oberservor for listening to the src update:
var selectedVideoElement = document.querySelector('#show_window_video > div.wrap > video');
// If no videos found by modelScope rule, try localhost rule
if (selectedVideoElement === null) {{
selectedVideoElement = document.querySelector('#show_window_video > div.wrap > div > video');
}}
if (selectedVideoElement) {{
selectedVideoElement.poster = videoElement.poster;
//selectedVideoElement.autoplay = true;
selectedVideoElement.setAttribute("autoplay", "");
selectedVideoElement.setAttribute("playsinline", "");
selectedVideoElement.setAttribute("muted", "");
//selectedVideoElement.width = 210;
//selectedVideoElement.height = 245;
const userAgent = navigator.userAgent;
// Check for WeChat Mobile Browser
if (/MicroMessenger/i.test(userAgent)) {{
selectedVideoElement.load();
}}
// Check for any Mobile Device
else if (/Mobi/i.test(userAgent)) {{
selectedVideoElement.load();
}}
console.error('poster updated');
}}else {{
console.error('No video element found for selectedVideoElement!!!');
}}
}}, 500)
}});
}} else {{
console.error('Video element not found');
}}
index = index + 1;
}});
// step 3.
// select the target node
var result_box = document.querySelector('#show_box2');
// Get the button element by its ID
var refresh_button = document.querySelector('#button_param1');
function updateVideoSnapshot() {{
const userAgent = navigator.userAgent;
// Check for WeChat Mobile Browser or any Mobile Device
if (/MicroMessenger/i.test(userAgent) || /Mobi/i.test(userAgent)) {{
// Do something if on WeChat or a mobile device
console.error('on mobile');
}} else{{
console.error('on pc');
return ;
}}
videoDiv1 = document.querySelector('#show_window_result1');
// Try to find the video element using a less specific selector
video1 = videoDiv1.querySelector('video');
if (video1) {{
// #output_snapshot_image1 > button > img
var snapshoptImage = document.querySelector('#output_snapshot_image1 button img');
if(snapshoptImage && video1.poster !== snapshoptImage.src){{
video1.poster = snapshoptImage.src;
video1.setAttribute("autoplay", "autoplay");
video1.setAttribute("playsinline", "playsinline");
video1.setAttribute("muted", "muted");
}}
}}
videoDiv2 = document.querySelector('#show_window_result2');
//video2 = document.querySelector('#show_window_result2 > div.wrap > video');
video2 = videoDiv2.querySelector('video');
if (video2 === null) {{
videoDiv2.hidden = true;
}} else {{
videoDiv2.hidden = false;
// #output_snapshot_image2 > button > img
var snapshoptImage = document.querySelector('#output_snapshot_image2 > button > img');
if(snapshoptImage && video2.poster !== snapshoptImage.src){{
video2.poster = snapshoptImage.src;
video2.setAttribute("autoplay", "autoplay");
video2.setAttribute("playsinline", "playsinline");
video2.setAttribute("muted", "muted");
}}
}}
videoDiv3 = document.querySelector('#show_window_result3');
video3 = videoDiv3.querySelector('video');
if (video3 === null) {{
videoDiv3.hidden = true;
}} else {{
videoDiv3.hidden = false;
// #output_snapshot_image3 > button > img
var snapshoptImage = document.querySelector('#output_snapshot_image3 > button > img');
if(snapshoptImage && video3.poster !== snapshoptImage.src){{
video3.poster = snapshoptImage.src;
video3.setAttribute("autoplay", "autoplay");
video3.setAttribute("playsinline", "playsinline");
video3.setAttribute("muted", "muted");
}}
}}
videoDiv4 = document.querySelector('#show_window_result4');
video4 = videoDiv4.querySelector('video');
if (video4 === null) {{
videoDiv4.hidden = true;
}} else {{
videoDiv4.hidden = false;
// #output_snapshot_image4 > button > img
var snapshoptImage = document.querySelector('#output_snapshot_image4 > button > img');
if(snapshoptImage && video4.poster !== snapshoptImage.src){{
video4.poster = snapshoptImage.src;
video4.setAttribute("autoplay", "autoplay");
video4.setAttribute("playsinline", "playsinline");
video4.setAttribute("muted", "muted");
}}
}}
}}
// Define the action to be taken when the button is clicked
function handleButtonClick() {{
setTimeout(() => {{
console.error('Refresh button clicked');
updateVideoSnapshot();
}}, 3600);
setTimeout(() => {{
updateVideoSnapshot();
}}, 5000)
setTimeout(() => {{
updateVideoSnapshot();
}}, 8000)
}}
// Add click event listener to the button
refresh_button.addEventListener('click', handleButtonClick);
}} |