Встроить созданный на Vue.js видео плеер в wordpress, есть ли смысл и как это сделать?

Ссылка скопирована
HTML PHP Vue.js WordPress БЭМ Видео Фреймворки
1 ответ

Задача: создать видео плеер для онлайн трансляций с функционалом ( разделение на эпизоды, смена качества и т.д. ), к нему чат в реальном времени.
Всю эту шнягу нужно иметь возможность просто встроить в сайт на wordpress ( там уже и регистрация, разделение на права админ/пользователь и т.д. ).
Мне сказали что есть два пути:
1) Просто написать отдельно на Vue плеер этот с чатом ( в связке с бэкендером на php ) и встроить это все тегом iframe как-то, но возможно есть подводные?
2) Каким-то боком встроить Vue в WP и написать прямо там это все, я так понимаю, Vue будет как инструмент для клиентской части а WP для бэка, хотя зачем им php тогда.. Ну короче такие дела)

Какие есть способы встроить Vue в WP и для каких целей это вообще обычно делается? Я в WP 0, мне объяснил человек тоже не особо шарящий, спрашиваю у вас короче реально встраивают ли фреймворки в WP и с чем это едят и зачем и как?)
Т.е. что могло иметься ввиду чтобы я встроил Vue в WP когда есть сайт на этом WP и плеер с чатом нужно встроить туда прямо ( возможно, с помощью iframe но вряд-ли )

Дополнительно:

Встроить созданный на Vue.js видео плеер в wordpress, есть ли смысл и как это сделать?

Vue прекрасно поддерживает встройку куда угодно, просто подключаете на странице в script umd версию и тупо делаете mount в нужный dom-элеемент. Никакие фреймы не нужны. Только стили саого компонента огородите от перемешивания с местом встраивания, например с помощью БЭМ иили префиксов.

А ещё лучше - сделать из vue-компонента - web-component, если ориентация идёт на современные бразуеры. Тогда стили вообще будут инкапсулированы, а управление можно вынести в обычные html-аттрибуты.

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Ирина WP Ответ

Vue-плеер в WordPress встраивать можно, это нормальная схема. Вопрос не в том, “можно ли Vue в WP”, а где будет граница ответственности. WordPress может отвечать за страницы, пользователей, права, REST API и админку, а Vue — за интерактивный плеер, чат, переключение качества и состояние интерфейса.

Есть два рабочих варианта:

  • iframe — хорошо, если плеер является отдельным приложением со своим backend, авторизацией, websocket-чатом и деплоем. Меньше конфликтов с темой и плагинами WP.
  • встраивание как ассет WordPress — хорошо, если плеер должен жить внутри страницы WP, использовать текущего пользователя, nonce, REST API и стили сайта.

Для WordPress чаще делают небольшой плагин или код в теме: регистрируют shortcode, подключают собранные Vue-файлы и передают настройки:

add_shortcode('vue_player', function ($atts) {
    wp_enqueue_script(
        'site-vue-player',
        get_stylesheet_directory_uri() . '/assets/player/dist/app.js',
        [],
        '1.0.0',
        true
    );
 
    wp_localize_script('site-vue-player', 'PlayerConfig', [
        'restUrl' => esc_url_raw(rest_url()),
        'nonce'   => wp_create_nonce('wp_rest'),
        'userId'  => get_current_user_id(),
    ]);
 
    return '<div id="vue-player-root"></div>';
});

add_shortcode('vue_player', function ($atts) { wp_enqueue_script( 'site-vue-player', get_stylesheet_directory_uri() . '/assets/player/dist/app.js', [], '1.0.0', true ); wp_localize_script('site-vue-player', 'PlayerConfig', [ 'restUrl' => esc_url_raw(rest_url()), 'nonce' => wp_create_nonce('wp_rest'), 'userId' => get_current_user_id(), ]); return '<div id="vue-player-root"></div>'; });

Потом на странице вставляется [vue_player]. Сам Vue нужно собирать через Vite/Webpack в обычные JS/CSS-файлы, а не пытаться писать весь проект прямо в админке WordPress.

Чат в реальном времени лучше не делать на обычном PHP-запросе к WordPress. Для real-time обычно используют websocket-сервер, Pusher, Firebase, Supabase Realtime или отдельный Node/PHP daemon. WordPress может только проверять права пользователя и отдавать токен доступа.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 0 ответов Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 0 ответов печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 0 ответов Telegram Как диагностировать ошибку с подключением к прокси в мобильном приложении Telegram? 0 ответов