Блог

Главная - Вопросы по программированию - Видео миниатюр Kaltura в теге script, не работающем в react, но отображающем пустое пространство

Видео миниатюр Kaltura в теге script, не работающем в react, но отображающем пустое пространство

#javascript #reactjs #kaltura #kaltura-player

#javascript #reactjs #kaltura #kaltura-проигрыватель

Вопрос:

Я использую встроенную миниатюру Kaltura в React, которая является тегом script, когда я использую тот же тег script на базовой HTML-странице, он работает нормально, но когда я использую тот же тег script в React, он показывает пустое пространство вместо видео, когда я проверял элемент, который я могучтобы увидеть все элементы css и div для этого скрипта. Вот тег script, который я использовал в React. Я новичок здесь, пожалуйста, помогите. Заранее спасибо.

 function App() {
  var x='<script src="https://cdnapisec.kaltura.com/p/3064193/sp/306419300/embedIframeJs/uiconf_id/46610723/partner_id/3064193"></script>
<div id="kaltura_player_1605008383" style="width: 560px; height: 395px;"></div>
<script>
kWidget.thumbEmbed({
  "targetId": "kaltura_player_1605008383",
  "wid": "_3064193",
  "uiconf_id": 46610723,
  "flashvars": {},
  "cache_st": 1605008383,
  "entry_id": "1_0clle8xt"
});
</script>'


return (
<div dangerouslySetInnerHTML={{__html: x}}></div>
);
}

export default App;

Комментарии:

1. вы нашли решение, пожалуйста? Я в такой же ситуации

2. Привет @Asma_Kh. Да, я нашел решение, в котором я использую видео Index.html и регулировка других компонентов из index.html

Ответ №1:

Есть много причин, по которым этот код не работает. Код настройки Kaltura должен быть заключен в `литералы шаблона обратной ссылки. Но даже в этом случае react не настроен на разбор <script> включений.

Одним из способов было бы использовать этот проект: https://github.com/christo-pr/dangerously-set-html-content#readme который предназначен для решения этой проблемы.

И если вы используете react native, вот проект, который может сработать: https://github.com/rafalkaczynsky/react-native-kaltura-player-v3