HTML5 <DIDEA> Миниатюра плаката не отображается в ODOO - хочу изначально показать миниатюру, сыграть и загружать только Javascript

Форум по Javascript
Ответить
Anonymous
 HTML5 <DIDEA> Миниатюра плаката не отображается в ODOO - хочу изначально показать миниатюру, сыграть и загружать только

Сообщение Anonymous »

Я пытаюсь реализовать ленивую загрузку видео в представлении на панели инструментов в Odoo 18.
Моя цель -: < /p>
Показать миниатюр (плакат) изначально < /p>
Избегайте загрузки /буферизации на странице на странице < /p>
Загрузка и воспроизводствует видео только, когда пользователь не забивает его < /p>
way way wyloe over over ho over < /p>
. ODOO
Когда я тестирует приведенный ниже код в простом автономном HTML-файле, все работает отлично.
Плакат загружается, и видео загружается /играет на Hover: < /p>
html < /p>

< /code>
❌, но та же самая логика не работает в odoo
, когда я генерирую тот же видео-блок от Python в odoo, как это: < /p>
python < /p>
def build_video_tag(url, label, width="180px", height="180px", extra_class=""):
if url:
poster_url = url.replace(".mp4", "/still.jpg")
return f"""



< /code>
и привязать события наклонения через Javascript, например: < /p>
js < /p>
function bindVideoEvents(video) {
if (video.dataset.bound) return;
video.dataset.bound = "1";

video.addEventListener('mouseenter', () => {
const container = video.closest('.video-container');
const allContainers = document.querySelectorAll('.video-container');

if (!video.src && video.dataset.src) {
video.src = video.dataset.src;
video.load();
}

video.play().catch(() => {});
video.style.transform = 'scale(1.8)';
video.style.zIndex = '1000';
video.style.position = 'relative';

allContainers.forEach(c => {
if (c !== container) {
c.classList.add('blur');
}
});
});

video.addEventListener('mouseleave', () => {
const container = video.closest('.video-container');
const allContainers = document.querySelectorAll('.video-container');

video.pause();
video.currentTime = 0;
video.style.transform = 'scale(1)';
video.style.zIndex = '';
video.style.position = '';

allContainers.forEach(c => {
c.classList.remove('blur');
});
});
}

// MutationObserver to bind events to dynamically loaded videos
const observer = new MutationObserver(() => {
document.querySelectorAll('video').forEach(bindVideoEvents);
});
< /code>
В Odoo я получаю пустую серую коробку - нет миниатюры и без воспроизведения.
Изображение плаката вообще не загружается. Это похоже на то, что видео -элемент отображается, но не инициализируется должным образом. < /P>
💡 То, что я проверил:
✅ Url изображения плаката достоверно и доступен (хорошо загружается в браузере) < /p>
✅ Видео также является правильным (тестируется напрямую) < /p>
✅ ✅ no stepled nont "nont". /> ✅ mutationObserver прикрепляет события < /p>
✅ html -вывод правильный в браузере Dom < /p>
❓ Мои вопросы:
Почему ведет себя по -разному в Odoo, даже если один и тот же HTML работает на улице? Плакат или Data-src? /> js написан как модуль Odoo (Odoo.define (...))
URL плаката выглядит как:
https://storage.googleapis.com/simstar- ... ill.jpgbr/> Odoo

Подробнее здесь: https://stackoverflow.com/questions/797 ... bnail-init
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Javascript»