Создание двух <img>элементов при использовании одного потока MotionJPEG

Question

Я пытаюсь создать страницу, которая бы отображала несколько миниатюр изображений MotionJPEG. При щелчке по миниатюре его содержимое также отображается в увеличенном элементе изображения.

Проблема в том, что когда я пытаюсь использовать один и тот же поток MotionJPEG как для эскиза, так и для основного вида (настройка атрибута src основного изображения), данные никогда не приходят. Насколько я понимаю, служба, с которой я работаю в потоковом режиме, позволяет потоковую передачу одного и того же изображения на один IP один раз, т. Е. Все последующие HTTP-запросы не возвращаются, пока работает первый.

Что я могу сделать, чтобы обойти это? Могу ли я использовать один объект изображения JavaScript, например, подключить его к двум узлам DOM одновременно?

Answer 1

Можно ли использовать один объект изображения JavaScript, например, для подключить его к двум узлам DOM одновременно?

Нет. Узел может иметь только одного родителя. Добавление его к новому родителю удаляет его из старого.

Как насчет применения одного и того же фонового изображения к двум элементам, используя CSS background-image? У меня нет ни одной веб-камеры MJPEG-over-HTTP, чтобы проверить ее, хотя, возможно, multipart/x-mixed-replace здесь не работает.

К сожалению, для того чтобы один фон был миниатюрой, вам придется использовать CSS3 background-size, который поддерживается только последними браузерами (не IE <9), а затем часто с префиксами поставщиков. С другой стороны, я считаю, что <code>multipart/x-mixed-replace не работает в IE в любом случае.