Flood3r (statz) | #8, Lófasz (838) |
3548 | #40c3 | ^ | Idézet | Mon, 30 Jan 2017 00:40:39 +01 |
89.132.*.* | *.catv.broadband.hu |
Van egy jó kis adult site-om azt fejlesztgetem. Egy kicsit körülményes a probléma. Szal most wall of text jön. :D Akarok egy olyan csinálni, hogy a videósávon ha húzod az egeret, akkor kis thumbnailek jelenjenek meg a videóból, attól függően, hol van az egér, mint a tecsőn. Lejátszónak a Video.js-t használom. Ehhez vannak különböző pluginek. Találtam is hozzá egy thumbnail plugin-t itt: https://github.com/brightcove/videojs-thumbnails Ezzel az a baj, hogy ahogy az oldalon is láthatod, kézzel kell megadni, hanyadik másodpercnél melyik thumbnail ugorjon fel. Viszont a videók nálam különböző hosszúságúak, szóval hiába állítom be egy 3 perces videóhoz a 19 darab thumbnailt amit generál minden videóhoz az oldal, az 1 órás videónál érdekesen néz ki, szóval egyenletesen kéne elosztogassa őket, a videó hosszától függően. Az oldal egyébként smarty-t is használ. A thumbnailek generálására írtam egy ilyet, hogy ne kézzel kelljen beírogatni 1-től 19 ig: {php} global $video, $tmbint; echo "<script>"; echo "video.thumbnails({"; for($i = 0; $i <= 19; $i++) { if($i == 0) { echo "0: { src: '/media/videos/tmb/".$video['VID'].'/'.($i+1).".jpg', style: { width: '120px', left: '-60px' } }"; } else { echo $i * $tmbint.": { src: '/media/videos/tmb/".$video['VID'].'/'.($i).".jpg', style: { width: '120px', left: '-60px' } }"; } if($i != 19) echo ", \n"; } echo "});"; echo "</script>"; {/php} A videojs.thumbnail.js-t is módosítóttam az alábbiak szerint, ez kb a vége fele van. Erről: mouseTime = Math.floor((left - progressControl.el().offsetLeft) / progressControl.width() * duration); for (time in settings) { if (mouseTime > time) { active = Math.max(active, time); } } setting = settings[active]; if (setting.src && img.src != setting.src) { img.src = setting.src; } if (setting.style && img.style != setting.style) { extend(img.style, setting.style); } width = getVisibleWidth(img, setting.width || settings[0].width); halfWidth = width / 2; Erre: mouseTime = Math.floor((left - progressControl.el().offsetLeft) / progressControl.width() * duration); unit = (progressControl.width()) / 20; moffset = left; for (time in settings) { if (mouseTime > time) { active = Math.max(active, time); } } active = Math.floor(moffset / unit) * Math.floor(duration / 20); setting = settings[active]; if (setting.src && img.src != setting.src) { img.src = setting.src; } if (setting.style && img.style != setting.style) { extend(img.style, setting.style); } width = getVisibleWidth(img, setting.width || settings[0].width); halfWidth = width / 2; Ha ezt így belövöm, akkor a következő történik: Az első thumbnail a helyén van, és ha tovább megyünk kb a 10 ik másodpercnél a vidóban,nem updateli a következő thumbnail-re, hanem kiköp egy hibát: Uncaught TypeError: Cannot read property 'src' of undefined Bocs a hosszú szövegért. Próbáltam rájönni a dologra, de nem sikerült. :/ |